Universidade do Sul de Santa Catarina
Linguagem de
Programação I
Disciplina na modalidade a distância
Universidade do Sul de Santa Catarina
Linguagens de Programação I
Disciplina na modalidade a distância
Palhoça
UnisulVirtual
2010
Créditos
Universidade do Sul de Santa Catarina – Campus UnisulVirtual – Educação Superior a Distância
Avenida dos Lagos, 41 – Cidade Universitária Pedra Branca | Palhoça – SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: [email protected] | Site: www.unisul.br/unisulvirtual
Reitor Unisul
Ailton Nazareno Soares
Vice-Reitor
Sebastião Salésio Heerdt
Chefe de Gabinete da
Reitoria
Willian Máximo
Pró-Reitora Acadêmica
Miriam de Fátima Bora Rosa
Pró-Reitor de Administração
Fabian Martins de Castro
Pró-Reitor de Ensino
Mauri Luiz Heerdt
Campus Universitário de
Tubarão
Diretora
Milene Pacheco Kindermann
Campus Universitário da
Grande Florianópolis
Diretor
Hércules Nunes de Araújo
Campus Universitário
UnisulVirtual
Diretora
Jucimara Roesler
Equipe UnisulVirtual
Diretora Adjunta
Patrícia Alberton
Secretaria Executiva e Cerimonial
Jackson Schuelter Wiggers (Coord.)
Bruno Lucion Roso
Marcelo Fraiberg Machado
Tenille Catarina
Assessoria de Assuntos
Internacionais
Murilo Matos Mendonça
Assessoria DAD - Disciplinas a
Distância
Enzo de Oliveira Moreira (Coord.)
Carlos Alberto Areias
Franciele Arruda Rampelotti
Luiz Fernando Meneghel
Assessoria de Inovação e
Qualidade da EaD
Dênia Falcão de Bittencourt (Coord.)
Rafael Bavaresco Bongiolo
Assessoria de Relação com Poder
Público e Forças Armadas
Adenir Siqueira Viana
Assessoria de Tecnologia
Osmar de Oliveira Braz Júnior (Coord.)
Felipe Jacson de Freitas
Jefferson Amorin Oliveira
José Olímpio Schmidt
Marcelo Neri da Silva
Phelipe Luiz Winter da Silva
Priscila da Silva
Rodrigo Battistotti Pimpão
Coordenação dos Cursos
Auxiliares das coordenações
Fabiana Lange Patricio
Maria de Fátima Martins
Tânia Regina Goularte Waltemann
Coordenadores Graduação
Adriana Santos Rammê
Adriano Sérgio da Cunha
Aloísio José Rodrigues
Ana Luisa Mülbert
Ana Paula R. Pacheco
Bernardino José da Silva
Carmen Maria C. Pandini
Catia Melissa S. Rodrigues
Charles Cesconetto
Diva Marília Flemming
Eduardo Aquino Hübler
Eliza B. D. Locks
Fabiano Ceretta
Horácio Dutra Mello
Itamar Pedro Bevilaqua
Jairo Afonso Henkes
Janaína Baeta Neves
Jardel Mendes Vieira
Joel Irineu Lohn
Jorge Alexandre N. Cardoso
José Carlos N. Oliveira
José Gabriel da Silva
José Humberto D. Toledo
Joseane Borges de Miranda
Luciana Manfroi
Marciel Evangelista Catâneo
Maria Cristina Veit
Maria da Graça Poyer
Mauro Faccioni Filho
Moacir Fogaça
Myriam Riguetto
Nélio Herzmann
Onei Tadeu Dutra
Raulino Jacó Brüning
Rogério Santos da Costa
Rosa Beatriz M. Pinheiro
Tatiana Lee Marques
Thiago Coelho Soares
Valnei Campos Denardin
Roberto Iunskovski
Rose Clér Beche
Rodrigo Nunes Lunardelli
Coordenadores Pós-Graduação
Aloisio Rodrigues
Anelise Leal Vieira Cubas
Bernardino José da Silva
Carmen Maria Cipriani Pandini
Daniela Ernani Monteiro Will
Giovani de Paula
Karla Leonora Nunes
Luiz Otávio Botelho Lento
Thiago Coelho Soares
Vera Regina N. Schuhmacher
Gerência Administração
Acadêmica
Márcia Luz de Oliveira (Gerente)
Fernanda Farias
Financeiro Acadêmico
Marlene Schauffer
Rafael Back
Vilmar Isaurino Vidal
Gestão Documental
Lamuniê Souza (Coord.)
Clair Maria Cardoso
Janaina Stuart da Costa
Josiane Leal
Marília Locks Fernandes
Ricardo Mello Platt
Secretaria de Ensino a Distância
Karine Augusta Zanoni
(Secretária de Ensino)
Giane dos Passos
(Secretária Acadêmica)
Alessandro Alves da Silva
Andréa Luci Mandira
Cristina Mara Shauffert
Djeime Sammer Bortolotti
Douglas Silveira
Fabiano Silva Michels
Felipe Wronski Henrique
Janaina Conceição
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
Rosângela Mara Siegel
Silvana Henrique Silva
Vanilda Liordina Heerdt
Gerência Administrativa e
Financeira
Renato André Luz (Gerente)
Naiara Jeremias da Rocha
Valmir Venício Inácio
Gerência de Ensino, Pesquisa
e Extensão
Moacir Heerdt (Gerente)
Aracelli Araldi Hackbarth
Elaboração de Projeto e
Reconhecimento de Curso
Diane Dal Mago
Vanderlei Brasil
Extensão
Maria Cristina Veit (Coord.)
Pesquisa
Daniela Will (Coord. PUIP, PUIC, PIBIC)
Mauro Faccioni (Coord. Nuvem)
Pós-Graduação
Clarissa Carneiro Mussi (Coord.)
Biblioteca
Soraya Arruda (Coord.)
Paula Sanhudo da Silva
Renan Felipe Cascaes
Rodrigo Martins da Silva
Capacitação e Assessoria ao
Docente
Angelita Marçal Flores (Coord.)
Adriana Silveira
Alexandre Wagner da Rocha
Cláudia Behr Valente
Elaine Cristiane Surian
Juliana Cardoso Esmeraldino
Patrícia da Silva Meneghel
Simone Perroni da Silva Zigunovas
Monitoria e Suporte
Rafael da Cunha Lara (Coord.)
Anderson da Silveira
Angélica Cristina Gollo
Bruno Augusto Zunino
Claudia Noemi Nascimento
Débora Cristina Silveira
Ednéia Araujo Alberto Francine Cardoso da Silva
Karla F. Wisniewski Desengrini
Maria Eugênia Ferreira Celeghin
Maria Lina Moratelli Prado
Mayara de Oliveira Bastos
Patrícia de Souza Amorim
Poliana Morgana Simão
Priscila Machado
Gerência de Desenho
e Desenvolvimento de
Materiais Didáticos
Márcia Loch (Gerente)
Acessibilidade
Vanessa de Andrade Manoel (Coord.)
Bruna de Souza Rachadel
Letícia Regiane Da Silva Tobal
Desenho Educacional
Carmen Maria Cipriani Pandini
(Coord. Pós)
Carolina Hoeller da S. Boeing
(Coord. Ext/DAD)
Silvana Souza da Cruz (Coord. Grad.)
Ana Cláudia Taú
Cristina Klipp de Oliveira
Eloisa Machado Seemann
Flávia Lumi Matuzawa
Gabriella Araújo 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
Nágila Cristina Hinckel
Roberta de Fátima Martins
Sabrina Paula Soares Scaranto
Viviane Bastos
Relacionamento com o Mercado
Eliza Bianchini Dallanhol Locks
Walter Félix Cardoso Júnior
Gerência de Produção
Arthur Emmanuel F. Silveira (Gerente)
Francini Ferreira Dias
Design Visual
Pedro Paulo Alves Teixeira (Coord.)
Adriana Ferreira dos Santos
Alex Sandro Xavier
Alice Demaria Silva
Anne Cristyne Pereira
Diogo Rafael da Silva
Edison Rodrigo Valim
Frederico Trilha
Higor Ghisi Luciano
Jordana Paula Schulka
Nelson Rosa
Patrícia Fragnani de Morais
Multimídia
Sérgio Giron (Coord.)
Cristiano Neri Gonçalves Ribeiro
Dandara Lemos Reynaldo
Fernando Gustav Soares Lima
Sérgio Freitas Flores
Portal
Rafael Pessi (Coord.)
Luiz Felipe Buchmann Figueiredo
Comunicação
Marcelo Barcelos
Andreia Drewes
Carla Fabiana Feltrin Raimundo
Produção Industrial
Francisco Asp (Coord.)
Ana Paula Pereira
Marcelo Bittencourt
Gerência Serviço de Atenção
Integral ao Acadêmico
James Marcel Silva Ribeiro (Gerente)
Gerência de Logística
Jeferson Cassiano A. da Costa
(Gerente)
Andrei Rodrigues
Logística de Encontros Presenciais
Graciele Marinês Lindenmayr (Coord.)
Ana Paula de Andrade
Cristilaine Santana Medeiros
Daiana Cristina Bortolotti
Edesio Medeiros Martins Filho
Fabiana Pereira
Fernando Oliveira Santos
Fernando Steimbach
Marcelo Jair Ramos
Logística de Materiais
Carlos Eduardo D. da Silva (Coord.)
Abraão do Nascimento Germano
Fylippy Margino dos Santos
Guilherme Lentz
Pablo Farela da Silveira
Rubens Amorim
Gerência de Marketing
Fabiano Ceretta (Gerente)
Alex Fabiano Wehrle
Sheyla Fabiana Batista Guerrer
Victor Henrique M. Ferreira (África)
Atendimento
Maria Isabel Aragon (Coord.)
Andiara Clara Ferreira
André Luiz Portes
Bruno Ataide Martins
Holdrin Milet Brandao
Jenniffer Camargo
Maurício dos Santos Augusto
Maycon de Sousa Candido
Sabrina Mari Kawano Gonçalves
Vanessa Trindade
Orivaldo Carli da Silva Junior
Estágio
Jonatas Collaço de Souza (Coord.)
Juliana Cardoso da Silva
Micheli Maria Lino de Medeiros
Priscilla Geovana Pagani
Prouni
Tatiane Crestani Trentin (Coord.)
Gisele Terezinha Cardoso Ferreira
Scheila Cristina Martins
Taize Muller
Patrícia Gerent Petry
Linguagens de Programação I
Livro didático
Revisão e atualização
Clavison Martinelli Zapelini
Design instrucional
Leandro Kingeski Pacheco
Melina de la Barrera Ayres
3ª edição revista e atualizada
Palhoça
UnisulVirtual
2010
Copyright © UnisulVirtual 2010
Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição.
Edição – Livro Didático
Professor Conteudista
Patricia Gerent Petry
Revisão e Atualização
Clavison Martinelli Zapelini (3ª ed. rev. e atual.)
Design Instrucional
Leandro Kingeski Pacheco
Melina de la Barrera Ayres (3ª ed. rev. e atual.)
Assistente Acadêmico
Sabrina Paula Soares Scaranto (3ª ed. rev. e atual.)
Lygia Pereira (3ª ed. rev. e atual.)
Projeto Gráfico e Capa
Equipe UnisulVirtual
Diagramação
Rafael Pessi
Anne Cristyne Pereira (3ª ed. rev. e atual.)
Revisão
Amaline Boulus Issa Mussi (3ª ed. rev. e atual.)
005.133
P59
Petry, Patrícia Gerent
Linguagens de programação I : livro didático / Patrícia Gerent Petry ; revisão
e atualização Clavison Martinelli Zapelini ; design instrucional Leandro Kingeski
Pacheco, Melina De La Barrera Ayres ; [assistente acadêmico Sabrina Paula Soares
Scaranto, Lygia Pereira]. – 3. ed. rev. e atual. – Palhoça : UnisulVirtual, 2010.
310 p. : il. ; 28 cm.
Inclui bibliografia.
1. Linguagem de programação (Computadores). 2. HTML (Linguagem
de programação de computador). I. Zapelini, Clavison Martinelli. II. Pacheco,
Leandro Kingeski. III. Ayres, Melina De La Barrera. IV. Scaranto, Sabrina Paula
Soares. IV. Pereira, Lygia. V. Título.
Ficha catalográfica elaborada pela Biblioteca Universitária da Unisul
Sumário
Apresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
UNIDADE 1 – Conceitos básicos pertinentes à linguagem de
programação HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
UNIDADE 2 – Introdução à HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
UNIDADE 3 – Listas e Vínculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
UNIDADE 4 – Mais formatação em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
UNIDADE 5 – Uso de Imagens, Painéis de Fundo e
Arquivos de Música . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
UNIDADE 6 – Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
UNIDADE 7 – Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
UNIDADE 8 – Desenvolvendo páginas eficientes . . . . . . . . . . . . . . . . . . . . . . . . . . 215
UNIDADE 9 – Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
UNIDADE 10 – Criação de Formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Respostas e comentários das atividades de autoavaliação . . . . . . . . . . . . . . . . . 307
Biblioteca Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Apresentação
Este livro didático corresponde à disciplina Linguagens de
Programação I.
O material foi elaborado visando a uma aprendizagem autônoma
e aborda conteúdos especialmente selecionados e relacionados
à sua área de formação. Ao adotar uma linguagem didática
e dialógica, objetivamos facilitar seu estudo a distância,
proporcionando condições favoráveis às múltiplas interações e a
um aprendizado contextualizado e eficaz.
Lembre que sua caminhada nesta disciplina será acompanhada
e monitorada constantemente pelo Sistema Tutorial da
UnisulVirtual. Neste sentido a expressão “a distância”
caracteriza, somente, a modalidade de ensino pela qual optou
para sua formação, pois, na relação de aprendizagem, professores
e instituição estarão sempre conectados com você.
Então, sempre que sentir necessidade entre em contato. Você tem
à disposição diversas ferramentas e canais de acesso, tais como:
telefone, e-mail e o Espaço Unisul Virtual de Aprendizagem,
que é o canal mais recomendado, pois tudo o que for enviado e
recebido fica registrado para seu maior controle e comodidade.
Nossa equipe técnica e pedagógica terá o maior prazer em lhe
atender, pois sua aprendizagem é o nosso principal objetivo.
Bom estudo e sucesso!
Equipe UnisulVirtual
Palavras da professora
Caro(a) Aluno(a)!
Você já deve ter passado boa parte de seu tempo explorando
a web, e é provável que já esteja familiarizado(a) com a maior
parte do conteúdo deste livro. Com ele, vamos aprender
a escrever páginas para a web. Talvez você até já tenha
realizado isto em alguma oportunidade. Muitos dos conteúdos
provavelmente serão cansativos para você. Mas não deixe de
ler e participar, contribuindo assim para o bom andamento da
Disciplina.
Aqui você encontrará tudo que precisa para criar uma página
estática na web. Digo estática, porque, aqui, ainda não
aprenderemos a tornar as páginas dinâmicas, como existem
em muitos sites já visitados por você (por exemplo, realizar um
cadastro em um banco de dados, via web). Iremos aprender
como criar uma página HTML, disponibilizá-la na web, criar
vínculos, incluir imagens, etc.
Este livro trata de detalhes técnicos básicos para a criação de
um site na web. Você aprenderá por que deve produzir um
efeito em particular em uma página, quando deve usá-lo e
como. Neste livro, você também encontrará dicas, sugestões e
muitos exemplos de como estruturar sua apresentação, e não
simplesmente o texto em cada página. Ou seja, o livro dará
dicas para uma boa apresentação de um site na web.
Trabalhar com desenvolvimento para a web é gratificante,
pois sabemos que uma das características mais interessantes
da internet é a oportunidade que todas as pessoas têm de
disseminar informações. Portanto disponibilizar informações
na web será o nosso foco. Espero que você se anime e se divirta
bastante, enquanto estuda. Vamos lá?
Bons estudos!
Professora Patrícia Gerent Petry
Plano de estudo
O plano de estudos visa a orientá-lo(a) no
desenvolvimento da disciplina. Possui elementos que o(a)
ajudarão a conhecer o contexto da disciplina e a organizar
o seu tempo de estudos.
O processo de ensino e aprendizagem na UnisulVirtual
leva em conta instrumentos que se articulam e se
complementam, portanto a construção de competências
se dá sobre a articulação de metodologias e por meio das
diversas formas de ação/mediação.
São elementos desse processo:
„„
o livro didático;
„„
o Espaço UnisulVirtual de Aprendizagem (EVA);
„„
„„
as atividades de avaliação (complementares, a
distância e presenciais);
o Sistema Tutorial.
Ementa
Apresentação das principais linguagens de programação
e ferramentas para desenvolvimento de sites. Estudo de
HTML. Desenvolvimento de sites estáticos. Tabelas,
frames, formulários, imagens, som, vídeo e links. Estilos de
fontes e definição de conteúdos. Implementação de sites e
seus respectivos testes, avaliação e manutenção.
Universidade do Sul de Santa Catarina
Carga Horária
A carga horária total da disciplina é de 120 horas-aula, 8
créditos, incluindo o processo de avaliação.
Objetivos
Gerais
Esta Disciplina tem por objetivo fornecer um estudo sobre a
linguagem básica utilizada para a criação de páginas na internet:
HTML (HyperText Markup Language). Serão abordados os
conceitos básicos e avançados da linguagem.
Específicos
„„
Apresentar o funcionamento da web.
„„
Descrever os principais conceitos referentes à HTML.
„„
Conhecer alguns editores de HTML.
„„
Definir o que são tags HTML.
„„
„„
Aprender a criar listas.
„„
Aprender a criar vínculos em HTML.
„„
Proporcionar formatações em parágrafos e textos
HTML.
„„
Trabalhar com imagens em páginas da web.
„„
Utilizar tabelas.
„„
Construir frames.
„„
Proporcionar a criação de folhas de estilos.
„„
12
Identificar as tags e a estrutura geral de uma página
HTML.
Elaborar um layout adequado para as suas páginas em
HTML.
„„
Criar formulários.
„„
Verificar elementos e atributos HTML obsoletos.
Linguagens de Programação I
Conteúdo programático/objetivos
Os objetivos de cada unidade definem o conjunto de
conhecimentos que você deverá deter para o desenvolvimento de
habilidades e competências necessárias à sua formação. Neste
sentido, veja, a seguir, as unidades que compõem o livro didático
desta Disciplina, bem como os seus respectivos objetivos.
Unidades de estudo: 10
Unidade 1 – Conceitos básicos pertinentes à linguagem de programação
HTML
Esta unidade pretende descrever o que é a internet, revendo seus
conceitos. Como funciona a web, definindo o que é HTML e
como editar documentos HTML.
Unidade 2 – Introdução à HTML
Nesta unidade, você iniciará a criação de páginas web. Aprenderá
a estruturar o código HTML e a utilizar os tags.
Unidade 3 – Listas e Vínculos
Nesta unidade, você criará diversos tipos de listas possíveis.
Saberá como inserir um comentário em seu código HTML e
como incluir vínculos entre o texto e as páginas da web.
Unidade 4 – Mais formatação em HTML
Nesta unidade, você distinguirá os diferentes estilos de caracter.
Saberá como formatar e utilizar as tags <blink> e <marquee>.
13
Universidade do Sul de Santa Catarina
Unidade 5 – Uso de Imagens, Painéis de Fundo e Arquivos de Áudio
Nesta unidade, você utilizará a tag <img> e seus atributos. Fará
referência de hipertexto com imagem. Criará painéis de fundo
com imagens. Além disso, serão abordadas sugestões para um
melhor uso das imagens e técnicas para manipulação de arquivos
de áudio.
Unidade 6 – Tabelas
Nesta unidade, você criará as tabelas e seus elementos básicos:
alinhamento da tabela e das células, dimensões e cor.
Unidade 7 – Frames
Nesta unidade, você construirá frames com o elemento
FRAMESET, aprenderá suas aplicações e cuidados no uso. Fará
links com frames. Realizará a composição dos frames e distinguirá
os atributos de frameset e frame.
Unidade 8 – Desenvolvendo páginas eficientes
Na unidade 8, você desenvolverá páginas eficientes. Saberá como
utilizar as extensões de HTML, como realizar o projeto e layout
da página e como usar os vínculos. Nesta unidade, também
encontrará sugestões de bons hábitos e conhecerá atributos
HTML em desuso.
Unidade 9 – Folhas de Estilo
Nesta unidade, você saberá o que são as folhas de estilos e a
sintaxe SCC. Aprenderá os tipos de definição de estilos e a
ordem da cascata.
14
Linguagens de Programação I
Unidade 10 – Criação de Formulários
Nesta unidade, você criará formulários. Usará campos de entrada
de texto; seleções - listas de opções; botões de rádio, caixas de
validação e botões de envio. Você verá, também, um exemplo
completo de formulário.
Agenda de atividades/ Cronograma
„„
„„
„„
Verifique com atenção o EVA, organize-se para acessar
periodicamente o espaço da Disciplina. O sucesso nos
seus estudos depende da priorização do tempo para a
leitura; da realização de análises e sínteses do conteúdo; e
da interação com os seus colegas e professor.
Não perca os prazos das atividades. Registre no espaço
a seguir as datas, com base no cronograma da disciplina
disponibilizado no EVA.
Use o quadro para agendar e programar as atividades
relativas ao desenvolvimento da Disciplina.
15
Universidade do Sul de Santa Catarina
Atividades obrigatórias
Demais atividades (registro pessoal)
16
unidade 1
Conceitos básicos pertinentes à
linguagem de programação HTML
Objetivos de aprendizagem
n
Rever conceitos importantes sobre Internet.
n
Conhecer HTML.
n
Conhecer alguns editores de HTML existentes.
Seções de estudo
Seção 1 O que é a Internet
Seção 2 Como funciona a web
Seção 3 Afinal o que é HTML?
Seção 4 Edição de documentos HTML
1
Universidade do Sul de Santa Catarina
Para início de estudo
Caro(a) aluno(a), antes de você iniciar seus estudos sobre
linguagem de programação I, vamos relembrar alguns conceitos
já estudados.
A World Wide Web (Teia de Alcance
Mundial) é o nome dado à rede
de servidores da Internet que
mantém documentos hipermídia
interligados entre si por hiperlinks
os quais formam uma grande teia
de informações espalhadas pelo
mundo. A WWW foi a grande
responsável pela popularização da
Internet, oferecendo um método
mais intuitivo de pesquisar e
consultar informações na grande
rede.
Uma das características mais interessantes da Internet é
a oportunidade que todos os usuários têm de disseminar
informações. Tanto um vencedor do prêmio Nobel quanto
um estudante do primeiro ano de faculdade contam com os
mesmos canais de distribuição para expressar suas ideias. Com
o surgimento da World Wide Web, esse meio só foi enriquecido.
O conteúdo da rede ficou mais atraente com a possibilidade de
incorporar imagens e sons. Um novo sistema de localização de
arquivos criou um ambiente em que cada informação tem um
endereço único e pode ser encontrada por qualquer usuário da
rede.
A evolução da internet é constante. Atualmente, a evolução
mais marcante é a preconizada WEB 2.0, que melhorou muito
o carregamento de páginas dinâmicas com a substituição do
simples HTML pelo XHTML e a utilização de AJAX. Esses
conceitos serão abordados de forma mais aprofundada na unidade
7. Na prática, não existe nenhuma diferença entre as páginas de
uma grande empresa na web e as páginas que você irá produzir.
Ambas podem ser acessadas com a mesma facilidade. A diferença
é uma só: a criatividade. Este livro tem o objetivo de fornecer
as ferramentas básicas para exercitar a criatividade na web. Será
preciso, então, aprender um pouco de HTML (HyperText Markup
Language), a linguagem utilizada para criar as páginas. Você
também vai encontrar uma porção de dicas, truques e exemplos.
Seção 1 - O que é a Internet
Muito provavelmente, você já estudou a internet. Antes de iniciar
os estudos, escreva aqui: O que você entende por internet?
18
Linguagens de Programação I
Existem muitos termos que tentam definir a Internet.
Superestrada da informação, preferem os políticos. Rede de
redes, insistem os cientistas. O certo é que cada um desses
grupos prefere ver a rede segundo seus próprios interesses. Para
os políticos, uma nova fronteira de construção e investimentos
coletivos é um desafio. Já os cientistas, rigorosos em suas
definições, enxergam a virtude da Internet em conectar
computadores de qualquer tipo em todo o globo.
As visões distintas da rede não param por aí. Há quem veja
na Internet uma perigosa fonte de pornografia. As indústrias
sonham com o dia em que poderão vender diretamente aos
consumidores, sem nenhum intermediário. Empresas de
comunicação esperam o meio que reúna rádio, TV e televisão em
um mesmo sistema de produção. Pais de estudantes no exterior
matam as saudades pelo monitor, e paqueras virtuais acontecem a
toda hora, em cada canto da rede.
A Internet é tudo isso ao mesmo tempo e, com certeza, muito
mais. A rede é o que cada pessoa quiser que ela seja. Em toda
a história da Internet, foram os usuários que inventaram novos
recursos e novas aplicações. É um terreno fértil para boas ideias,
e, ao mesmo tempo, perigoso, quando utilizado para fins ilícitos.
Unidade 1
19
Universidade do Sul de Santa Catarina
Isso tudo porque a Internet é uma invenção muito simples.
Nada mais é do que uma forma fácil e barata de fazer com que
computadores distantes possam se comunicar. A partir daí, a
revolução está nas mãos das pessoas.
Cada usuário recebe uma identificação única, conhecida
como endereço. Com esse endereço, ele pode se comunicar,
enviando mensagens para outras pessoas. É o que se chama
de correio eletrônico. Graças aos esforços de instituições como
Universidades e empresas ligadas à pesquisa, dispostas a investir
dinheiro e pessoal para criar e manter os pontos principais da
rede - os servidores (computadores de alto desempenho) - é
possível conseguir programas de graça e consultar bancos de
dados públicos.
Hoje, com o sucesso da Internet, toda empresa se vê na obrigação
de colocar a cara na rede. Os serviços se multiplicam. Os bancos
oferecem todas as suas operações pelo computador. Notícias são
distribuídas imediatamente. Pizzarias aceitam pedidos. Livrarias
e lojas de discos vendem seus produtos.
No entanto boa parte do material da rede é produzida por
indivíduos que desejam expressar ao mundo suas preferências.
Um usuário reúne tudo que tinha sobre Jornada nas Estrelas e
coloca na Internet. Outro, com objetivos mais práticos, escreve
um currículo e espera que seus talentos sejam descobertos.
Qualquer pessoa que um dia sentiu vontade de compartilhar suas
façanhas, agora pode fazer isso. O tal terreno fértil da Internet
tem um nome. Chama-se World Wide Web ou apenas web.
Seção 2 - Como funciona a web
O navegador é usado para
exibir páginas da web e outras
informações disponíveis na world
wide web e navegar por elas.
20
A web funciona basicamente com dois tipos de programas:
os clientes e os servidores. O cliente é o programa utilizado
pelos usuários para ver as páginas, enquanto os servidores ficam
responsáveis por armazenar o conteúdo da rede e permitir
o acesso a ele. Neste livro, chamamos o programa cliente
de navegador (browser, em inglês). O que o navegador faz é
Linguagens de Programação I
requisitar um arquivo para um servidor. Se a informação pedida
estiver realmente armazenada naquele servidor, o pedido será
enviado de volta e mostrado na tela do navegador.
Você tem ideia de como a informação na web é
organizada?
A informação na web é organizada na forma de páginas,
que podem conter texto, imagens, sons e, mais recentemente,
pequenos programas. Além disso, as páginas da web podem ser
ligadas umas com as outras, formando o que se chama de um
conjunto de hipertextos. Assim, é possível, por exemplo, que um
trabalho de faculdade faça referência direta a um texto que serviu
de base para o estudo. O leitor interessado na fonte de pesquisa
pode saltar imediatamente para o texto original. Desta forma,
qualquer documento pode levar a um outro texto que também
esteja disponível na rede. A possibilidade de criar uma “malha”
de informação em torno do planeta deu origem ao nome World
Wide Web, que significa “teia de alcance mundial”.
Um exemplo de páginas
que utilizam hipertextos
pode ser visualizados em:
<http://pt.wikipedia.org/
wiki/Internet>. Acesso em
1ºmar.2010.
A web é um sistema de informação em hipertexto. Os sistemas de
ajuda on-line utilizam hipertextos para apresentar informações.
A figura 1.1 a seguir mostra um diagrama simples de como
funciona esse tipo de sistema.
Figura 1.1 – Sistema de ajuda on-line.
Unidade 1
21
Universidade do Sul de Santa Catarina
Você Sabia?
Hipertexto é um sistema para a visualização de informação
cujos documentos contêm referências internas para outros
documentos (chamadas de hiperlinks ou, simplesmente, links), e
para a fácil publicação, atualização e pesquisa de informação. O
sistema de hipertexto mais conhecido atualmente é a World Wide
Web. O hipertexto permite que você leia um texto e navegue
por ele e por informações visuais não lineares, com base nas
informações que deseja obter em seguida.
O Link ou Hiperlink é um dos principais elementos de um
hipertexto, pois permite a conexão de uma página com
informações a outra previamente definida, geralmente contendo
um assunto correlato. Nas páginas WWW, os hiperlinks aparecem
como palavras em destaque, normalmente sublinhadas e de cor
diferente do restante do texto, e são acionados clicando-se sobre
eles com o mouse.
A web é gráfica e fácil de ser navegada
Antes da web, o uso da internet envolvia conexões simples de
textos. Você tinha de navegar pelos vários serviços da internet,
utilizando interfaces de linha de comandos e ferramentas
rudimentares. Embora houvesse muitas informações realmente
interessantes na internet, ela não tinha um aspecto agradável.
A web fornece recursos de imagem, som e vídeo que podem
ser incorporados ao texto, e os softwares mais recentes oferecem
novos recursos para multimídia e aplicativos incorporados. E o
mais importante é que a interface de todos esses recursos é de
fácil navegação – basta saltar de vínculo em vínculo, de página
em página, passando por sites e servidores.
Se a web incorpora muito mais do que texto, por que
é chamada de sistema de hipertexto? Não deveria ser
um sistema de hipermídia? Muitos autores discutem
o assunto. Muitos argumentam que a web começou
com um sistema de textos e que a maior parte de seu
conteúdo ainda é, basicamente, composta de textos,
com partes extras de mídias.
22
Linguagens de Programação I
A web é distribuída
Sabemos que as informações ocupam muito espaço, especialmente
quando você inclui imagens, sons, vídeos. Para armazenar todas as
informações que a web fornece, você precisa de um espaço enorme
em disco, e seria quase impossível gerenciá-las.
A web consegue fornecer um volume tão grande de informações,
porque elas estão distribuídas, globalmente, por milhares de sites,
cada qual contribuindo com o espaço necessário às informações
que divulga.
A web é dinâmica
Como as informações da web estão contidas no site que as
divulgou, as pessoas que as publicaram, originalmente, podem
atualizá-las de forma instantânea, a qualquer momento. Para
obter informações atualizadas, basta usar o seu navegador para
navegar pelas informações e verificar o que há de novo.
Site da web é um local na
web que divulga algum
tipo de informação.
Quando você exibe uma
página da web, o seu
navegador se conecta a
esse site da web para obter
essas informações.
A web é independente de plataforma
O termo independente de plataforma significa que você pode
acessar as informações disponíveis na web a partir de qualquer
computador, sistema operacional e monitor de vídeo.
Você tem acesso à web através de um aplicativo denominado
navegador (browser), como o Netscape Navigator, Internet
Explorer, Mozilla Firefox ou Google Chrome. Você pode encontrar
muitos desses navegadores para a maioria dos sistemas
computacionais existentes. E, depois que tiver um navegador e
uma conexão com a internet, você terá alcançado seu objetivo:
você estará na web.
Unidade 1
23
Universidade do Sul de Santa Catarina
A ideia de que a web é independente de plataforma
não é sustentada por todos. Com a introdução
de novos recursos, tecnologias e tipos de mídia, a
web está perdendo parte de sua capacidade de ser
verdadeiramente independente de plataforma. À
medida que os autores da web optam por usar esses
recursos mais recentes, eles voluntariamente limitam
o público potencial para seus sites.
A web é interativa
Interatividade é a capacidade de “responder” ao servidor web. A
web é interativa por natureza. O ato de selecionar um vínculo e
acessar outra página da web para ir a outro local na web é uma
forma de interatividade. Além disso, ela permite que você se
comunique com o autor das páginas que está lendo e com outros
leitores dessas páginas.
Os navegadores da web
GUI = Interface Gráfica com o Usuário
Conforme você estudou anteriormente, os usuários circulam
por essa teia com um programa chamado navegador, que é o
programa que você utiliza para exibir páginas pela world wide
web. Esse programa envia pedidos de páginas pela rede e as
apresenta na tela do usuário. Existem vários navegadores da web,
praticamente para todas as plataformas que você possa imaginar,
desde sistemas baseados em GUI (Mac, Windows), a sistemas
de textos para conexões UNIX. Os navegadores mais conhecidos
são o Netscape Navigator, o Microsoft Internet Explorer, Mozilla
Firefox ou Google Chrome.
A opção de desenvolver programas para um navegador específico
é conveniente, quando você sabe que o seu site da web vai ser
visto por um público limitado. Esse tipo de desenvolvimento é
uma prática comum em intranets implementadas em corporações.
Neste livro, os exemplos realizados foram utilizados com o
navegador Internet Explorer 5.0.
24
Linguagens de Programação I
Os servidores web
Para que uma página esteja permanentemente disponível na
web, ela precisa ter um endereço fixo, alojada em um servidor.
Este endereço é chamado URL (Uniform Resource Locator, numa
tradução literal, localizador uniforme de recursos).
Os pedidos dos navegadores são atendidos por uma combinação
de computadores e programas que formam os servidores. Esses
computadores e programas armazenam as páginas e podem
exercer algum tipo de controle sobre quais usuários podem
acessá-las. Os servidores são máquinas potentes instaladas
em universidades, empresas e órgãos do governo, conectados
permanentemente à Internet. Também é possível montar um
servidor de web em casa, com um computador pessoal.
Apesar de poderem ser instalados em, praticamente, todos os
tipos de computadores, os servidores devem estar conectados 24
horas por dia na rede, para que os usuários possam requisitar as
páginas a qualquer momento. A melhor solução para montar um
conjunto de páginas é procurar uma empresa que aluga espaço
em um servidor web.
Existem vários provedores de espaço (hostings) gratuitos. Os
provedores de acesso à internet geralmente oferecem espaço para
os sites de seus assinantes. Sites com fins lucrativos são geralmente
hospedados em provedores de espaço pagos.
Definida a hospedagem, basta enviar para o provedor os arquivos
de seu site (via FTP ou por uma página de envio no próprio
provedor de espaço), e suas páginas já estarão disponíveis para
visitas.
O que é uma URL
A web permitiu que cada documento na rede tenha um endereço
único, que indica o nome do arquivo, diretório, nome do servidor
e o método pelo qual ele deve ser requisitado. Esse endereço foi
chamado de URL. Toda URL apresenta uma estrutura básica.
Acompanhe tal estrutura em função do exemplo seguinte:
Unidade 1
25
Universidade do Sul de Santa Catarina
Considere a seguinte URL:
<http://www.unisul.br/aluno/aluno.html>
Onde,
http:// é o método pelo qual ocorrerá a transação
entre cliente e servidor. HTTP (HyperText Transfer
Protocol, ou protocolo de transferência de arquivos
de hipertexto) é o método utilizado para transportar
páginas de web pela rede. Outros métodos comuns
são: ftp:// (para transferir arquivos), news:// (grupos de
discussão) e mailto:// (para enviar correio eletrônico).
www.unisul.br é o nome do servidor onde está
armazenado o arquivo. Nem sempre o nome de um
servidor de web inicia por www. Existem alguns com
nomes como cs. dal. ca.
/aluno/ é o diretório onde está o arquivo. Às vezes,
uma URL indica apenas o diretório (ou o servidor).
Neste caso, o servidor se encarrega de procurar e
enviar o arquivo adequado.
aluno.html é o nome do arquivo. A extensão .html
indica que se trata de uma página web. Uma URL
pode indicar outras extensões. Quando o navegador
recebe um arquivo com a extensão .txt, o arquivo
é tratado como um texto comum. Em outros casos,
como nas extensões .zip (arquivo comprimido) e
.exe (um programa), o navegador abre uma janela,
perguntando ao usuário o que fazer com o arquivo.
Esse endereço único de um documento pode ser utilizado pelo
usuário para localizar um arquivo com o navegador. Nesse caso, o
usuário deve preencher com o endereço uma janela do navegador
conhecida como Endereço. A URL será enviada até o servidor,
que tentará localizar o arquivo e enviá-lo para o usuário. Caso o
arquivo não esteja disponível no servidor, o usuário receberá uma
mensagem de erro.
As URLs também são colocadas dentro de páginas de WWW
para fazer referência a outras informações disponíveis na Internet.
Neste caso, determinados itens (trechos de texto ou imagens)
da página, conhecidos como links, como já visto, podem ser
utilizados pelos usuários para saltar de um lugar a outro na
rede. Os links podem estabelecer ligação com qualquer tipo de
arquivo. Essa ligação entre os documentos é o que se chama de
hipertexto.
26
Linguagens de Programação I
Seção 3 - Afinal o que é HTML? 
Para você publicar informações acessíveis a todos, você precisa
de uma linguagem entendida mundialmente, algo parecido
com uma linguagem padrão que todos os computadores possam
entender. Como já dito, a linguagem utilizada para a World
Wide Web é a HTML (HyperText Markup Language – ou
linguagem de formatação de hipertexto). 
O HTML é uma linguagem de marcação de texto ou dado
relativamente simples e que pode ser combinado com outras
linguagens de programação como: JSP, PHP, ASP, etc;
podendo dar efeito dinâmico aos sites.
O HTML permite:
„„
„„
„„
„„
publicar documentos on-line com texto, tabelas,
fotografias e muito mais;
receber informações através de ligações (links) de
hipertexto por meio de um clique;
desenhar formulários para transações comerciais através
de serviços remotos, como para encontrar informação,
fazer reservas, encomendar produtos, etc.;
e, ainda, incluir som, vídeo e muitas aplicações nos
documentos.
Breve histórico do HTML
O HTML foi originalmente desenvolvido por Tim BernersLee, quando estava no CERN, e tornou-se conhecido através
do Mosaic, um browser desenvolvido em NCSA. Durante os
primórdios dos anos 90, expandiu-se com a enorme explosão
do crescimento da WWW. Quando o HTML surgiu, a sua
principal utilização era para descrever a informação, sendo
predominantemente usado no meio científico para partilhar
documentos de forma universal e facilmente legível. Parágrafos,
listas, cabeçalhos, títulos (os elementos principais do HTML)
eram ideais para este tipo de documentação.
Unidade 1
27
Universidade do Sul de Santa Catarina
Posteriormente, o HTML foi expandido em vários caminhos. De
1990 a 1995, a linguagem HTML sofreu uma série de extensões
por parte de diversos grupos e organizações: HTML 2.0 da
IETF, HTML+, HTML 3.0.
Em 1996, os esforços do grupo de trabalho do World Wide Web
Consortium levaram ao aparecimento do standard HTML 3.2.
Entretanto, o problema foi que a web ficou literalmente cheia
de sites feitos com essas “criatividades” em HTML, que o
puxaram para uma finalidade que não a original. Para acomodar
os mais variados pedidos, as tags de apresentação (cor, fonte
e alinhamento) foram usadas e abusadas, quando o principal
propósito da linguagem era estruturar a informação. Muitos,
em alguma fase, aproveitaram-se das aparentes facilidades desta
versão do HTML e de browsers demasiado permissivos a erros.
Muitas pessoas concordavam que os documentos HTML
deveriam trabalhar bem, através de diferentes browsers e sistemas
operacionais. Em 1997, surge o HTML 4.0, que é uma extensão
do HTML 3.2, que permite a utilização de folhas de estilo
(style sheets), mecanismos de scripts, frames, objetos incorporados e
alguns mecanismos de acessibilidade para deficientes.
Em 1999, o HTML 4.01 fixa certo número de erros e
incongruências encontrados na recomendação anterior.
Neste momento, em 1999, existe um consenso para a necessidade
de se voltar um pouco atrás, preparando ao mesmo tempo
o futuro. Um exemplo é a separação do conteúdo com a
apresentação do documento, usando XHTML para o conteúdo e
deixando a apresentação do documento a cargo de Cascading Style
Sheets (CSS).
Esta linguagem (XHTML) foi desenvolvida e aprovada com a
recomendação do World Wide Web Consortium (W3C) em 2000,
e é a sucessora do HTML 4.0. O XHTML nada mais é que o
HTML escrito em XML (eXtensible Markup Language).
28
Linguagens de Programação I
Você Sabia?
World Wide Web Consortium (W3C)
O World Wide Web Consortium é um consórcio de empresas de
tecnologia (atualmente cerca de 500 membros) fundado por
Tim Berners Lee, em 1994, para levar a web ao seu potencial
máximo, através do desenvolvimento de protocolos comuns
e fóruns abertos que promovam sua evolução e assegurem
a sua interoperabilidade. O W3C desenvolve tecnologias
denominadas padrões da web para a criação e a interpretação
dos seus conteúdos. Sites desenvolvidos segundo esses
padrões podem ser acessados e visualizados por qualquer
pessoa ou tecnologia, independente de hardware ou
software utilizados, como celular, PDA, eletrodomésticos etc.,
independentemente da plataforma, de maneira rápida e
compatível com os novos padrões e tecnologias que possam
surgir com a evolução da internet.
Para alcançar seus objetivos, a W3C possui diversos comitês
que estudam as tecnologias existentes para a apresentação de
conteúdo na Internet e criam padrões de recomendação para
utilizar estas tecnologias. Com a padronização, os programas
conseguem acessar facilmente os códigos e entender
onde deve ser aplicado cada conhecimento expresso no
documento.
Apesar do W3C não ser muito conhecido no Brasil, padrões
seus como HTML, eXtensible Hypertext Markup Language
(XHTML) e Cascading Style Sheets (CSS) são muito populares.
Contudo, em muitos casos, são usados de forma errônea
devido à falta de conhecimento de suas especificações.
É um dever de todo desenvolvedor web respeitar e seguir
os padrões do W3C, pois, de outro modo, poderá estar
impondo barreiras tecnológicas a diversas pessoas e, com
isso, desestimulando e, até mesmo, impedindo o acesso a suas
páginas.
O site oficial da W3C é http://www.w3c.org. Todas as
atividades em desenvolvimento estão em inglês, mas você
encontrará uma grande parte das especificações traduzida
para outras línguas.
Unidade 1
29
Universidade do Sul de Santa Catarina
Em suma, hoje em dia temos um HTML mais flexível, portátil
e com um formato prático para dar forma aos documentos de
Internet, que pode ser combinado com outras linguagens como
Javascript, Flash e Java, tornando o documento muito mais
interativo.
Seção 4 - Edição de documentos HTML
Agora que você conheceu um pouco da história do HTML e
de suas novidades, vamos aprender como editar um documento
HTML, além de efetuar uma breve introdução à linguagem
HTML.
Os documentos em HTML são como arquivos ASCII comuns,
que podem ser editados em vi (no linux), emacs (no linux),
textedit, bloco de notas, ou qualquer editor simples.
Para facilitar a produção de documentos, existem editores
HTML específicos:
„„
Editores de texto fonte - facilitam a inserção das
etiquetas (tags, como chamaremos), orientando o uso
de atributos e marcações. Ex.: W3e, HotDog, Crimson
Editor.
Figura 1.2 - Tela do Crimson Editor
30
Linguagens de Programação I
„„
Editores WYSIWYG - oferecem ambiente de edição
com “um” resultado final das marcações (pois o resultado
final depende do browser usado para visitar a página).
Ex.: FrontPage, Namo Editor, Dreamweaver.
WYSIWYG é o acrônimo da expressão em inglês “What You See
Is What You Get”, que pode ser traduzido para “O que você vê é
o que você recebe”. Trata-se de um método de edição, no qual o
usuário vê o objeto no momento da edição na tela do computador,
já com a aparência do produto final.
Um exemplo clássico de editor WYSIWYG é o Microsoft Word,
no qual o documento é mostrado na tela da mesma forma que
será impresso. O criador do primeiro editor WYSIWYG, o
Bravo, foi Charles Simonyi.
Na linguagem de programação para internet, um dos editores
é o Macromedia Dreamweaver, no qual qualquer pessoa, com
o mínimo de conhecimento em HTML, pode fazer muito
rapidamente uma página ou até um site inteiro para internet.
Figura 1.3 - Tela do Namo Editor
Além dos editores específicos para HTML, editores bastante
utilizados, como o Word, entre outros, permitem a exportação de
seus documentos próprios para o formato HTML.
O documento HTML produzido normalmente terá extensão
.html ou .htm.
Existem muitos editores de HTML gratuitos, como:
„„
Html beauty: http://www.htmlbeauty.com/
Unidade 1
31
Universidade do Sul de Santa Catarina
„„
PageBreeze: http://www.pagebreeze.com/
„„
Web writer: http://www.webwriter.dk/english/index.htm
Introdução à linguagem HTML
A linguagem HTML é fruto do “casamento” dos padrões
HyTime e SGML. Estes padrões são especificados a seguir.
„„
„„
„„
HyTime - Hypermedia/Time-based Document
Structuring Language
HyTime (ISO 10744:1992) – é o padrão para
representação estruturada de hipermídia e informação
baseada em tempo. Um documento é visto como um
conjunto de eventos concorrentes dependentes de tempo
(áudio, vídeo etc.), conectados por webs ou hiperlinks.
O padrão HyTime é independente dos padrões de
processamento de texto em geral. Ele fornece a base
para a construção de sistemas hipertexto padronizados,
consistindo-se de documentos que aplicam os padrões de
maneira particular.
SGML - Standard Generalized Markup Language
SGML é o padrão ISO 8879 de formatação de textos.
Não foi desenvolvido para hipertexto, mas torna-se
conveniente para transformar documentos em hiperobjetos e para descrever as ligações. O SGML não é
aplicado de maneira padronizada. Todos os produtos
SGML têm seu próprio sistema para traduzir as
etiquetas para um particular formatador de texto.
DTD - Document Type Definition - define as
regras de formatação para uma determinada classe de
documentos. Um DTD ou uma referência para um
DTD deve estar contido em qualquer documento
conforme o padrão SGML.
Neste sentido, o HTML é definido segundo um DTD de SGML.
32
Linguagens de Programação I
Todo documento HTML apresenta elementos entre < e >; esses
elementos são as etiquetas (doravante chamadas de tags) de
HTML, que são os comandos de formatação da linguagem, as
quais podem ser escritas em maiúscula ou minúscula. A maioria
das tags tem sua correspondente de fechamento:
<tag>...</tag>
Isso é necessário, porque as tags servem para definir a formatação
de uma porção de texto e, assim, marcamos onde começa e
termina o texto com a formatação especificada por ela.
Alguns elementos são chamados “vazios”, pois não marcam uma
região de texto, apenas inserem algo no documento:
<tag>
Todos os elementos podem ter atributos:
<tag atributo1=valor1 atributo2=valor2>...</tag>
Os valores dos atributos devem estar entre aspas.
<A HREF=”URL”>Texto</A>
Unidade 1
33
Universidade do Sul de Santa Catarina
Síntese
Caro(a) aluno(a), você finalizou a unidade 1. Revisando alguns
conceitos importantes: Internet, World Wide Web, clientes,
servidores, hipertextos, Link ou Hiperlink, navegador, servidores,
provedores de espaço (hostings) e URL.
Você também aprendeu conceitos introdutórios de HTML,
que é um recurso muito simples e acessível para a produção de
documentos. Não podemos deixar de frisar a importância das
tags em HTML. Por isso, segue abaixo uma tabela resumindo a
morfologia das tags:
Tipo
Sintaxe
Exemplo
Tag
<tag>
<BR>
Texto
<tag>texto</tag>
<B>texto</B>
Atributo
<tag NOME_ATRIBUTO=valor>texto</tag>
<A HREF=”url”>texto</A>
Nas próximas unidades, você estudará outros elementos do
HTML, que lhe possibilitarão, com alguma imaginação, fazer
um bom website.
Até lá!
34
Linguagens de Programação I
Atividades de autoavaliação
1. Faça uma pesquisa sobre alguns editores gratuitos de HTML na internet.
Pontue vantagens e desvantagens. Na ferramenta FÓRUM do EVA,
vamos discutir sobre os editores HTML encontrados.
Saiba mais
Para você aprimorar ainda mais seus conhecimentos acerca dos
temas aprendidos nesta unidade, consulte a seguinte referência:
PRATES, Rubens. HTML: guia de consulta rápida. São Paulo:
Editora Novatec, 1997.
E os seguintes sites:
<http://www.abcdohtml.hpg.ig.com.br/> (Introdução ao HTML)
<http://minerva.ufpel.edu.br/~bira/html/web.html> (Web Design)
Unidade 1
35
unidade 2
Introdução à HTML
Objetivos de aprendizagem
„„ Conhecer o que é HTML e a importância de utilizá-la.
„„ Conhecer o que são as tags HTML e como utilizá-las.
„„ Identificar as tags para a estrutura geral de uma página.
„„ Identificar as tags para títulos, cabeçalhos e parágrafos.
Seções de estudo
Seção 1 Criação de páginas da web simples
Seção 2 Estruture sua HTML
Seção 3 Separadores
Seção 4 Alinhamento de texto
2
Universidade do Sul de Santa Catarina
Para início de estudo
Depois de apresentarmos os conceitos iniciais, você deve estar
se perguntando: quando é que vamos começar a criar uma página
web? Afinal, este é um dos objetivos desta disciplina. Então,
nesta unidade, você começa a conhecer a estrutura da HTML – a
linguagem em que são criadas as páginas da web.
Seção 1 - Criação de páginas da web simples
Apesar da aparente sofisticação, as páginas web não passam
de documentos de texto simples. Você pode produzi-las com
qualquer editor de texto, como o bloco de notas do Windows.
A diferença é que as páginas web contêm algumas marcas
especiais para determinar o papel de cada elemento dentro
do texto. Alguns elementos são marcados como títulos, outros
como parágrafos. As marcações são usadas, também, para indicar
os links que levam a outros documentos na rede. Essas marcas
são chamadas de tags e estão especificadas dentro da linguagem
utilizada para criar as páginas web, HTML.
As tags de HTML apenas informam ao navegador o que são
os elementos que estão na página. Eles dizem, por exemplo,
que um determinado trecho é o título principal do documento e
outro é um item de lista. A formatação do trecho é deixada para
o navegador. Cada navegador mostra a página de uma forma um
pouco diferente, o que dificulta o trabalho de programação visual
na web. Para complicar ainda mais, cada usuário pode modificar
a configuração padrão de seu navegador, para que o seu programa
mostre o texto na fonte (tipo de caractere) que quiser.
Em compensação, é muito simples criar uma página básica para
colocar na internet, com HTML. Nesta unidade, você estudará
um exemplo enxuto, que, aos poucos, ficará mais sofisticado.
38
Linguagens de Programação I
Seção 2 - Estruture sua HTML
Nos exemplos a seguir, você irá verificar vários trechos de texto
marcados por códigos colocados entre os caracteres < e >. Esses
códigos, chamados de tags, são responsáveis pela marcação do
texto em função de seu papel dentro do documento. O título
principal de um documento, por exemplo, pode ser marcado
com as tags <b> e </b> (coloca o texto em negrito), enquanto os
parágrafos são separados pela tag <P>. Existem dois tipos de
tags. Algumas são formadas aos pares, indicando o início e o
fim do trecho afetado, como o par <b> e </b>. Outras podem ser
colocadas individualmente, como o <P>, que simplesmente insere
um espaço para dividir parágrafos. Mais adiante, mostraremos
que as tags também podem receber atributos.
Tags básicas
A estrutura básica de um documento HTML apresenta as
seguintes tags:
<HTML>
<HEAD>
<TITLE>Título do Documento</TITLE>
</HEAD>
<BODY>
texto,
imagem,
links,
...
</BODY>
</HTML>
Unidade 2
39
Universidade do Sul de Santa Catarina
Observe que existem quatro pares de tags, que devem ser
sempre colocados na página.
O par de tags <HTML> e </HTML> deve englobar todo
o conteúdo da página (estar presente no início e no fim do
texto) para indicar ao navegador que se trata de um documento
HTML.
O documento, por sua vez, está dividido em duas partes: o
cabeçalho e o corpo do texto, cada um indicado por um par de
tags diferentes.
Tudo que estiver entre o par <HEAD> e </HEAD> irá compor
o cabeçalho, não aparecendo na página.
O elemento principal do cabeçalho é o título do documento, que
deve ser colocado entre o par <TITLE> e </TITLE>.
Os navegadores mostram o título na barra de título do programa
e na área em que aparecem as páginas já visitadas. Por fim, existe
o par <BODY> e </BODY>, que serve para indicar o corpo do
texto, ou seja, a parte mostrada na janela do navegador.
As tags HTML não são sensíveis à caixa. Traduzindo: tanto faz
escrever <HTML>, <Html>, <html>, <HtMl>, ...
Veja, em detalhe, cada uma destas tags estruturais.
<HTML>
A primeira tag de estrutura de toda a página em HTML é a
<html>, a qual indica que o conteúdo do arquivo encontra-se
codificado na linguagem HTML. Para que o computador
reconheça que você está escrevendo um documento em
HTML, todo o seu conteúdo deverá ser delimitado pelas tags
HTML de abertura e fechamento, como no exemplo:
<HTML>
.... a sua página ...
</HTML>
40
Linguagens de Programação I
<HEAD>
A tag <HEAD> e </HEAD> delimita o cabeçalho do
documento. Geralmente há poucas tags na parte <HEAD>
da página. Você nunca deve incluir no cabeçalho parte alguma
do texto de sua página. Além do título da página (< TITLE> ...
</TITLE>), no cabeçalho são inseridas também tags utilizadas
para indexação do documento HTML e para relacionamento com
documentos externos (javascript, CSS, etc...). Eis um exemplo típico
de uso correto da tag <HEAD>:
<HTML>
<HEAD>
<TITLE> ESTE É MEU TÍTULO </TITLE>
</HEAD>
</HTML>
Campo <TITLE>
O elemento <TITLE>, por exemplo, define um título, que é
mostrado no alto da janela do navegador. Todo documento
web deve ter um título; este título é referenciado em buscas pela
rede, dando uma identidade ao documento. Para ver na prática a
importância do título, se você adicionar uma página com título
aos seus Favoritos (Bookmarks), o título da página se torna a
âncora de atalho para ela. Por isso é sugerido que os títulos dos
documentos sejam sugestivos, evitando-se títulos genéricos como
“Introdução”. O título também é bastante significativo para a
listagem de uma página nos resultados de pesquisas nos catálogos
da internet.
As tags <TITLE> são sempre incluídas no cabeçalho da página,
entre as tags <HEAD> e </HEAD>, e descrevem o conteúdo
da mesma como no exemplo anterior. Você pode ter apenas um
título na página, e o título pode conter somente texto simples,
ou seja, não pode haver outras tags no título. Escolha um título
curto, mas que descreva o conteúdo da página.
Unidade 2
41
Universidade do Sul de Santa Catarina
Campo <META>
Além do título, <HEAD> contém outras informações de
importância para os “robôs” de pesquisa, indicadas nos campos
<META>.
Os campos <META> têm dois atributos principais:
„„
NAME ,
indicando um nome para a informação;
„„
HTTP-EQUIV,
que faz uma correspondência com campos
de cabeçalho do protocolo HTTP; a informação deste
campo pode ser lida pelos navegadores e provocar
algumas ações.
Os atributos são partes extras das tags da HTML que
contêm opções ou outras informações sobre a tag em si.
A Sintaxe refere-se às regras para
a construção de um comando ou
instrução.
Acompanhe a sintaxe seguinte, como modelo de uso dos
atributos <META> (NAME e HTTP-EQUIV):
<HEAD>
<TITLE>Título do Documento</TITLE>
<META NAME=”nome” CONTENT=”valor”>
<META HTTP-EQUIV=”nome” CONTENT=”valor”>
</HEAD>
42
Linguagens de Programação I
Um documento, por exemplo, pode ter as seguintes informações:
<HEAD>
<META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=iso-8859-1”>
<TITLE>Título da Janela</TITLE>
<META NAME= “Author” CONTENT=“Patrícia”>
<META NAME=”Description” CONTENT=”Livro de Linguagem de Programação I”>
<META NAME=”KeyWords” CONTENT=”HTML, WWW, Web, Internet”>
<LINK REL=”stylesheet” HREF=”folhasestilos.css”>
</HEAD>
Alguns valores dos atributos META NAME são inseridos
automaticamente por alguns editores, por exemplo: Author. Os
campos Description e KeyWords ajudam a classificação da página
em algumas ferramentas de busca. Essas informações não têm
qualquer efeito na apresentação da página, mas servem como uma
explicação ou documentação sobre as informações contidas nela.
Há poucos valores para META HTTP-EQUIV em uso. O
mais comum é content-type, que indica o conjunto de caracteres
usados na página. Essa informação ajuda o navegador a exibir
corretamente os caracteres especiais que estiverem presentes no
texto. Um exemplo de uso comum do atributo HTTP-EQUIV
é promover a mudança automática de páginas, atribuindo-lhe o
valor Refresh. Veja este exemplo:
<HEAD>
<TITLE> ... </TITLE>
<META HTTP-EQUIV=”Refresh” CONTENT=”segundos; URL= pagina.html”>
</HEAD>
Unidade 2
43
Universidade do Sul de Santa Catarina
Onde diz:
„„
pagina.html : é a página a ser carregada
automaticamente;
„„
segundos : é o número de segundos passados até que a
página indicada seja carregada.
Como comentado no exemplo, o efeito é interessante, mas para
que serve? Se não pensarmos em uma finalidade útil para esse
efeito, caímos na tentação de usá-lo “à toa”. A aplicação mais
utilizada é a atualização automática de um documento que, por
exemplo, tenha uma foto produzida por uma câmara de vídeo.
Você pode forçar, com o Refresh (atualizador), a atualização dessa
página, mostrando para o usuário sempre uma imagem mais
atual de algum evento focalizado pela câmara. Outra utilização
é em chats, ou em páginas que desviem a navegação através de
documentos desenvolvidos para navegadores avançados.
Uso de META tags!
O uso de META tags não é obrigatório. Até poucos
anos atrás, elas eram consideradas essenciais para
uma página ter bom posicionamento nos resultados
das pesquisas em catálogos da web.
Com o tempo, no entanto, os responsáveis pelos
catálogos viram que os autores de páginas abusavam
das tags META, colocando palavras-chave em demasia
para enganar os critérios de catalogação.
Atualmente, nenhum dos catálogos mais
conceituados considera as palavras-chave contidas em
META tags.
Ainda no exemplo anterior, se você observar atentamente, além
das tags TITLE e META, a última tag utilizada no cabeçalho
foi LINK. Esta tag tem a função de fazer um relacionamento
com algum documento externo.
<LINK REL= “stylesheet” HREF=“folhaestilo.css”>
44
Linguagens de Programação I
O atributo REL é a identificação do tipo de formato do
documento. O valor “stylesheet” indica que se trata de folhas de
estilo. Poderiam ser outro valores, como por exemplo “script”,
que indicaria arquivo de funções java script.
HREF é o caminho físico do arquivo. Neste caso, existe um
arquivo chamado folhaestilo.css no próprio diretório do HTML.
<BODY>
É o corpo do documento. Tudo que estiver contido em <BODY>
será mostrado na janela principal do seu navegador. <BODY>
pode conter cabeçalhos, parágrafos, listas, tabelas, links para
outros documentos, imagens, formulários, animações, vídeos,
sons e scripts embutidos.
Estas duas tags, <BODY> </BODY>, delimitam todo o conteúdo
do site. É aí que aparecerão os textos, as imagens, o fundo de tela,
entre outras coisas.
Dentro da tag <BODY> você conseguirá especificar os
seguintes atributos:
„„
BACKGROUND (configura a imagem que você deseja
como fundo de tela) - indica a URL da imagem a ser
replicada no fundo da página, como uma marca d`água.
Para efeitos de design, é possível fixar a imagem de
fundo, de modo que ela não se mova junto com o texto,
ao se rolar a página.
Exemplo: <body background=”imagem.gif”>
Neste exemplo, o arquivo de imagem deve estar no
mesmo diretório do arquivo HTML.
„„
BGCOLOR (cor de fundo) - a cor de fundo da tela.
Quando não é indicada, o navegador irá mostrar uma cor
padrão, geralmente o cinza ou branco; alguns editores
poderão estabelecer o branco para o fundo da página.
Exemplo: <body bgcolor=”cor”>
Unidade 2
45
Universidade do Sul de Santa Catarina
O atributo “cor” pode ser utilizado em todas as tags,
tanto pode ser o nome de uma cor (RED, BLUE,
BLACK, etc...) ou a codificação da cor em representação
hexadecimal (#FF00FF, #C42A1F, etc...).
„„
TEXT (cor do texto padrão) - a cor padrão de todo
o texto da página. Cor dos textos da página (padrão:
preto).
Exemplo: <body text=”cor”>
„„
LINK (cor dos links) - determina a cor de todos os links
da página. Cor dos links (padrão: azul).
Exemplo: <body link=”cor”>
„„
VLINK (cor dos links visitados) - determina a cor de
todos os links já visitados na página. Cor dos links, depois
de visitados (padrão: azul escuro ou roxo).
Exemplo: <body vlink=”cor”>
„„
ALINK (cor dos links ativos) - determina a cor dos
links ativos. Cor dos links, quando acionados (padrão:
vermelho).
Exemplo: <body alink=”cor”>
Acompanhe a sintaxe seguinte, como modelo de uso dos
atributos específicos do <BODY>:
<BODY BACKGROUND=”imagem.gif” BGCOLOR=”cor” TEXT=”cor” LINK=”cor”
ALINK=”cor” VLINK=”cor”>
conteúdo
</BODY>
O exemplo seguinte determina que a cor de fundo do site seja
amarela, o texto seja preto, os links ainda não visitados sejam
46
Linguagens de Programação I
azuis, os links já visitados sejam roxos, e os links ativos sejam
verdes:
<BODY BGCOLOR=”yellow” TEXT=”black” LINK=”blue” VLINK=”purple”
ALINK=”green”>
conteúdo
</BODY>
Os valores das cores podem ser dados também em hexadecimal,
equivalentes a cores no padrão RGB (Red, Green, Blue). Existem
tabelas de cores com esses valores, mas grande parte dos
editores já oferece uma interface bem amigável, através da qual
escolhemos as cores desejadas.
Você Sabia?
O sistema hexadecimal é um sistema de numeração vinculado
à informática, já que os computadores interpretam as linguagens
de programação em bytes, que são compostos de oito dígitos. À
medida que os computadores e os programas aumentam a sua
capacidade de processamento, eles funcionam com múltiplos de
oito, como 16 ou 32. Por este motivo, o sistema hexadecimal, de
16 dígitos, é um standard na informática.
Como o nosso sistema de numeração só dispõe de dez dígitos,
devemos incluir seis letras para completar o sistema. Estas letras
e o seu valor em decimal são: A = 10, B = 11, C = 12, D = 13, E = 14
e F = 15.
A utilização do sistema hexadecimal nos computadores deve-se
a que um dígito hexadecimal representa quatro dígitos binários
(4 bits), portanto dois dígitos hexadecimais representam oito
dígitos binários (8 bits = 1 byte) que, como é sabido, é a unidade
básica de armazenamento de informação.
Fonte: http://pt.wikipedia.org/wiki/Hexadecimal.
Unidade 2
47
Universidade do Sul de Santa Catarina
Navegadores que seguem a definição de HTML 3.2 em
diante, também aceitam 16 nomes de cores, tirados da
paleta VGA do Windows - por exemplo, podemos escrever
BGCOLOR=”BLUE”. Porém os navegadores mais antigos não
apresentam as cores indicadas.
Criando uma página HTML
A melhor maneira de você aprender a escrever páginas de web
é fazendo. Vamos ao primeiro exemplo: Abra o bloco de notas
e digite o código a seguir. Por ora, não é necessário que você
entenda todas as tags que ele apresenta e o que significam. Você
aprenderá tudo sobre elas mais adiante. Este é só um exemplo
simples para você começar.
<HTML>
<HEAD>
<TITLE>Primeiro exemplo</TITLE>
</HEAD>
<BODY>
<b>Título principal</b> <p>
Este é o texto do primeiro exemplo.<p>
Este é o segundo parágrafo. <p>
<b>Título secundário</b> <br>
Acabei de abrir uma linha. Vamos agora adicionar uma lista.<p>
<b>Uma lista</b>
<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>
</BODY>
</HTML>
48
Linguagens de Programação I
Após criar seu arquivo HTML, grave-o em alguma pasta com
seus trabalhos. Lembre-se de gravar estes arquivos, escolhendo a
opção Salvar Como. Existem duas regras que você deverá seguir
ao escolher um nome para o arquivo:
„„
„„
o nome do arquivo deverá ter uma extensão .html (ou
.htm). Por exemplo, meuarquivo.html ou principal.htm.
A maioria dos softwares exigirá que os seus arquivos
tenham esta extensão. Por isso, crie desde já o hábito de
utilizá-la;
use nomes simples e curtos. Não inclua espaços ou
caracteres especiais (marcadores, letras acentuadas, etc.).
Use apenas letras e números.
Aqui vai uma dica, se você for utilizar o bloco de notas do
Windows para editar o exemplo: no momento de gravar o arquivo,
coloque o nome e extensão entre aspas duplas, por exemplo:
“meuarquivo.html”. Este processo evitará que o arquivo seja
gravado com a extensão txt (meuarquivo.html.txt), confusão
ocasionada conforme a configuração do sistema operacional.
Visualizando o exemplo no navegador
Agora que você tem um arquivo em HTML, inicialize o seu
navegador da web. Você não precisa estar conectado com a rede,
uma vez que não vai abrir páginas armazenadas em outros sites.
No seu navegador, procure um comando no menu ou botão para
abrir um arquivo. Esse comando permitirá que você navegue pelo
seu disco local, solicitando ao navegador que leia um arquivo em
HTML do seu disco; analise-o e apresente-o, como se fosse uma
página já existente na web. Ao usar o seu navegador, você pode
criar e testar os seus arquivos HTML no seu computador.
Uma outra forma de abrir o arquivo é dar dois cliques sobre ele.
Abrirá o navegador que estiver configurado como navegador
padrão.
Se o que for apresentado na tela não se parecer com o que
está ilustrado na figura 2.1, a seguir, então volte ao bloco de
notas, abra o seu arquivo criado e compare-o com o exemplo
apresentado acima. Verifique se todas as tags têm tags de
Unidade 2
49
Universidade do Sul de Santa Catarina
fechamento e se todas as tags estão descritas corretamente.
Assim, basta corrigir o arquivo e gravá-lo novamente com o
mesmo nome. Para isso, você não precisa sair do navegador.
Figura 2.1 – Visualizando o primeiro exemplo no navegador
Em seguida, retorne ao navegador. Deve haver um item, no
menu ou botão, denominado Atualizar (recarregar). O navegador
lerá a nova versão do seu arquivo e, então, você poderá editar
e visualizar o documento sucessivamente, até que tudo esteja
correto.
Mas não se esqueça de verificar também a extensão de seu
arquivo, caso o seu navegador apresente o texto HTML real. A
extensão é importante.
Vamos exercitar? Que tal, agora, você usar o mesmo exemplo
anteriormente criado e atribuir à tag <BODY> alguns atributos,
como por exemplo, a cor de fundo e a cor do texto? Vamos
tentar?
50
Linguagens de Programação I
Para escrever documentos HTML não é necessário
mais do que um editor de texto simples e
conhecimentos dos códigos que compõem a
linguagem. Os códigos, conhecidos como tags, servem
para indicar a função de cada elemento da página na
rede.
Quando uma página em HTML é analisada por um navegador,
toda a formatação feita manualmente – espaços, tabulações,
quebras de parágrafos, etc. – é ignorada. O único elemento capaz
de formatar uma página em HTML são as tags de HTML.
Se você passar horas editando cuidadosamente um arquivo de
texto simples para ter parágrafos e colunas de números bem
formatados, mas se esquecer de incluir as tags, quando for ler a
página em um navegador HTML, todo o texto fluirá em um
único parágrafo. E todo o seu trabalho terá sido em vão. A
vantagem de todos os espaços em branco serem ignorados está no
fato de você poder incluir as suas tags onde desejar.
Há uma única exceção a essa regra: uma tag
denominada <PRE>. Você aprenderá sobre ela mais
adiante.
Cabeçalho
Os cabeçalhos são usados para dividir seções do texto. A HTML
define 6 níveis de cabeçalho. As tags de cabeçalho têm o seguinte
formato:
<H1> texto do cabeçalho de nível 1 </H1>
Os números indicam os níveis de cabeçalho (de H1 a H6).
Quando apresentados na tela, eles aparecem em letras maiores,
em negrito, centralizados, sublinhados ou em letras maiúsculas,
de alguma forma que os destaque do restante do texto. O <H1>
Unidade 2
51
Universidade do Sul de Santa Catarina
deixa a letra maior que o <H2> e assim por diante. Veja o
seguinte exemplo:
<H1>Este é um cabeçalho de nível 1</H1>
<H2>Este é um cabeçalho de nível 2</H2>
<H3>Este é um cabeçalho de nível 3</H3>
<H4>Este é um cabeçalho de nível 4</H4>
<H5>Este é um cabeçalho de nível 5</H5>
<H6>Este é um cabeçalho de nível 6</H6>
Lembre-se de que todas as tags acima devem estar dentro da
BODY.
Esses cabeçalhos são mostrados da seguinte forma:
Figura 2.2 – Visualizando exemplo de cabeçalho.
Aninhamento é colocar documentos
dentro de outro documento. Em
HTML, aninhar é colocar tags uma
dentro das outras.
52
Aninhamento de cabeçalhos
Os cabeçalhos não podem ser aninhados, isto é, a formatação
pode produzir algum resultado próximo ao desejado, como no
exemplo a seguir. Vamos testar?
Linguagens de Programação I
<H2>Este é <H1>um cabeçalho de nível 1</H1><H2> dentro
de um cabeçalho de nível 2</H2>
Figura 2.3 – Visualizando exemplo de não aninhamento de tag.
Porém o mais comum é que os navegadores “entendam” a
formatação anterior como:
<H2>Este é</H2> <H1>um cabeçalho de nível 1</H1><H2>
dentro de um cabeçalho de nível 2</H2>
Ou seja, os navegadores interpretam a formatação anterior como
se estivesse faltando uma etiqueta de fechamento de <H2> antes
de <H1> e faltando uma abertura de <H2> depois do fechamento
de <H1>, e oferecem o seguinte resultado:
Figura 2.4 – Visualizando exemplo de aninhamento de tag.
Unidade 2
53
Universidade do Sul de Santa Catarina
Os editores WYSIWYG ‘naturalmente’ não permitem o
aninhamento de cabeçalhos.
Alinhamento dos cabeçalhos
Os cabeçalhos têm atributos de alinhamento:
<H2 ALIGN=”CENTER”>Cabeçalho centralizado</H2>
<H3 ALIGN=”RIGHT”>Cabeçalho alinhado à direita</H3>
<H4 ALIGN=”LEFT”>Cabeçalho alinhado à esquerda (default)</H4>
Verifique o resultado no seu navegador.
Seção 3 - Separadores
Como você viu no primeiro exemplo, as quebras de linha do
texto fonte não são significativas na apresentação de documentos
em HTML. Para organizar os textos, você precisa, então, de
separadores tais como os apresentados aqui.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>.
Isso só é necessário, quando queremos uma quebra de linha em
determinado ponto, pois os navegadores já quebram as linhas
automaticamente, para apresentar os textos.
Quando um navegador da web encontra uma tag <BR>, ele
reinicia o texto na margem esquerda da linha seguinte a essa tag.
Você pode usar a tag <BR> dentro de outros elementos, como por
exemplo, parágrafos ou itens de uma lista. Essa tag não possui
espaço extra acima ou abaixo da nova linha, nem altera a fonte ou
o estilo atual. Ela apenas reinicia o texto na linha seguinte.
Com sucessivos <BR>, podemos inserir diversas linhas em
branco nos documentos. Este elemento tem um atributo especial
(CLEAR), que é utilizado com imagens que têm texto ao redor,
conforme será apresentado na unidade 5.
54
Linguagens de Programação I
Parágrafos
Os parágrafos são digitados normalmente. A tag <P> serve para indicar
o início de um novo parágrafo. As tags <P> e </P> delimitam um
parágrafo no texto. É possível, neste caso, não fechar a tag <P>, ou seja,
omitir o </P>, sem prejudicar o resultado final.
Ao contrário da quebra de linha, com o uso do <P> é deixada uma
linha em branco antes do próximo parágrafo. Quebra de linha não
deixa uma linha em branco.
O atributo que deve ser utilizado com a tag <P> é o ALIGN,
podendo ter os seguintes valores que delimitam o alinhamento do
parágrafo:
„„
LEFT - se você quiser que o texto fique alinhado à esquerda.
Exemplo: <P ALIGN=“left”>
„„
RIGHT - se você quiser que o texto fique alinhado à direita.
Exemplo: <P ALIGN =“right”>
„„
CENTER - se você quiser que o texto fique alinhado ao
centro.
Exemplo: <P ALIGN =“center”>
Neste último caso, a tag <P> ganhou uma opção
(ALIGN=CENTER). Por isso é preciso utilizar uma tag de
fechamento (</P>) para indicar que apenas aquele parágrafo receberá
um alinhamento diferente.
Observe o exemplo 1, que aborda como inserir uma linha em branco
entre parágrafos:
Parágrafo 1;<P>Parágrafo 2.
Unidade 2
55
Universidade do Sul de Santa Catarina
Verifique se o resultado no seu navegador ficou próximo deste:
Figura 2.5 – Exemplo de uso de parágrafo.
Acompanhe o exemplo 2, que combina a inserção de linha entre
parágrafos e quebras de linha:
Parágrafo 1;<br> linha 1 do parágrafo 1, <br>
linha 2 do parágrafo 1.<P>Parágrafo 2;<br>
linha 1 do parágrafo 2, <br>
linha 2 do parágrafo 2.
O resultado da marcação acima no navegador é:
Figura 2.6 – Exemplo de parágrafo e quebra de linha.
56
Linguagens de Programação I
Veja o exemplo 3 sobre o alinhamento de parágrafos, além de
inserção de linhas entre parágrafos e quebra de linha:
<P ALIGN=”CENTER”>Assim como os trens, as boas ideias às vezes
chegam com atraso. <BR>(Giovani Guareschi)</P>
<P ALIGN=”RIGHT”>Como diz o provérbio chinês: “É melhor
passar por ignorante uma vez do que permanecer ignorante para
sempre”.</P>
<P ALIGN=”LEFT”>Este é o alinhamento padrão (default), e por isso
não vou colocar nenhuma frase especial.</P>
Verifique o seguinte resultado no navegador:
Figura 2.7 – Exemplo de alinhamento de parágrafo.
Linha horizontal
A tag <HR> é utilizada para colocar linhas horizontais em
uma página. Essa linha tem diversos atributos, oferecendo
resultados diversos. As linhas (ou fios) são excelentes para separar
visualmente seções da página da web antes dos cabeçalhos ou
para separar o texto de uma lista de itens. Você pode determinar
a altura, a largura e o alinhamento da linha.
Unidade 2
57
Universidade do Sul de Santa Catarina
Observe o exemplo 1:
<HR SIZE=”8” ALIGN=”center” WIDTH=”75”%>
Onde:
Size: configura a espessura da linha, no exemplo insere uma
linha de largura de 8 pixels.
Width: configura a largura da linha (pode ser em porcentagem
ou em pixels). No exemplo, insere uma linha que ocupa 75% do
espaço horizontal disponível.
Align: determina o posicionamento da linha.
Noshade: indica sem efeito tridimensional.
Figura 2.8 – Visualizando uma linha horizontal centralizada no navegador.
Considere o exemplo 2:
<HR WIDTH=”30”% ALIGN=”RIGHT” NOSHADE>
Com estes comandos, você insere uma linha de comprimento
30% (do espaço horizontal disponível), alinhada à direita, sem
efeito tridimensional. Verifique o resultado no seu navegador.
58
Linguagens de Programação I
Figura 2.9 – Exemplo de linha horizontal.
Também veja o exemplo 3:
<HR SIZE=”70” WIDTH=”7” ALIGN=”LEFT”>
A utilização de aspas duplas nos valores dos atributos é opcional,
porém é considerada uma boa prática.
Neste caso, você insere uma linha de altura 70 (pixels),
comprimento 7 (pixels), alinhada à esquerda (o Netscape,
aparentemente, não aceita esta formatação de <HR>). Verifique o
resultado no seu navegador. Terá o aspecto abaixo? Se afirmativo,
então está correto.
Figura 2.10 – Exemplo de linha horizontal.
Unidade 2
59
Universidade do Sul de Santa Catarina
Seção 4 - Alinhamento de texto
Nesta seção, você aprenderá como alinhar um bloco de texto
em sua página da web. Você estudará diversas tags para esta
finalidade (centralizar um texto, formatar um bloco de texto). Ao
fim, saberá qual a melhor alternativa para tornar sua página da
web melhor.
Alinhamento de bloco de texto
As tags <DIV ALIGN=”…”> e </DIV> marcam uma divisão
lógica de um documento, formatação bastante usada atualmente,
e configuram o alinhamento de um bloco todo de texto. O
alinhamento pode ser à esquerda (left), à direita (right) e ao centro
(center).
A tag <DIV> é utilizada para delimitar um bloco de
tags HTML de qualquer tipo e atinge todas as tags e o
texto contido entre as de abertura e fechamento.
Existem vantagens da utilização da tag <DIV> em vez do
atributo ALIGN:
„„
„„
Essa tag precisa ser usada apenas uma vez, ao contrário
do atributo ALIGN, que tem de ser incluído em diversas
tags.
A tag <DIV> pode ser usada para alinhar qualquer
elemento (cabeçalho, parágrafos, citações, etc.). O
atributo ALIGN encontra-se disponível apenas em um
número limitado de tags.
Veja o seguinte exemplo:
60
Linguagens de Programação I
<DIV ALIGN=”LEFT”>
<H1>Exemplo de texto à esquerda</H1>
<p>Testando à esquerda</p>
</DIV>
Verifique o seguinte resultado no navegador:
Figura 2.11 –Exemplo de alinhamento de bloco de texto à esquerda.
Centralização de texto
As tags <CENTER> e </CENTER> centralizam os elementos textos, imagens, tabelas - que estiverem dentro de sua marcação.
A tag <CENTER> funciona de maneira idêntica à <DIV
ALIGN=”CENTER”>, centralizando todo o conteúdo HTML
contido entre as tags de abertura e de fechamento.
Acompanhe o seguinte exemplo:
<CENTER>
<H1>Exemplo de texto centralizado</H1>
<p>Testando.</p>
</CENTER>
Verifique o resultado no seu navegador:
Unidade 2
61
Universidade do Sul de Santa Catarina
Figura 2.12 - Exemplo de alinhamento de bloco de texto centralizado.
Margem
Outro controle sobre o alinhamento dos elementos da página
pode ser conseguido através de mudança, de configuração, de
margem. O texto sempre começa a uma determinada distância
da janela do navegador (um pouco diferente em cada navegador).
Às vezes, será necessário aumentar essa margem e fazer com
que o texto comece mais para dentro da página. O par de tags
<BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar
a margem. O efeito dessa tag pode ser acumulado para conseguir
margens maiores.
Veja os exemplos:
<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem
ainda</BLOCKQUOTE></BLOCKQUOTE>
62
Linguagens de Programação I
O resultado no seu navegador parece-se com este da figura abaixo?
Figura 2.13 – Exemplo de configuração de margem.
A tag <BLOCKQUOTE> é utilizada, principalmente, na criação
de citações. Geralmente, as citações são destacadas em relação ao
restante do texto através do recuo.
Se você não deseja aumentar a margem do texto, não
utilize a tag <BLOCKQUOTE>. Por padrão, os códigos
HTML não têm margem definida.
Texto pré-formatado
Existe ainda outra forma de modificar o alinhamento. É a
utilização do par de tags <PRE> e </PRE>. Usando essas tags,
todos os espaços e entradas de parágrafo (o resultado da tecla
ENTER) são respeitados. Em um texto normal, qualquer
espaço a mais entre duas palavras é ignorado pelo navegador.
Com a pré-formatação, pode-se controlar o espaçamento com
a barra de espaço e colocar o texto em, praticamente, qualquer
lugar da página.
Apesar da vantagem desta forma de alinhamento arbitrário, a tag
<PRE> muda o tipo de caractere para uma fonte monoespaçada.
Uma fonte monoespaçada
é aquela na qual todos
os caracteres ocupam o
mesmo espaço horizontal,
ao contrário da fonte
proporcional, na qual o “i”
ocupa menos espaço do
que o “a”, por exemplo.
Uma vez que <PRE> mantém o texto original, não se deve forçar
espaços com essa marcação dentro de outra marcação que já
apresente tabulações e espaços específicos.
Unidade 2
63
Universidade do Sul de Santa Catarina
Acompanhe este exemplo:
<PRE>
Este texto está pré-formatado. A fonte é monoespaçada e
as entradas de parágrafo, assim como os espaços adicionais,
são respeitadas.
Neste caso, a margem esquerda foi aumentada em cinco
caracteres.</PRE>
O texto normal recebe fonte proporcional e ignora a
presença de espaços a mais no meio do texto. Entradas de
parágrafos adicionais também são ignoradas.
Vamos ver o resultado no navegador?
Figura 2.14 – Exemplo de fonte monoespaçada.
64
Linguagens de Programação I
Síntese
Como você aprendeu, a HTML é uma linguagem de marcação
de texto usada para descrever documentos de hipertexto na
WWW, que descreve uma página e o seu conteúdo, não a sua
aparência.
Nesta unidade, você também aprendeu a estrutura básica de um
documento HTML, como criar e visualizar arquivos em HTML
simples. Aprendeu ainda a usar as tags de HTML apresentadas
na tabela abaixo.
TAG
USO
<HTML>...</HTML>
Toda a página em HTML
<HEAD>...</HEAD>
O cabeçalho, o prólogo da página em HTML
<BODY>...</BODY>
Todo o restante do conteúdo da página em HTML
<TITLE>...</TITLE>
O título da página
<H1>...</H1>
Título de nível 1
<H2>...</H2>
Título de nível 2
<H3>...</H3>
Título de nível 3
<H4>...</H4>
Título de nível 4
<H5>...</H5>
Título de nível 5
<H6>...</H6>
Título de nível 6
<BR>
Nova linha
<P>
Parágrafo
<CENTER>...</CENTER>
Alinhar o texto ao centro
<PRE>
Pré-formatação
<BLOCKQUOTE>...</
BLOCKQUOTE>
Margem
<HR>
Linha Horizontal
<DIV>...</DIV>
Alinhamento de bloco de texto
Unidade 2
65
Universidade do Sul de Santa Catarina
Atividades de autoavaliação
Caro(a) aluno(a), leia cada enunciado com atenção e responda as questões
que seguem.
1. Em muitas páginas da web, as tags de estrutura de página (<HTML>,
<HEAD>, <BODY>) não são usadas. Devo incluí-las, mesmo que as
páginas funcionem bem sem elas? Por quê?
2. Agora que você sabe o que é HTML, conhece algumas tags, possui
os conhecimentos suficientes para criar páginas simples em HTML e
até navegou por arquivos em HTML (através dos exemplos), crie uma
página inicial em HTML com o nome de index.html, utilizando tags e
atributos estudados nesta unidade.
66
Linguagens de Programação I
Saiba mais
Aprofunde os conteúdos estudados nesta unidade ao consultar as
seguintes referências:
MARCONDES, Christian Alfim. HTML 4.0 fundamental: a
base da programação para web. São Paulo: Editora Érica, 2005.
Também consulte o seguinte site para aprofundar seus estudos:
<http://www.icmc.usp.br/ensino/material/html/edicao.html> (Instituto de Ciências
Matemáticas e de Computação)
Unidade 2
67
unidade 3
Listas e Vínculos
Objetivos de aprendizagem
„„ Conhecer e criar as tags para listas.
„„ Realizar comentários através do código HTML.
„„ Fazer os vínculos realizados em HTML.
Seções de estudo
Seção 1 Listas
Seção 2 Comentários
Seção 3 ‘Tudo’ sobre vínculos
3
Universidade do Sul de Santa Catarina
Para início de estudo
Além dos cabeçalhos e parágrafos, é provável que o elemento
HTML mais comum que você usará seja a lista. Depois de
estudar esta unidade, você saberá criar uma lista em HTML e,
mais que isso, saberá criar cinco tipos de listas, um tipo para cada
ocasião.
A HTML define estes cinco tipos de listas:
„„
Listas numeradas ou ordenadas;
„„
Listas com marcadores ou não ordenadas;
„„
Listas de definição ou de glossário;
„„
Listas de menu e Listas de diretório.
Você também aprenderá a realizar um comentário e como
estabelecer os vínculos em HTML.
Vamos começar!
Seção 1 - Listas
Nesta seção, você estuda agora os cinco tipos de listas em
HTML.
Todas as tags de lista possuem em comum estes elementos:
„„
„„
70
a lista inteira é delimitada pelas tags de abertura e
fechamento referentes ao tipo da lista;
cada item da lista tem sua própria tag.
Linguagens de Programação I
Listas Numeradas ou Ordenadas
As listas numeradas são delimitadas pelas tags <OL>...</OL> e
cada item começa com a tag <LI>, onde:
„„
OL = Ordered List (lista ordenada)
„„
LI = List Item (item de lista)
A tag <LI> é unilateral, você não precisa especificar a tag
de fechamento. A existência da próxima <LI> ou da tag de
fechamento </OL> indica o final desse item na lista.
Quando o navegador interpreta uma lista ordenada, ele numera
(e em geral recua) cada um dos elementos de forma sequencial.
Você não precisa numerá-los.
Acompanhe este exemplo:
Listas ordenadas são
aquelas em que cada item
tem um número.
<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande quanto se queira,
sem que seja necessário se preocupar com a formatação das margens de texto
<LI>item de lista numerada
</OL>
Visualize o resultado em seu navegador:
Figura 3.1 – Exemplo no navegador de uma lista ordenada.
Unidade 3
71
Universidade do Sul de Santa Catarina
Utilize listas numeradas somente quando quiser
indicar que os elementos estão ordenados, ou seja,
nos casos em que os itens deverão ser apresentados
nessa ordem específica.
As listas numeradas têm vários atributos que você pode utilizar
para personalizar sua apresentação no navegador. Esses atributos
permitem controlar várias características das listas, incluindo o
esquema de numeração a ser usado, e a partir de que número se
vai iniciar a contagem (se você não quiser iniciar em 1).
Você pode personalizar listas ordenadas de duas maneiras:
„„
„„
como elas são numeradas; e
em que número a lista começa.
A HTML fornece o atributo TYPE, que pode assumir cinco valores para definir
o tipo de numeração a ser usado na lista:
„„
„„
„„
„„
„„
“1” - especifica que os algarismos arábicos padrões devem
ser usados para numerar a lista (isto é: 1, 2, 3, 4, etc.);
“a” - especifica que as letras minúsculas devem ser usadas
para numerar a lista (isto é: a, b, c, d, etc.);
“A” - especifica que as letras maiúsculas devem ser usadas
para numerar a lista (isto é: A, B, C, D, etc.);
“i” - especifica que os algarismos romanos minúsculos devem
ser usados para numerar a lista (isto é: i, ii, iii, iv, etc.);
“I” - especifica que os algarismos romanos maiúsculos
devem ser usados para numerar a lista (isto é: I, II, III,
IV, etc.).
Os tipos de numeração podem ser especificados na tag <OL>,
como no exemplo a seguir, que utiliza o padrão TYPE=“a”.
72
Linguagens de Programação I
<OL TYPE=”a”>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande quanto se queira,
sem que seja necessário preocupar-se com a formatação das margens de texto
<LI>item de lista numerada
</OL>
Visualize o seguinte resultado no navegador:
Figura 3.2 – Exemplo de lista ordenada personalizada.
Os navegadores da web geralmente ignoram os
atributos que não entendem. Por exemplo, se um
navegador não suportar o atributo TYPE da tag OL, ele
simplesmente vai ignorá-lo quando o encontrar.
O atributo TYPE também pode ser aplicado na tag
<LI>, mudando efetivamente o tipo de numeração no
meio da lista. Quando o atributo TYPE é usado na tag
<LI>, ele afeta o item em questão e todas as entradas
que venham a seguir na lista.
Usando o atributo START, você pode especificar o número ou letra que inicia
sua lista. O ponto inicial padrão é 1, é claro. Usando START,
você pode mudar esse número. Por exemplo, <OL START=4>
iniciaria a lista no número 4, enquanto <OL TYPE=“a”
START=3> iniciaria a numeração com ‘c’ e percorreria o alfabeto
a partir daí.
Unidade 3
73
Universidade do Sul de Santa Catarina
Veja o exemplo a seguir:
<OL TYPE=”a” START=”3”>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande quanto
se queira, sem que seja necessário se preocupar com a formatação das
margens de texto
<LI>item de lista numerada
</OL>
O navegador apresenta o seguinte resultado:
Figura 3.3 – Exemplo no navegador de uma lista ordenada personalizada.
Assim como no atributo TYPE, você pode mudar o valor do número
de uma entrada em qualquer ponto da lista. Isto é feito usando-se o
atributo VALUE na tag <LI>. A atribuição de um VALUE em
uma tag <LI> reinicia a numeração na lista a partir da entrada
afetada, como no exemplo a seguir:
<OL>
<LI>item 1
<LI>item 2
<LI>item 3
<LI VALUE=”55”>item 55
<LI>item 56
</OL>
74
Linguagens de Programação I
Veja o resultado em seu navegador:
Figura 3.4 – Exemplo no navegador de uma lista ordenada personalizada.
Listas com Marcadores Não ordenados ou Não numerados
Listas não ordenadas são aquelas em que os elementos podem
ser apresentados em qualquer ordem. Estas listas se assemelham
às listas ordenadas na HTML. A diferença é que cada lista
é indicada através das tags <UL>...</UL>, em vez de <OL>.
Os elementos da lista são separados por <LI>, como nas listas
ordenadas. Confira o exemplo:
<UL>
<LI>item 1
<LI>item 2
<LI>item 3
<LI>item 4
<LI>item 5
</UL>
E visualize-o no navegador:
Figura 3.5 – Exemplo no navegador de uma lista com marcadores.
Unidade 3
75
Universidade do Sul de Santa Catarina
Listas não ordenadas são aquelas em que os itens são
marcadores ou outros símbolos.
Assim como as listas ordenadas, as listas não ordenadas podem
ser personalizadas. De acordo com a especificação HTML, o
atributo TYPE pode receber três valores possíveis, quando
apresentados no Netscape Navigator:
„„
„„
„„
disc - configura um disco ou marcador (este é o padrão),
na maioria das vezes representa um círculo preenchido;
square - configura um quadrado;
circle - este marcador gera um círculo não preenchido em
navegadores compatíveis.
Confira o exemplo:
<UL TYPE=”disc”>
<LI>Fita
<LI>CD
<LI>DVD
</UL>
<UL TYPE=”square”>
<LI>Fita
<LI>CD
<LI>DVD
</UL>
<UL TYPE=”circle”>
<LI>Fita
<LI>CD
<LI>DVD
</UL>
76
Linguagens de Programação I
Este exemplo é assim visualizado:
Figura 3.6 – Exemplo no navegador de uma lista personalizada com marcadores.
Cada item de uma lista com marcadores não ordenados também
pode ter seu atributo específico, através do TYPE na tag <LI>:
<UL>
<LI TYPE=”disc”>um item
<LI TYPE=”circle”>mais um item
<LI TYPE=”square”>último item
</UL>
Veja o resultado no seu navegador:
Figura 3.7 – Exemplo no navegador de uma lista personalizada com marcadores.
As listas com marcadores em HTML são equivalentes às
listas com marcadores do Microsoft Word. A diferença entre o
resultado da marcação HTML e do Word está na mudança dos
marcadores, distinção que veremos mais adiante.
Unidade 3
77
Universidade do Sul de Santa Catarina
Listas de Glossário ou Listas de Definição
As listas de definição são também chamadas ‘listas de glossário’.
Elas são um pouco diferentes das outras listas. Cada item de uma
lista de glossário tem estes dois componentes:
„„
um termo;
„„
a definição do termo.
Uma lista de glossário permite incluir uma descrição de cada item
listado. O descritor <DL> e os descritores <DT> e <DD> fazem
esta função.
Cada componente da lista de glossário possui sua própria tag:
„„
<DT>: para o termo (Definition Term)
„„
<DD>: para a respectiva definição (Definition Definition)
Essas tags são unilaterais e, em geral, apresentadas aos pares,
embora a maioria dos navegadores possa tratar <tratar o quê?>
com definições ou termos específicos. A lista de glossário inteira
é indicada pelas tags <DL>...</DL> (Definition List).
Eis um exemplo de uma lista de glossário:
<DL>
<DT>termo a ser definido
<DD>definição
<DT>termo a ser definido
<DD>definição
</DL>
Considere a seguinte visualização:
78
Linguagens de Programação I
Figura 3.8 – Exemplo no navegador de uma lista de glossário.
Este tipo de lista é muito utilizado para diversos efeitos de
organização de páginas, pois permite a tabulação do texto. Um
exemplo de ocorrência desta lista são os índices de navegação
presentes em muitas páginas de tutoriais na web.
Listas de Menu e Listas de Diretórios
Listas de menu são listas de itens ou parágrafos curtos sem
marcadores, números ou qualquer outro símbolo. Essas listas
se assemelham às listas simples de parágrafos. A diferença é
que alguns navegadores podem recuá-las ou formatá-las de
maneira diferente dos parágrafos normais. As listas de menu são
delimitadas pelas tags <MENU> e </MENU>, e cada item da
lista é indicado pela tag <LI>.
As listas de diretórios são destinadas a itens ainda mais curtos
do que os da lista de menu e devem ser formatadas pelos
navegadores horizontalmente, em colunas. As listas de diretório
são delimitadas pelas tags <DIR> e </DIR> e a tag <LI>
identifica cada item da lista. Veja o exemplo abaixo:
<MENU>
<LI>maçã
<LI>laranja
<LI>goiaba
</MENU>
Unidade 3
79
Universidade do Sul de Santa Catarina
Veja o resultado no seu navegador, que é como se fosse mostrada
uma lista. Conforme descrito anteriormente, o que diferencia é o
recuo que alguns navegadores podem adotar.
Figura 3.9 – Exemplo no navegador de uma lista de menu e lista de diretório.
Embora as listas de menu e de diretório existam na
especificação HTML 2.0, não são muito utilizadas em
páginas na web. Na HTML 4.0 elas são consideradas
diferentes das listas não ordenadas e das listas de
glossário, por serem representadas de modo diferente,
na aparência, em relação às listas não ordenadas
ou de glossário, mas os navegadores ainda não as
implementam de modo diferente. Considerando que
a maioria dos navegadores formata menus e diretórios
da mesma forma que as listas de glossário ou listas
não ordenadas, e não da forma como estão descritas
na especificação, é provável que a melhor opção seja
utilizar os outros 3 formatos de lista. (LEMAY; LAURA,
1998).
A maioria dos navegadores aceita o uso da tag <LI>
fora de uma estrutura de lista, isolada na página, e
a formatará como um parágrafo simples ou como
um item com marcador, mas sem recuo. Contudo,
segundo a verdadeira definição HTML, o uso de uma
tag <LI> é inválido desta forma. Por isso, as páginas
em HTML adequadas não devem usá-la assim. E como
estamos procurando criar páginas em HTML corretas,
você não deverá fazer uso desse método. Assim, inclua
sempre os seus itens nas listas a que pertencem.
80
Linguagens de Programação 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>definição
<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>definição
</DL>
O recuo de listas aninhadas no próprio código HTML ajuda a
mostrar, no layout final, o seguinte relacionamento entre as listas:
Figura 3.10 – Exemplo no navegador de listas aninhadas.
Unidade 3
81
Universidade do Sul de Santa Catarina
Considere o seguinte exemplo:
<HTML>
   <HEAD>
       <TITLE>Exemplo</TITLE>
   </HEAD>
   <BODY BGCOLOR=”black” TEXT=”yellow”>
       <UL>
     
 <LI>1</LI>
     
 <LI>2</LI>
      
<LI>3</LI>
       <UL>
   </BODY>
</HTML>
Vamos verificar o resultado em seu navegador? Que tal publicar na
ferramenta EXPOSIÇÃO do EVA?
Boa parte dos editores HTML (WYSIWYG ou não)
insere marcações que não existem em HTML.
Exemplos típicos são </DD>, </DT>, e </LI>. Porém,
como essas tags não são reconhecidas pelos
navegadores, elas não causam efeito colateral algum
nos documentos.
82
Linguagens de Programação I
Um exemplo deste caso:
<UL>
<LI>Documentos básicos
<LI>Documentos avançados
<UL>
<LI>formulários
<UL>
<LI>CGI
</UL>
<LI>contadores
<LI>relógios
</UL>
<LI>Detalhes sobre imagens
</UL>
Veja o resultado no navegador:
Figura 3.11 – Exemplo no navegador de listas aninhadas.
Observe que estas mesmas listas também não apresentariam
numeração em formato 1.1, 1.2, etc., quando ordenadas e
compostas:
1. Documentos básicos
2. Documentos avançados
Unidade 3
83
Universidade do Sul de Santa Catarina
1. formulários
1. CGI
2. contadores
3. relógios
3. Detalhes sobre imagens
Porém, através do atributo TYPE (HTML 3.2), pode-se lidar
com a numeração dos itens:
<OL TYPE=”I”>
<LI>Documentos básicos
<LI>Documentos avançados
<OL TYPE=”a”>
<LI >formulários
<OL TYPE=”i”>
<LI>CGI
</OL>
<LI>contadores
<LI>relógios
</OL>
<LI>Detalhes sobre imagens
</OL>
Vamos testar o exemplo acima no seu navegador e verificar o resultado?
Ele apresenta-se como o visualizado abaixo!
84
Figura 3.12 – Exemplo no navegador de listas aninhadas.
Linguagens de Programação I
Outro exemplo de listas aninhadas são as listas de glossários,
descritas tal como no exemplo a seguir:
<DL>
<DT>Imperadores do Brasil:
<DD>D. Pedro I
<DL>
<DD>Nome completo: Pedro de Alcântara Francisco
Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim
José Gonzaga Pascoal Cipriano Serafim de Bragança e
Bourbon
</DL>
<DD>D. Pedro II
<DL>
<DD>Nome completo: Pedro de Alcântara João
Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula
Leocádio Miguel Gabriel Rafael Gonzaga
</DL>
</DL>
Vamos visualizar o exemplo acima no seu navegador? Qual o
resultado? Publique este resultado também na ferramenta
EXPOSIÇÃO, no ambiente virtual EVA.
Se você não está vendo diferença alguma entre as
listas comuns e as que têm atributos TYPE, isto se deve
ao fato de seu navegador não estar reconhecendo
esses atributos como válidos. Trata-se de um
navegador de versão antiga. Deve-se pensar nisto
quando usamos atributos mais recentes, pois nem
todo usuário poderá ver o resultado das novas
marcações.
Unidade 3
85
Universidade do Sul de Santa Catarina
Seção 2 - Comentários
Você pode incluir comentários em páginas em HTML para
descrever a própria página ou para fornecer alguma indicação
de seu status. O texto inserido é ignorado, quando o arquivo em
HTML é analisado. Os comentários nunca são apresentados na
tela – por isto são comentários. Eles têm um formato semelhante
ao seguinte:
<!-- Isto é um comentário -->
Em versões mais atuais da HTML, você pode comentar também
várias linhas assim:
<!-- Isto é um comentário
De duas ou mais
linhas -->
Aqui tem um exemplo de comentário!!
Ele não apareceu escrito!!
Visualize o exemplo acima no seu navegador:
Figura 3.13 - Exemplo de comentário.
86
Linguagens de Programação I
Atividade de autoavaliação
A partir de seus estudos, leia com atenção e resolva a atividade
programada para a sua autoavaliação.
1. Crie uma página HTML chamada de MinhaLista.html e crie listas
aninhadas nesta página. Não se esqueça de comentar o seu código
HTML.
Unidade 3
87
Universidade do Sul de Santa Catarina
Seção 3 - ‘Tudo’ sobre vínculos
Até agora, produzimos um documento bastante simples, que
poderia ser composto com recursos muito mais sofisticados,
em qualquer processador de texto. Mas, nesta seção, falaremos
de documentos de hipertexto, que podem fazer ligações com
outros textos.
Com HTML é possível você fazer ligações de uma região de
texto (ou imagem) a um outro documento. O navegador destaca
regiões e imagens do texto, indicando que são ligações de
hipertexto - também chamadas hypertext links ou hiperlinks ou
simplesmente links, como você já estudou na unidade 1.
Para criar um vínculo em HTML, você precisa de dois
componentes:
„„
„„
o nome do arquivo (ou URL do arquivo) com o qual deseja
estabelecer o vínculo;
o texto que será destacado no navegador e deverá ser
selecionado pelos usuários para acompanhar os vínculos.
Apenas este segundo componente estará visível na sua página.
Quando você clicar sobre o texto que aponta para o vínculo, o
navegador reconhecerá o primeiro componente como o local para
onde deverá ‘ir’.
A tag de vínculo <A>
Para criar um vínculo em uma página em HTML, você deverá
utilizar a tag de vínculo <A>...</A>. Esta tag é chamada também
de tag de âncora, pois pode ser utilizada para criar âncoras para
vínculos, como você aprenderá mais à frente. No entanto a tag
de vínculo costuma ser mais utilizada, em geral, na criação de
vínculos com outras páginas. Dentro dessa tag, na forma de
atributo, é colocada a referência ao arquivo ligado. A referência
indica a URL do documento. Quando o usuário clicar sobre o
trecho realçado pela âncora de hipertexto, o arquivo ligado será
requisitado ao servidor e mostrado na janela do navegador.
88
Linguagens de Programação I
Atributos
A tag <A> tem vários atributos, utilizados conforme a ação
associada ao link. Os mais usados são:
„„
„„
„„
HREF - indica o arquivo de destino da ligação de
hipertexto ou o endereço de uma página HTML.
TARGET - indica o frame em que será carregado o
arquivo de destino. Maiores detalhes, você verá na
unidade 7, que aborda frames.
NAME - marca um indicador, isto é, a região de um
documento como destino de uma ligação.
Veja o exemplo abaixo:
Arquivo a ser carregado
quando o link é selecionado
Texto que será selecionado
<A HREF=’.../cadastro/menu.htlm’>Acesse o Menu Principal</A>
Tag de abertura
Tag de fechamento
Neste exemplo, o texto ‘Acesse o Menu Principal’ aparece no
navegador realçado de alguma forma, normalmente, em uma
cor diferente e sublinhado. O cursor do mouse se transforma
em uma mãozinha quando colocado sobre o texto realçado. Ao
clicar no link, o arquivo ‘menu.html’, do diretório ‘/cadastro/’, será
mostrado na tela.
Referência de Hipertexto
Colocando uma URL no atributo HREF da tag <A>, pode-se
ligar uma página com qualquer outro documento disponível
na internet, ou seja, é possível estabelecer uma referência de
Unidade 3
89
Universidade do Sul de Santa Catarina
hipertexto em função de tags que criam links para outras páginas
da internet. Pode-se fazer uma página com uma lista de páginas
preferidas da rede com suas devidas ligações de hipertexto.
Veja este modelo:
<a href=”http://endereçodapagina.htm”>Aqui vai o nome ou o
endereço da página para a qual você está apontando o link</a>
Vamos verificar o resultado no navegador?
Figura 3.14 - Exemplo de vínculo.
Por exemplo, para colocar um link da UnisulVirtual na sua
página, escreva:
<a href=”http://www.virtual.unisul.br”>UnisulVirtual</a>
Um visitante na sua página que clicar sobre o link UnisulVirtual
será levado à página principal do site.
Links na mesma Página (âncora)
A tag <A> com o atributo NAME permite que você crie links
internos na mesma página, ou seja, faz com que a âncora indicada
(por isso também chamada de indicador) seja o destino de um link.
90
Linguagens de Programação I
Observe este exemplo:
<A HREF=”#explicação”>Saiba mais sobre o meu site</A><P><hr>
Escrevendo um texto em HTML com vínculos.<P><br><br><br><br><br>
<br><br>
<A NAME=”explicação”>O meu site</A>
O exemplo acima, ‘Saiba mais sobre o meu site’, está vinculado à
região chamada ‘O meu site’. Ou seja: quando um usuário clicar
sobre ‘Saiba mais sobre o meu site’, será levado para a região, na
mesma página, chamada ‘Meu site’. O caractere ‘#’ indica que se
trata de um link em uma mesma página.
Como foi dito anteriormente, o atributo NAME permite
indicar um trecho de documento como ponto de
chegada de uma ligação hipertexto.
Veja o resultado no navegador:
Figura 3.15 – Exemplo de link na mesma página.
Unidade 3
91
Universidade do Sul de Santa Catarina
No exemplo do navegador acima, quando o usuário clicar em
“Saiba mais sobre o meu site”, o link levará o usuário a mesma
página onde foi marcado o ponto de chegada, neste caso “O meu
site”. Veja:
Figura 3.16 – Exemplo de link na mesma página.
Quando construímos links para trechos determinados de outros
documentos, precisamos saber quais trechos do documento
destino estão marcados para ponto de chegada de um link.
Lembre-se de que os nomes das âncoras não contêm
caracteres #. Somente os vínculos correspondentes
contêm esses caracteres.
Uma referência a uma outra parte do mesmo documento é
particularmente útil, quando se está fazendo o índice de um
texto. Vejamos outro exemplo:
<A HREF=”#cap1”>Capítulo 1</A>
Enquanto o alvo do link fica desta forma:
<A NAME=”cap1”>Capítulo 1</A>
92
Linguagens de Programação I
Neste exemplo, quando o usuário clicar sobre o link <A
HREF=“#cap1”>Capítulo 1</A>, ele será remetido ao ponto onde
está a referência <A NAME=“cap1”>Capítulo 1</A>. A parte
do texto que é referenciada (o alvo de um link) não fica realçada
como os hyperlinks. Além de ser invisível, não é obrigatório que
exista um link apontando para ele.
As âncoras fazem distinção entre maiúsculas e
minúsculas. Por isto, se o navegador não conseguir
localizar o nome de uma âncora que tenha a grafia
exata, é possível que ele tente selecionar outro nome
semelhante contido na página. Isto varia em função
do comportamento do navegador.
Link para e-mail
A tag <A> também permite que os visitantes mandem e-mail
para o autor do site, ao clicar no endereço. É possível esta ação, a
partir do seguinte modelo:
<A HREF=”mailto:[email protected]”>Mande-me um e-mail</A>
Vínculos de Páginas Locais através de Nomes de Caminhos
Absolutos e Relativos
Aqui você verá exemplos de como estabelecer vínculos entre
páginas que estejam contidas na mesma página ou em diferentes
pastas (ou diretórios) de seu disco local (páginas locais). Os links
podem estar indicados como caminhos relativos ou absolutos.
Caminho Relativo
Quando você especifica, entre aspas, apenas o nome do caminho
de um arquivo vinculado, o navegador procura esse arquivo
no diretório em que está armazenado o arquivo atual. Isso
ocorre, mesmo se o arquivo atual e o arquivo com que se está
Unidade 3
93
Universidade do Sul de Santa Catarina
estabelecendo o vínculo estejam armazenados em um servidor
localizado em algum outro ponto da rede. Os dois arquivos estão
contidos no mesmo diretório nesse servidor. Essa é a forma mais
simples de nomear o caminho relativo.
O caminho relativo deve ser usado sempre que
queremos fazer referência a um documento
armazenado no mesmo servidor do documento atual.
O nome de um caminho relativo pode conter também o nome de
diretório(s) ou indicar o caminho que você tomaria para navegar
até esse arquivo, se tivesse partido do diretório ou pasta atual.
Um nome de caminho pode conter, por exemplo, as direções
a serem percorridas para subir dois níveis de diretório e, em
seguida, descer outros dois para obter acesso ao arquivo.
Os nomes de caminhos relativos indicam os arquivos
com base em sua localização relativa, ou seja, na posição
em que se encontram em relação ao arquivo atual.
A tabela abaixo mostra alguns exemplos de nomes de caminhos
relativos e seus significados:
94
Nome do caminho
Descrição
HREF=“arquivo.html”
Arquivo.html está localizado na pasta atual.
HREF=“docs/arquivo.html”
Arquivo.html está localizado na pasta (ou diretório) docs e a
pasta docs está localizada na pasta atual.
HREF=“../arquivo.html”
Arquivo.html está localizado na pasta situada um nível acima
da pasta atual (pasta ou diretório superior).
HREF=“../../docs/arquivo.
html”
Arquivo.html está localizado na pasta docs, sendo que esta
pasta está localizada dois níveis acima da pasta atual.
Linguagens de Programação I
Acompanhe este exemplo:
Veja o <A HREF=”exemplos/doc2.html”>exemplo de caminho relativo</A>.
A referência cruzada entre arquivos armazenados no mesmo
computador, mas em diretórios diferentes, merece bastante
atenção. Digamos que existam dois diretórios colocados no
mesmo nível. Um, chamado música; e o outro, comida. Um
arquivo chamado ‘rock.htm’, do diretório música, deve fazer
uma referência ao arquivo ‘feijoada.htm’, do diretório comida. A
âncora de hipertexto do documento ‘rock.htm’ deve ficar assim:
<A HREF=”../comida/feijoada.htm”>Tudo sobre feijoada</A>
Pode-se colocar referências do tipo <A NAME> em um
documento longo, para que outras pessoas que estejam
navegando na web possam fazer ligações para determinadas
partes do texto.
Para citar uma determinada parte de outro texto, a referência é:
<A HREF=”exemplo.htm#capitulo1”>Capítulo 1 do Exemplo</A>
Neste caso, ‘exemplo.htm’ é o nome do arquivo referenciado, e
‘capítulo1’ é a referência a uma parte daquele texto.
Para usar links com caminhos relativos, é preciso, portanto,
conhecer a estrutura do diretório do servidor no qual estamos
trabalhando. Quando há alguma dúvida, o melhor é usar o
caminho absoluto.
Unidade 3
95
Universidade do Sul de Santa Catarina
Caminho Absoluto
Utilize o caminho absoluto, quando desejar referenciar um
documento que esteja em outro servidor.
No vínculo seguinte, por exemplo, é oferecido um link para um
documento no servidor WWW da Unisul:
<A HREF=”http://www.unisul.br/ “>Universidade do Sul de Santa Catarina</A>
Com esta mesma sintaxe, é possível escrever links para qualquer
servidor de informações da internet.
Veja este outro exemplo:
São Carlos é um <A HREF= “/ambiente/saocarlos/histprog.html#polo”>pólo de
alta tecnologia</A>.
Neste caso, foi produzido um link para um parágrafo marcado
com <A NAME=“polo”> no arquivo histprogr.html sobre a
cidade de São Carlos, no diretório /ambiente/saocarlos/.
Cores dos Hyperlinks
Da mesma forma que é possível definir cores diferentes para
o fundo e o texto, pode-se mudar a cor dos links. As cores das
âncoras de hipertexto variam de acordo com a sua condição:
visitados, nunca visitados e ativos. Assim, os navegadores
sabem quais foram os hyperlinks já visitados pelo usuário em
um determinado período de tempo. Por isso, a cor dos links já
visitados deve ser diferente da cor das referências nunca visitadas.
Além disto, o link pisca em uma cor ainda diferente dessas duas
logo depois que é clicado pelo usuário.
A cor dos links é definida no tag <BODY>, conforme já foi
estudado na unidade 2.
96
Linguagens de Programação I
<BODY LINK=”red” ALINK=”blue” VLINK=”green”>
Onde:
„„
„„
„„
LINK - determina a cor dos links não visitados;
ALINK - determina a cor que os links devem piscar
quando clicados;
VLINK - determina a cor dos links já visitados.
Neste exemplo, os links nunca visitados ficam em vermelho; os
ativos (quando clicados), em azul; e, os visitados, em verde. Para
não confundir os usuários, a cor dos links já visitados deve ser
uma versão mais clara da cor das ligações ainda não visitadas.
Síntese
Amigos, mais uma unidade vencida! Nesta unidade, aprendemos
como criar os mais diferentes tipos de lista. As listas podem ser
as seguintes:
Tipo de lista
Sintaxe
Exemplo
Ordenada
<OL>conteúdo</OL>
<OL>
<LI>item</LI>
</OL>
<UL>conteúdo</UL>
<UL>
<LI>item</LI>
</UL>
<DL>conteúdo</DL>
<DL>
<DT>termo</DT>
<DD>definição</DD>
</DL>
Não Ordenada
Definição
Você também aprendeu como criar vínculos de uma página à
outra na internet, através da tag <A> com o atributo HREF.
Unidade 3
97
Universidade do Sul de Santa Catarina
Tipo de vínculo
Sintaxe
Exemplo
Localização
HREF=”LOCALIZAÇÃO”
<A HREF=”http://link.da/pagina.html”> texto</A>
Abrir Nova
Janela
TARGET=”_BLANK”
<A HREF=”http://link.da/pagina.html” TARGET=”_
BLANK”>texto</A>
Mail
HREF=”mailto:MAIL”
<A HREF=”mailto:[email protected]”> texto</A>
Atividades de autoavaliação
Leia com atenção e resolva a seguinte atividade de autoavaliação.
1. Você pode colocar qualquer URL em um vínculo? Comente esta questão
na ferramenta FÓRUM no Espaço UnisulVirtual de Aprendizagem e
discuta com os colegas!
Saiba mais
Aprofunde os conteúdos estudados nesta unidade ao consultar as
seguintes referências:
MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base
da programação para web. São Paulo: Editora Érica, 2005.
<http://www.clem.ufba.br/tuts/html/c07.htm>
<http://www.criarweb.com/manuais/2/>
98
unidade 4
Mais formatação em HTML
Objetivos de aprendizagem
n
Especificar o aspecto visual dos caracteres.
n
Incluir caracteres especiais.
„„ Alterar a fonte e o tamanho da fonte.
Seções de estudo
Seção 1 Estilos de Caractere
Seção 2 Caracteres Especiais
Seção 3 Formatação do Texto
Seção 4 As Tags <blink> e <marquee>
Seção 5 Endereços
4
Universidade do Sul de Santa Catarina
Para início de estudo
Você já aprendeu os conceitos básicos da HTML, que abrangem
vários elementos básicos da página e vínculos. Com esse
conhecimento, você está agora preparado(a) para aprender um
pouco mais sobre o que a HTML oferece no que diz respeito à
formatação do texto e à elaboração do layout das páginas.
Esta unidade descreve várias tags e atributos. Mas não se
preocupe em memorizar tudo. Dedique-se apenas a aprender os
diversos tipos de formatação que você pode utilizar na HTML.
Seção 1 - Estilos de Caractere
Quando você utiliza uma tag HTML em parágrafos, cabeçalhos
ou listas, essas tags afetam esse bloco de texto como um todo,
alterando a fonte, o espaçamento acima e abaixo da linha ou
incluindo caracteres (como as listas com marcadores). Os estilos
de caractere são tags que afetam as palavras ou caracteres contidos
em outras entidades HTML e alteram o aspecto visual do texto,
de forma a diferenciá-lo do texto restante, como por exemplo,
através do negrito, sublinhado.
Há dois tipos de formatação em HTML:
„„
as tags de estilo lógico;
„„
e as tags de estilo físico.
Os efeitos de apresentação na tela, a partir destes dois tipos de
formatação, são os mesmos. O motivo da distinção entre eles
se deve à ideia básica de independência entre especificação e
apresentação. Então, para alterar a aparência de um conjunto de
caracteres contidos no texto, você pode usar esses dois estilos.
100
Linguagens de Programação I
Estilos Lógicos
As tags de estilo lógico indicam como o texto destacado deverá
ser utilizado, e não como será apresentado (formatado). Elas
se assemelham às tags de elementos comuns, utilizadas para
parágrafos ou cabeçalhos. Essas tags podem indicar uma
definição, um segmento de código ou uma palavra enfatizada.
Quando formatamos um trecho de texto como cabeçalho de nível
1, não explicitamos se esse tipo de cabeçalho deve apresentar
alguma fonte determinada, em um tamanho determinado,
justificado à esquerda ou à direita, ou centralizado. Estes detalhes
de apresentação são deixados para o navegador - o dispositivo de
apresentação do documento - que pode ser configurado de acordo
com o usuário final.
Desse modo, além de facilitar enormemente o trabalho de quem
escreve os documentos, a linguagem garante a uniformidade de
apresentação dos cabeçalhos, parágrafos, listas, etc.
A formatação lógica segue o significado lógico do texto
marcado: um endereço de e-mail, uma citação, etc. Sua
apresentação final varia conforme o navegador, podendo
oferecer resultados mais ricos.
Cada tag de estilo de caractere contém lados de abertura e de
fechamento e afeta o texto contido entre essas duas tags. Existem
8 tags padrão para esse estilo:
Unidade 4
101
Universidade do Sul de Santa Catarina
Tabela 4.1 - Estilos Lógicos
Tag de
Estilo lógico
Definição
Exemplo
<CITE>
Para títulos de livros, filmes e
citações curtas.
<CITE>Assisti Guerra nas Estrelas umas
oito vezes!</CITE>
<P> Este trecho foi citado no livro X
<CITE>(Silva, 2006)</CITE></P>
<CODE>
Para indicar trechos de código de
programas.
<CODE>for (x=0); cl &&(!feof(stdin));
x++)); </CODE>
<CODE>#include “teste.h”#</CODE>
<DFN>
Indica definição de uma palavra ou
expressão. Em geral apresenta o
texto em itálico.
<DFN>CERN: Centre d`Éstudes et
Recherches Nucleaires </DFN>
<EM>
Ênfase. Indica que os caracteres
deverão ser enfatizados de alguma
forma. Em geral, apresentada em
itálico.
É preciso pesquisar <EM>muito</EM>
para encontrar o termo exato.
<KBD>
Indica uma entrada via teclado,
ou seja, o texto a ser digitado pelo
usuário.
Para ler mensagens recebidas, digite
<KBD> pine -i </KBD>
Indica uma sequência de caracteres,
por exemplo, uma mensagem de
erro ou um resultado ou um texto
de exemplo. Semelhante a <CODE>.
O resultado do primeiro applet é:
<SAMP> Hello, World! </SAMP>
Forte ênfase, mostrada
normalmente em negrito.
Antes de enviar um e-mail, <STRONG>
confira o campo “Subject:”! </STRONG>
Indica variáveis ou valores
que o usuário deverá escrever.
Geralmente mostrado em itálico ou
sublinhado.
No campo Login, escreva <VAR> guest.
</VAR>
<SAMP>
<STRONG>
<VAR>
Fonte: LEMAY, 1998.
Estilos Físicos
A formatação física especifica o estilo que se quer para o texto.
Ou seja: existe um conjunto de tags que altera realmente o
estilo de apresentação de um texto: itálico, grifado, negrito,
espaçamento, etc. Sua apresentação final não sofre grandes
variações. Assim como as tags de estilos de caractere lógico, cada
102
Linguagens de Programação I
tag de formatação física contém uma tag de abertura e uma tag de
fechamento. As tags de estilo físico são as descritas a seguir:
Tabela 4.2 - Estilos Físicos
Tag de
Estilo Físico
Definição
Exemplo
<B>
Negrito (Quando disponível
em alguns navegadores, pode
aparecer sublinhado).
<B>Texto em negrito</B>
<I>
Itálico.
<I>Texto em itálico</I>
<TT>
Fonte de máquina de escrever
com espaçamento uniforme
(monoespaçada).
<TT>Texto monoespaçado </TT>
<U>
Sublinhado.
<U>Texto sublinhado</U>
Tachado.
<S>Texto Tachado</S>
Fonte maior que a do texto ao
redor.
Testando a <BIG>fonte</BIG> maior.
Fonte menor.
Testando a <SMALL> fonte </SMALL>
menor.
<SUB>
Subscrito.
Frase em estilo índice, como em H2O.
<SUP>
Sobrescrito.
Frase em estilo expoente, como em Km2.
<STRIKE>
ou <S>
<BIG>
<SMALL>
Fonte: LEMAY, 1998.
Utilize a Tag <U> com cuidado, pois ela se
confunde com a apresentação de links.
As tags de estilo podem ser usadas umas sobre as outras,
acumulando seus efeitos. Você pode aninhar tags de caractere,
como nos exemplos a seguir:
Unidade 4
103
Universidade do Sul de Santa Catarina
<B><I>Texto em negrito e itálico</I></B><P>
<B><TT>Texto monoespaçado em negrito</TT></B><P>
<I><TT>Texto monoespaçado em itálico</TT></I><P>
<B><TT><I>Texto monoespaçado em negrito e itálico</I></TT></B>
Vamos visualizar o exemplo acima no navegador:
Figura 4.1 – Exemplo de tags de estilo.
Ao contrário de <PRE>, a tag <TT> ignora espaços em branco
adicionais e entradas de parágrafo no meio do texto. Em relação
ao espaçamento, a tag <TT> funciona exatamente como texto
normal.
Entretanto o resultado na tela dependerá do navegador
utilizado. Sobretudo em navegadores baseados em texto, como
por exemplo, o Lynx, algumas dessas tags não poderão ser
representadas visualmente.
104
Linguagens de Programação I
Seção 2 - Caracteres Especiais
Não é recomendável que os documentos web contenham acentos.
Ainda que todos os navegadores existentes entendam a presença
de um caractere acentuado, existem ocasiões em que o texto em
HTML pode ficar truncado.
Os arquivos HTML são textos ASCII que não devem conter
formatação ou caracteres especiais. Na verdade, os únicos
caracteres que deverá incluir nos seus arquivos HTML são os
que constam no seu teclado. Se você tiver de pressionar qualquer
tecla que não seja a tecla SHIFT ou pressionar uma combinação
complexa de teclas para produzir um único caractere, então você
não poderá usar esse caractere no seu arquivo em HTML. Isso se
aplica também a caracteres que talvez você esteja acostumado(a) a
usar, como travessões, por exemplo.
ASCII (American Standard
Code for Information
Interchange) é um
conjunto de códigos
para o computador
representar números,
letras, pontuação e outros
caracteres.
Mas, espere um instante! Imagino o que você está pensando:
se eu posso digitar um caractere, como um marcador ou um ‘a’
acentuado no meu teclado através de uma sequência de teclas
especiais, incluindo-o assim no meu arquivo em HTML, e o
meu navegador é capaz de apresentá-lo corretamente, qual é o
problema?
O problema, neste caso, é que a codificação interna feita pelo
seu computador para produzir esse caractere (que permite a
apresentação de forma apropriada no seu arquivo em HTML e
no seu navegador) provavelmente não poderá ser convertida em
outros computadores. Se outra pessoa estiver lendo o seu arquivo
HTML na internet com esse caractere especial, é provável que
acabe vendo outro caractere na tela, o que costumamos chamar
de “lixo”. Ou, dependendo de como a sua página for apresentada
na internet, o caractere poderá perder-se antes de chegar ao
computador em que o arquivo está sendo exibido.
E o que você pode fazer? A HTML oferece uma solução razoável.
Ela define um conjunto especial de códigos, que são chamados
de entidades de caractere. Você pode incluir essas entidades
nos seus arquivos em HTML, para representar os caracteres que
deseja usar. Quando interpretadas pelo navegador, essas entidades
são apresentadas como caracteres apropriados para a plataforma e
a fonte especificadas.
Unidade 4
105
Universidade do Sul de Santa Catarina
Por exemplo, quando alguém copia uma página web e a envia
para outra pessoa através de correio eletrônico. Para contornar
este problema, existe uma tabela de códigos que substituem
os acentos. Os navegadores transformam estes códigos em
caracteres acentuados, e o documento poderá ser transmitido
por qualquer meio.
HTML permite que caracteres especiais sejam representados por
sequências de escape, indicadas por três partes: um ‘&’ inicial,
um ‘número’ ou ‘cadeia de caracteres’ correspondente ao caractere
desejado, e um ‘;’ final. Dessa forma, para usar a palavra “café” no
seu arquivo HTML, você deveria usar:
Caf&eacute;
Ou
Caf&#233;
Acompanhe como fica esta palavra em seu navegador:
Figura 4.2 - Exemplo de visualização do uso de caracteres especiais.
No exemplo acima, eacute e #233 equivale ao caractere e
acentuado na tabela ASCII.
Suponha agora que você queira incluir em um arquivo em
HTML uma linha de código semelhante a esta:
106
Linguagens de Programação I
<CODE>se (x < 0) então</CODE>
A HTML não é capaz de representar essa linha da forma como
foi digitada. Por que? O problema está relacionado ao caractere <
(menor que). Para um navegador HTML, esse caractere significa
“este é o início de uma tag”. Como nesse contexto o caractere
< (menor que) não representa o início de uma tag, o navegador
ficará confuso. Outro problema trata da acentuação da palavra
“então”, que deverá ser substituída pela sequência correspondente.
Dessa forma, para ser gravada de forma correta para a HTML,
essa linha de código deveria ser apresentada da seguinte forma:
<CODE> se (x&lt;0) ent&atiloe;0</CODE>
Acompanhe a visualização do texto em questão:
Figura 4.3 - Exemplo de visualização de uma linha de código de programa.
Quatro caracteres ASCII: <, >, & e “ têm significados especiais
em HTML e são usados dentro de documentos seguindo esta
correspondência:
Entidade
Caractere
&lt;
<
Unidade 4
107
Universidade do Sul de Santa Catarina
ISO Latin1: ASCII com extensões para
idiomas Europeus
108
&gt;
>
&amp;
&
&quot;
“
Outras sequências de escape suportam caracteres ISO Latin1.
Aqui está uma tabela com os caracteres mais utilizados em
português:
Entidade
Caractere
&aacute;
á
&acirc;
â
&agrave;
à
&atilde;
ã
&ccedil;
ç
&eacute;
é
&ecirc;
ê
&iacute;
í
&oacute;
ó
&ocirc;
ô
&otilde;
õ
&uacute;
ú
&uuml;
ü
Entidade
Caractere
&Aacute;
Á
&Acirc;
Â
&Agrave;
À
&Atilde;
Ã
&Ccedil;
Ç
Linguagens de Programação I
&Eacute;
É
&Ecirc;
Ê
&Iacute;
Í
&Oacute;
Ó
&Ocirc;
Ô
&Otilde;
Õ
&Uacute;
Ú
Como vemos, as sequências de escape são sensíveis à caixa
(alta ou baixa). Os editores de HTML fazem essa tradução
automaticamente.
Alguns editores, no entanto, mantêm a acentuação, sem usar
as entidades de formatação. Quando isso acontece, deve-se
inserir uma indicação do esquema de codificação ISO Latin1,
escrevendo:
<HTML>
<HEAD>
<TITLE>...</TITLE>
<META HTTP-EQUIV=”Content-Type”
CONTENT=”text/html; charset=ISO-8859-1”>
</HEAD>
</HTML>
Existem alguns símbolos que vêm sendo incorporados ao
conjunto de caracteres reconhecidos em HTML. Por exemplo:
„„
&copy; para o símbolo ©;
„„
&reg; para ®; e
„„
&sect; para §.
Unidade 4
109
Universidade do Sul de Santa Catarina
Por que usar essas formatações?
Por causa de um problema técnico relativo à transmissão dos
caracteres especiais de várias línguas.
Chama-se conjunto de caracteres uma representação digital
de texto. O conjunto de representação amplamente utilizado
é o ASCII. O ASCII padrão tem 7 bits, porém são usadas
versões particulares desse padrão - o ASCII americano, ASCII
português, etc., que utilizam 8 bits.
Se você gera um texto em ASCII de 8 bits e, na transmissão,
esse texto é tratado por um sistema que “compreende”
apenas o ASCII de 7 bits, então os caracteres especiais serão
transformados em caracteres diferentes, pela perda do oitavo bit.
Como usuário da Internet, você já deve ter sofrido experiência
semelhante com mensagens de e-mail, que chegam com caracteres
estranhos, ou páginas da web com textos em japonês ou russo.
Seção 3 - Formatação do Texto
A tag <FONT> é usada para controlar as características de
determinado conjunto de caracteres, que, por sua vez, não é
representado pelos estilos de caractere Lógico e Físico, como
vimos na seção 1 desta unidade. Originalmente, essa tag era
usada apenas para controlar o tamanho da fonte dos caracteres
delimitados por ela. Mas tem sido expandida no sentido de
permitir que você altere a própria fonte e a cor desses caracteres.
Tamanho da 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 atribuído à fonte. Os
valores desse atributo variam de 1 a 7, e o valor 3 corresponde ao
tamanho padrão. O modelo é o seguinte:
110
Linguagens de Programação I
<FONT SIZE=”tamanho_da_letra”>Texto</FONT>
A formatação acima permite que o autor do documento altere
o tamanho das letras em trechos específicos de texto. Veja o
exemplo a seguir:
<FONT SIZE=”7”>Texto</FONT>
Visualize o exemplo acima no seu navegador:
Figura 4.4 – Exemplo de visualização de tamanho de fonte.
Você pode também indicar o tamanho na tag <FONT> como
um valor relativo, através da utilização dos caracteres + ou - no
valor do atributo SIZE. Como o padrão é 3, você pode alterar os
tamanhos de fonte relativos de -3 a +4, da seguinte maneira:
<FONT SIZE=”+2”>Letra maior</FONT><p>
Letra normal<p>
<FONT SIZE=”-2”>Letra menor</FONT>
Unidade 4
111
Universidade do Sul de Santa Catarina
Vamos visualizar este exemplo no seu navegador? O que
aconteceu? Comente.
A tag <FONT> pode ser atribuída a qualquer parte do texto, com
exceção dos títulos. Não existe nenhuma relação entre os valores no
atributo SIZE e o número de pontos (pixels - a unidade utilizada
para medir os caracteres). Portanto o melhor é experimentar todos
os tamanhos e avaliar o resultado. Observe os exemplos:
<FONT SIZE=”7”>Texto com FONT SIZE=7</FONT><P>
<FONT SIZE=”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 Programação I
Acompanhe a visualização:
Figura 4.5 - Exemplo de visualização de vários tamanhos de fonte.
A tag <FONT> também pode ser utilizada com um atributo
diferente para cada letra. A aplicação mais óbvia é a colocação de
uma capitular, aquela letra em tamanho maior no início de um
parágrafo.
<FONT SIZE=”7”>T</FONT><FONT SIZE=”4”>exto</FONT>
Veja a visualização do código HTML acima no seu navegador.
Figura 4.6 – Exemplo de visualização de tamanho de fonte diferente entre os caracteres de um texto.
Unidade 4
113
Universidade do Sul de Santa Catarina
Também é possível modificar o tamanho de todo o texto de uma
vez só, colocando a tag <BASEFONT> no topo do texto. Confira
o exemplo:
<BASEFONT SIZE=”5”> Aqui todo o texto está em um
único<br>tamanho de fonte.
Visualização:
Figura 4.7 – Exemplo de visualização de tamanho de fonte de todo o texto.
Como alterar o tipo da fonte
O Internet Explorer, navegador da Microsoft lançado no
segundo semestre de 1995, trouxe a novidade de permitir a
mudança do tipo de caractere do texto. Assim, o autor de uma
página web pode definir com este navegador qual será o tipo de
fonte de determinada parte do texto, mas o usuário precisa ter
aquela fonte instalada no computador. Sugere-se a escolha de
tipos comuns, como o Arial, que vem junto com o Windows,
por exemplo. Os navegadores mais conhecidos também já
implementam essa funcionalidade.
O atributo FACE na tag FONT recebe como valor um conjunto
de nomes de fonte, delimitados por aspas e separados por
vírgulas. Quando um navegador que oferece suporte ao atributo
FACE interpretar uma página que o contém, ele localizará
no sistema cada um dos nomes de fonte especificados. Se não
conseguir encontrar o primeiro nome, procurará o segundo,
depois, o terceiro, e assim por diante, até localizar uma fonte que
114
Linguagens de Programação I
esteja instalada no sistema. Se nenhuma das fontes especificadas
for localizada, será utilizada a fonte padrão.
O modelo de sintaxe completa da tag FONT ficaria assim:
<FONT face=”tipologia” size=”tamanho” color=”cor”></FONT>
Onde:
„„
„„
„„
o atributo FACE determina o tipo da fonte;
o atributo SIZE, como já foi estudado, o tamanho da
fonte; e
o atributo COLOR, a cor do texto que vier escrito entre
essas tags.
Por exemplo:
<FONT face=”arial” SIZE=”6” COLOR=”red”>O texto será escrito
em vermelho, com fonte arial e tamanho 6.</FONT>
Acompanhe a visualização:
Figura 4.8 - Exemplo de visualização de formatação de texto.
Cores diferentes
As cores são introduzidas através do elemento <FONT>, com o
atributo COLOR, usando o sistema RGB (red, green, blue) para
cores, como já comentado na seção 2 da unidade 2:
Unidade 4
115
Universidade do Sul de Santa Catarina
<FONT COLOR=”#rrggbb”>Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da
definição geral de cores, feita através dos atributos de <BODY>.
Podemos utilizar o sistema RGB como escrever o nome da cor
indicada (porém navegadores antigos não aceitam este último).
Estes dois modelos seguintes oferecem o mesmo resultado no
navegador.
<FONT COLOR=”ffffff”>Texto na cor branca</FONT>
ou
<FONT COLOR=”white”>Texto na cor branca</FONT>
Ainda, é possível ter texto de várias cores na mesma página.
<FONT COLOR=”white”>Texto em branco</FONT>,
<FONT COLOR=”blue”>azul</FONT>,
<FONT COLOR=”green”>verde</FONT> e <FONT
COLOR=”red”>vermelho</FONT>
Confira a visualização:
Figura 4.9 - Exemplo de visualização de formatação de cores em textos.
116
Linguagens de Programação I
Também podemos realizar uma alteração simultânea de tipo de
fonte e cor, como no exemplo:
<FONT FACE=”Verdana” COLOR=”#0000AA”>Fonte Verdana azul</FONT>
<FONT FACE=”Arial” COLOR=”#00AA00”>Fonte Arial verde</FONT>
Este exemplo é assim visualizado:
Figura 4.10 - Exemplo de visualização de formatação de caracteres.
Seção 4 - As Tags <Blink> e <Marquee>
Você conhece as tags <BLINK> e </BLINK>? Para que servem
estas tags? Você estudará essas tags logo abaixo.
BLINK
As tags <BLINK> e </BLINK> atribuem um efeito piscante
ao texto. O perigo de se usar o BLINK é que, se sua página
já apresenta cores, desenhos, cabeçalhos, todos os efeitos que
chamam a atenção do leitor, o BLINK será ainda mais um fator
chamativo, o que causa um efeito final cansativo e confuso.
Evite usar o BLINK. É possível substituir esse recurso
por outros efeitos de JavaScript. Felizmente, são poucos os
navegadores que mostram o efeito dessa formatação. O Internet
Explorer é um dos navegadores que não consideram o BLINK.
Unidade 4
117
Universidade do Sul de Santa Catarina
Um exemplo seria:
<BLINK>Efeito piscante ao texto.</BLINK>
Ao usar o BLINK, aplique-o somente em pequenos
detalhes (palavras ou ‘flechinhas’), nunca em
grande número, muito menos em frases inteiras ou
cabeçalhos.
MARQUEE
Um texto pode entrar na página e percorrê-la da direita para a
esquerda ou em sentido contrário. É possível obter esse efeito de
animação de texto, através da formatação <MARQUEE>. Este é
o modelo para o uso do MARQUEE:
<MARQUEE BEHAVIOR=”efeito” WIDTH=”largura”>Texto</MARQUEE>
Atributos de largura e direção do efeito permitem diversas
apresentações diferentes. Também se podem aplicar cores,
negrito, itálico, alterar a fonte e o seu tamanho, normalmente.
Por exemplo (o efeito de MARQUEE só é executado no Internet
Explorer e em versões recentes do Netscape - e de maneiras
diferentes):
<MARQUEE BEHAVIOR=”SCROLL” WIDTH=”30%”>Texto</MARQUEE>
No exemplo acima, o texto movimenta-se da direita para a
esquerda, utilizando apenas 30% da linha horizontal. Vamos
testar esse movimento no seu navegador?
118
Linguagens de Programação I
No exemplo abaixo, o texto movimenta-se da esquerda para a
direita:
<MARQUEE BEHAVIOR=”SLIDE” DIRECTION=”RIGHT”>Texto</MARQUEE>
Vamos visualizar o texto acima no seu navegador?
No exemplo abaixo, o texto movimenta-se da direita para a
esquerda. Não se esqueça de visualizar o movimento no seu
navegador:
<MARQUEE BEHAVIOR=”SLIDE” DIRECTION=”LEFT”>Texto</MARQUEE>
Confira os atributos da tag <MARQUEE>:
Atributo
Definição
Exemplo
BGCOLOR
cor de fundo
BGCOLOR =”#FFFFFF”
BEHAVIOR
comportamento do texto
BEHAVIOR =”scroll “ ou “slide”
ou “alternate”
DIRECTION
direção do texto
DIRECTION =”right” ou “left”
LOOP
quantidade de vezes de repetição
do texto
LOOP =”nombre” ou “infinite”
HSPACE
espaço entre
o texto e a marquee
HSPACE =”10”
VSPACE
espaço entre
as linhas da marquee
VSAPCE =”5”
HEIGHT
altura em pixels
HEIGHT =”200”
WIDTH
largura em pixels
WIDTH =”300”
Unidade 4
119
Universidade do Sul de Santa Catarina
Veja o exemplo de uso de alguns destes atributos MARQUEE
logo abaixo:
<marquee behavior=”scroll” bgcolor=”#FF0000”>
<font face=”arial” color=”#ffffff” size=”2”>
<b>MXSTUDIO</b>
- Comunidade DW e FW
</font>
</marquee>
Observe o resultado no seu navegador. O texto percorre
continuamente (ele não para) o caminho da direita para a
esquerda, conforme o resultado nos dois navegadores abaixo:
Figura 4.11 - Exemplo do uso da tag MARQUEE – Etapa 1.
Figura 4.12 - Exemplo do uso da tag MARQUEE – Etapa 2.
120
Linguagens de Programação I
Seção 5 - Endereços
A tag <ADDRESS> é utilizada para entidades de assinaturas
em páginas da web. Ela é usada para formatar endereços, e-mail
e referências a autores de documentos. As tags de endereço em
geral são apresentadas na parte inferior de cada página da web e
utilizadas para indicar quem criou tal página. Veja o exemplo:
Envie suas dúvidas sobre a entrega de seu material para
<address>[email protected]</address>
No navegador, fica assim:
Figura 4.13 - Exemplo do uso de endereços no seu navegador.
Síntese
Tags, tags e mais tags! Nesta unidade, você aprendeu a usar a
maioria das tags para apresentação de texto e outras tags que
oferecem outras opções de formatação de texto e apresentação
de página. Você poderia parar agora e criar algumas páginas
web de boa qualidade. Mas, ainda, há muita coisa interessante a
aprender. Por isso, continue seus estudos. Vamos em frente!
Que tal você preparar uma tabela resumo com todas as tags
aprendidas até agora? Coloque o nome da tag, descrição e um
exemplo. Vamos tentar? E a cada nova tag, vá acrescentando
nesta sua tabela.
Unidade 4
121
Universidade do Sul de Santa Catarina
Atividades de autoavaliação
Caro aluno, leia o enunciado com atenção e responda à questão.
1. Até agora, você já aprendeu muita coisa sobre as tags e também criou
2 páginas em HTML (index.html e MinhaLista.html). Que tal abrir estes
arquivos e formatá-los, conforme o desejado, utilizando tipos de fontes
diferentes, estilos, cores, etc.? Enfim, aplique tudo que você já estudou
até o momento. Após a formatação do texto, na página index.html,
crie um link (vínculo) com a página MinhaLista.html. Verifique depois o
resultado no seu navegador, iniciando em index.html.
Saiba mais
Aprofunde-se sobre formatação em HTML, consultando as
seguintes referências:
WATRALL Ethan, SIARTO Jeff. Use a cabeça Web-Design.
São Paulo: Alta Books, 2009
<http://www.juliobattisti.com.br/tutoriais/ericogoncalves/
htmlbasico004.asp>
<http://www.vas-y.com/dicas/curso/html/2_3.htm>
122
unidade 5
Uso de Imagens, Painéis de
Fundo e Arquivos de Música
Objetivos de aprendizagem
„„ Identificar os tipos de imagens que você pode utilizar
na web.
„„ Compreender como e quando incluir imagens em uma
página na web.
„„ Criar vínculos com as imagens.
„„ Aprender a usar imagens para painéis de fundo lado a
lado.
„„ Inserir um arquivo de música na web.
Seções de estudo
Seção 1 A tag <img> e seus atributos
Seção 2 Referência de hipertexto com imagem
Seção 3 Painéis de fundo com imagens
Seção 4 Sugestões para um melhor uso das imagens
Seção 5 Arquivos de Áudio
5
Universidade do Sul de Santa Catarina
Para início de estudo
O HTML torna muito fácil para você a tarefa de mostrar
imagens dentro de um documento. Porém as imagens devem
estar em formato específico. Normalmente, as imagens mais
utilizadas em páginas web têm as terminações: .bmp, .jpg, .gif ou
.png.
Cada extensão de imagem possui suas vantagens e desvantagens.
Observe:
As imagens com terminação .bmp: têm tamanho muito grande,
o que gera lentidão no carregamento das páginas e não permite
transparência. A vantagem deste tipo de imagem é a facilidade
de edição sem a perda da qualidade, porém, com a evolução
tecnológica, está sendo bem pouco utilizada.
O formato jpg (ou jpeg) pode trabalhar com esquema de cores
de 24 bits, aceitando assim 16,8 milhões de cores. A qualidade
da imagem é boa, mas também não permite transparência. O
tamanho é bem reduzido, se comparado com o .bmp, mas ainda é
grande para páginas que utilizam muitas imagens.
Os gifs trabalham com apenas 256 cores, de forma que o
tamanho é o menor de todos os formatos, permitindo também
transparência e animações. É um dos formatos mais utilizados
na web justamente pela rapidez em carregar as imagens. Porém
o fato de utilizar apenas 256 cores deixa a qualidade da imagem
bem limitada.
O .png é interessante, porque consegue trabalhar com esquema
de 24 bits de cores, ou seja, 16,8 milhões de cores, suportando
também a transparência e com tamanho menor que o formato
.jpg, pois utiliza um algoritmo mais eficiente para compressão da
imagem. É um pouco maior que o .gif, por causa da qualidade da
imagem, que é bem superior. Atualmente, é um formato bastante
utilizado.
Hoje em dia, existem muitos programas de edição de imagens,
como por exemplo, o Adobe Photoshop, Paint Shop Pro, CorelDraw
etc., que fornecem meios de promover a conversão entre formatos
de imagens. Existem também programas freeware e shareware
para várias plataformas, destinados exatamente à conversão entre
formatos de imagens.
124
Linguagens de Programação I
Alguns editores de imagens tentarão gravar os
arquivos com extensões compostas por letras
maiúsculas (.GIF, .JPEG). Embora essas extensões
sejam corretas, há distinção entre letras maiúsculas
e minúsculas nos nomes das imagens, bem como
nos nomes de arquivo em HTML. Por isso GIF não é
a mesma extensão que gif. A grafia da extensão não
é importante quando se está realizando testes no
seu sistema local, mas será relevante quando você
transferir os seus arquivos HTML e imagens para o
servidor, onde seu site ficará hospedado. Por isso,
sempre que possível, utilize letras minúsculas.
Graças aos formatos .jpg, .gif e .png, é possível utilizar imagens
em diferentes aplicações, até mesmo na definição de layout das
páginas. A escolha do tipo de imagem não pode ser arbitrária,
devem ser levadas em consideração todas as vantagens e
desvantagens, principalmente no que se refere à qualidade e
tamanho.
Uma boa prática é utilizar .png ou .jpg para imagens fotográficas
e .gif para imagens criadas em computador ou desenhadas
(ícones, botões, etc...).
Os formatos de imagem explicados aqui são os mais utilizados e
compatíveis com os diversos tipos de navegadores, porém existem
vários outros tipos de imagens, cada um com características e
finalidades diferentes.
Seção 1 - A Tag <Img> e seus atributos
A inserção de imagens num documento faz-se com a tag <IMG>.
Esta tag tem conteúdo vazio, o que significa que ele apenas possui
atributos e não tem tag de fechamento. A tag <IMG> pode vir
acompanhada de diversos atributos, entre eles o SRC.
A escolha da imagem que será mostrada na página faz-se através
do atributo SRC (que é uma abreviação de “source” ou origem).
Este atributo indica o nome e o local onde pode ser encontrada a
Unidade 5
125
Universidade do Sul de Santa Catarina
pasta que contém a imagem que você deseja incluir - esse nome
deve ser digitado entre aspas. Esse é o atributo mais importante
da tag <IMG>.
A forma genérica mais simples de expressar a tag IMG e o seu
atributo SRC é a seguinte:
<IMG SRC=”url_imagem”>
Neste caso, a url_imagem aponta para o local onde se encontra a
pasta que contém a imagem. Pode, também, ser referenciada uma
imagem que esteja em um outro servidor (o que, logicamente, não
é conveniente). Por exemplo, se quisermos mostrar o ícone que
aparece na página da Unisul Virtual, devemos usar o URL:
https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif
Então o código ficaria assim:
<IMG SRC= “https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif”>
A imagem será desenhada no local que corresponde à tag <IMG>
dentro do documento HTML, claro que fazendo referência
àquele servidor.
Figura 5.1 – Exemplo do uso de imagem através de uma página na internet.
126
Linguagens de Programação 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 código acima no seu navegador, você precisa ter
a figura chamada amigos.jpg na pasta imagens, que se encontra
dentro da pasta onde está gravado o código HTML acima.
Vamos visualizar:
Figura 5.2 - Exemplo do uso de imagem no seu código HTML.
Observe que o nome de caminho referente ao arquivo utiliza
as mesmas regras de nomes de caminhos usadas pelo atributo
HREF em vínculos. Por isso um arquivo GIF denominado
“imagem.gif ”, contido na mesma pasta que o arquivo HTML,
poderá usar a seguinte tag:
<IMG SRC=“imagem.gif”>
Unidade 5
127
Universidade do Sul de Santa Catarina
Para um arquivo de imagem que esteja localizado em uma pasta
acima da pasta atual, utilize esta tag:
<IMG SRC=”../imagem.gif”>
E assim por diante! Use sempre as mesmas regras que utilizaria
para nomes de página na parte HREF da tag <A>, como já foi
estudado na unidade 3.
Quando o caminho não está correto ou o nome da figura está
errado, o que aparecerá no seu visualizador será algo assim:
Figura 5.3 –Exemplo do uso de imagem com caminho ou nome errado.
Se sua imagem não for carregada (e o seu navegador
apresentar um ícone esquisito no lugar dela), verifique,
antes, se você especificou corretamente o nome do
arquivo no código HTML. Se não for isso, examine o
arquivo de imagem para verificar se ela está realmente
no formato GIF ou JPEG e se tem a extensão de
arquivo apropriada.
Outros Atributos Básicos de Imagem
A seguir, você vê outros atributos básicos de imagem: ALT,
WIDTH e HEIGHT, BORDER, ALIGN, HSPACE e
VSPACE.
128
Linguagens de Programação I
ALT
De nada adianta você caprichar na produção de uma imagem,
se a pessoa que vê as páginas utiliza um navegador incapaz de
mostrar as imagens (sim, estes navegadores existem e são bastante
utilizados, principalmente o Lynx).
Outros usuários também ajustam o navegador para não carregar
imediatamente as imagens. Por causa de conexões lentas, algumas
pessoas preferem receber o texto e, depois, pedir as imagens.
Mas, para isso, elas precisam saber do que tratam as imagens.
Essa é a função do texto alternativo. Pode-se colocar o título ou
a melhor descrição possível de uma imagem utilizando o atributo
ALT. Veja a sintaxe a seguir:
<IMG SRC=”URL_imagem” ALT=”descrição_da_imagem”>
O texto alternativo descreve brevemente a imagem. Tal texto é
apresentado no lugar da imagem nos navegadores de texto ou
quando se desabilita o carregamento de imagens em navegadores
gráficos, como já citado. É recomendável que esteja sempre
presente, pois este texto será mostrado, em vez da imagem, caso o
navegador não consiga apresentá-la.
O texto acompanhado do ALT aparecerá quando o usuário
passar o cursor em cima da imagem. É uma legenda alternativa
para a imagem.
<IMG SRC= “https://minha.unisul.br/pa89prd/uni_imagens/
topoEsquerda.gif” alt= “Ícone Unisul Virtual”>
Unidade 5
129
Universidade do Sul de Santa Catarina
Figura 5.4 – Exemplo de imagem com o uso do atributo ALT.
Figura 5.5 – Exemplo de imagem não encontrada com o atributo ALT.
O atributo ALT deve ter uma descrição daquilo que a imagem
contém, para que seja possível compreender o seu conteúdo,
mesmo sem vê-la. A utilização do atributo ALT é recomendada,
porque melhora a acessibilidade das páginas. Este atributo pode
ser lido em voz alta pelo software de leitura utilizado por pessoas
que têm deficiências visuais. Nesses casos, sem o atributo ALT, o
conteúdo das imagens seria sempre um mistério.
130
Linguagens de Programação I
Desta forma,
<IMG SRC=”/icones/newred.gif” ALT=”Novo!”>
é apresentado nos navegadores gráficos assim:
e nos navegadores de texto assim:
[Novo!]
Se a imagem estiver em um diretório (ou pasta) diferente do
arquivo de texto, como no exemplo acima, é preciso especificá-lo
na referência. Recomenda-se que as imagens sejam colocadas em
um diretório separado, para facilitar a manutenção dos arquivos.
WIDTH e HEIGHT
WIDTH e HEIGHT são atributos de dimensão da imagem em
pixels. Grande parte dos editores HTML coloca automaticamente
os valores destes atributos, quando indicam a inserção de uma
imagem. Veja a sintaxe abaixo:
<IMG SRC=”imagem” ALT=”descrição” WIDTH=”largura” HEIGHT=”altura”>
No exemplo abaixo, definimos as dimensões da imagem, veja:
<IMG SRC=”imagens/amigos.jpg” ALT=”Meus amigos” WIDTH=”100” HEIGHT=”50”>
Unidade 5
131
Universidade do Sul de Santa Catarina
Vamos visualizar o resultado no seu navegador?
Figura 5.6 – Exemplo de imagem com atributos WIDTH e HEIGHT.
Uma das vantagens de se usarem esses atributos é que o
navegador pode montar mais rapidamente as páginas, por saber,
de antemão, o espaço que deverá ser reservado a elas. Por isso,
se as dimensões da imagem forem colocadas na referência, o
usuário terá a impressão de que a página foi carregada mais
rápido. Fornecendo as dimensões, o navegador reserva o espaço
para a imagem e vai carregando o texto, para que o usuário possa
começar a ler. Depois de carregado o texto, as imagens começam
a ser mostradas.
BORDER
Com o atributo BORDER, é possível colocar uma borda em
volta da imagem. O valor da borda é expresso em pixels.
Aqui você vê uma imagem:<P>
<IMG SRC=“sol.gif” BORDER=”2”>
Note que a imagem...<P>
Veja você o resultado no seu navegador, não se esquecendo
de criar uma imagem com o nome de sol.gif em um editor de
imagens. O resultado deve ser este:
132
Linguagens de Programação I
Figura 5.7 - Exemplo da utilização de borda em imagens.
ALIGN
A tag <IMG> contém também um atributo ALIGN, que permite
alinhar a imagem com a parte superior ou inferior do texto
existente, ao redor ou com outras imagens contidas na mesma
linha. Sua sintaxe é:
<IMG SRC=”imagem” ALT=”descrição” ALIGN=”alinhamento”>
A HTML 2.0 define três valores básicos para o atributo
ALIGN, que são os seguintes:
ALIGN=
Definição
top
alinha a parte superior da imagem com a parte superior
da linha.
middle
alinha o centro da imagem com a parte central da linha.
bottom
alinha a parte inferior da imagem com a parte inferior da
linha de texto.
Vamos verificar os atributos de alinhamento e seus resultados
logo a seguir.
Unidade 5
133
Universidade do Sul de Santa Catarina
<IMG ALIGN=”top” SRC=”imagem.jpg” ALT=”imagem”>Alinha
o texto adjacente com o topo da imagem, embora com linhas
compridas o resultado não seja muito bom. Pois provavelmente
a próxima linha do texto irá para a linha abaixo da imagem.
Observe o resultado no seu navegador. É semelhante ao que está
sendo visualizado a seguir?
Figura 5.8 - Exemplo de alinhamento de texto e imagem.
Vamos testar agora os dois códigos abaixo? Qual o resultado em seu
navegador?
<IMG ALIGN=”middle” SRC=”imagem.jpg”
ALT=”imagem”>Alinha o texto adjacente com o meio da
imagem, embora com linhas compridas o resultado não seja
muito bom. Pois provavelmente a próxima linha do texto irá
para a linha abaixo da imagem.
Visualização:
Figura 5.9 - Exemplo de alinhamento de texto e imagem.
134
Linguagens de Programação 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 após a imagem.
Visualização:
Figura 5.10 - Exemplo de alinhamento de texto e imagem.
Quando não especificado o atributo ALIGN, o padrão utilizado
pelo navegador é o bottom. A inclusão de uma imagem em uma
linha funciona bem, quando você tem apenas uma linha de texto.
Se você tiver várias linhas de texto e incluir uma imagem no meio
dessas linhas, todo o texto ao redor da imagem (exceto o da primeira
linha) será apresentado acima e abaixo dessa imagem, como nos
exemplos acima.
E, se você quiser promover o retorno automático de várias linhas
de texto ao redor de uma imagem? Com a HTML 2.0 isso não é
possível. Você está, então, restrito a uma única linha de texto em
cada lado da imagem, o que limita os tipos de projetos que você pode
realizar.
Para contornar essa limitação, novos valores para o atributo ALIGN
da tag <IMG> foram incorporados na HTML 3.2: left e right.
ALIGN=
Definição
right
alinha uma imagem na margem direita.
left
alinha uma imagem na margem esquerda.
Unidade 5
135
Universidade do Sul de Santa Catarina
Mas o uso desses atributos faz também com que todo o texto
localizado após a imagem seja apresentado no espaço à direita
ou à esquerda dessa imagem, dependendo do alinhamento da
margem. Veja os exemplos a seguir:
<IMG ALIGN=”right” SRC=”imagem.jpg”
ALT=”imagem”>ALIGN=RIGHT Alinha imagem à direita, e tudo
o que houver ao redor (texto, outras imagens) a partir do topo
da imagem.
Confira o resultado:
Figura 5.11 - Exemplo de alinhamento de texto e imagem.
<IMG ALIGN=”left” SRC=”imagem.jpg”
ALT=”imagem”>ALIGN=LEFT Alinha imagem à esquerda, e tudo
o que houver ao redor (texto, outras imagens) a partir do topo
da imagem.
Visualização:
Figura 5.12 - Exemplo de alinhamento de texto e imagem.
Para ter duas imagens, uma em cada margem, numa mesma
136
Linguagens de Programação 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...
Isso resulta em:
Figura 5.13 - Exemplo de visualização de texto entre duas imagens.
Você pode incluir qualquer texto HTML após uma imagem
alinhada, e será promovido o retorno automático do texto no
espaço existente entre a imagem e a margem, ou entre 2 imagens,
como no exemplo anterior. O navegador preenche o espaço com
texto até a parte inferior da imagem e, em seguida, continua a
preencher com texto o espaço existente abaixo dela.
No entanto, quando se usam os atributos ALIGN=LEFT ou
ALIGN=RIGHT, todo o texto imediatamente posterior é
puxado para o lado da imagem. Se for necessário interromper o
fluxo de texto ao lado da imagem, pode-se usar a tag <BR> com o
atributo CLEAR=ALL, conforme exemplo abaixo:
<IMG align=”left” SRC=”imagem.jpg” alt=”imagem”><IMG
align=”right” SRC=”imagem.jpg” alt=”imagem”>...e agora
você pode escrever à vontade entre as imagens! O texto
que você desejar, sem a linha ir para abaixo da imagem...<BR
CLEAR=”all”>Mas agora eu quero interromper essa linha e
jogar abaixo das imagens.
Unidade 5
137
Universidade do Sul de Santa Catarina
Visualização:
Figura 5.14 - Exemplo de alinhamento de texto e imagem.
Note que o texto está contornando as imagens, mas somente até
determinado ponto:<BR CLEAR=”all”>. A partir deste ponto, o
texto é jogado para a próxima margem livre, em qualquer um dos
lados da janela.
HSPACE e VSPACE
Com a capacidade de promover o retorno automático do texto
ao redor de uma imagem, é possível que você queira também
ajustar o espaço existente ao redor dessa imagem. Você pode
controlar o espaço em volta da imagem, colocando o valor
em pixels da margem desejada. É possível definir as margens
separadamente, ou em conjunto. Os atributos HSPACE e
VSPACE (introduzidos na HTML 3.2) permitem isso.
O atributo VSPACE controla o espaço acima e abaixo da
imagem. Ou seja: os textos que forem escritos ao redor da
imagem não ficarão grudados nela. A sintaxe é a seguinte:
<IMG SRC=”imagem” VSPACE=”espaçovertical”>
O atributo HSPACE controla o espaço à esquerda e à direita
da imagem. Ou seja: os textos que forem escritos ao redor da
imagem não ficarão grudados nela. A sintaxe é a seguinte:
<IMG SRC=”imagem” HSPACE=”espaçohorizontal”>
138
Linguagens de Programação I
Esses atributos surgiram para melhorar ainda mais a apresentação
das imagens junto com os textos. Também são conhecidos como
atributos de moldura.
O efeito desses atributos pode ser percebido nos textos a seguir.
No primeiro texto, as imagens não têm atributos de moldura (é
fácil notar como o texto fica “grudado” na imagem):
...e agora você pode escrever<IMG align=”left” SRC=”imagem.
jpg” alt=”imagem” WIDTH=”138” HEIGHT=”65”>à vontade entre as
imagens! O texto que você desejar, sem a linha ir para abaixo da
imagem...... ter um texto posicionado no ponto em que a margem
<IMG align=”right” SRC=”imagem.jpg” alt=”imagem” WIDTH=”110”
HEIGHT=”71”>direita fica livre, com ou no ponto em que a margem
esquerda fica livre, com. Mas agora eu quero interromper essa linha e
jogar abaixo das imagens.
Veja o resultado do código acima no seu navegador:
Figura 5.15 - Exemplo de alinhamento de texto e imagem.
Neste segundo texto são usadas, respectivamente, as seguintes
formatações:
<IMG align=”left” SRC=”imagem.jpg” alt=”imagem”
WIDTH=”138” HEIGHT=”65” VSPACE=”30”>
e
<IMG align=”right” SRC=”imagem.jpg” alt=”imagem”
WIDTH=”110” HEIGHT=”71” HSPACE=”40”>
Unidade 5
139
Universidade do Sul de Santa Catarina
Neste segundo texto, a primeira imagem surgirá com
espaçamento vertical em relação ao texto; e a segunda imagem,
com espaçamento horizontal em relação ao texto. Veja o resultado
mostrado no navegador abaixo:
Figura 5.16 - Exemplo de alinhamento de texto e imagem.
Vamos testar?
Que tal, agora, você utilizar os alinhamentos em conjunto, como
no exemplo abaixo? Faça um teste no seu navegador. Crie uma
imagem chamada imagem.jpg e guarde na mesma pasta do seu
arquivo que contém o código HTML abaixo:
...e agora você pode escrever
<IMG align=”left” SRC=”imagem.jpg” alt=”imagem” WIDTH=”118”
HEIGHT=”65” VSPACE=”30” HSPACE=”30”>à vontade entre as
imagens! O texto que você desejar, sem a linha ir para abaixo da
imagem......
ter um texto posicionado no ponto em que a margem <IMG align=”right”
SRC=”imagem.jpg” alt=”imagem” WIDTH=”100”
HEIGHT=”71” HSPACE=”30” VSPACE=”30” border=”3”>direita fica livre, com
ou no ponto em que a margem esquerda fica livre, com.
Mas agora eu quero interromper essa linha e jogar abaixo das imagens.
Acrescentando mais texto pois assim
fica mais visível o uso dos atributos
HSPACE e VSPACE. Podemos observar que as imagens não aparecem tão
grudadas agora ao texto. Isso em função
dos valores <br clear=”all”>
atribuídos aos atributos HSPACE e VSPACE utilizados em conjunto na
mesma tag IMG.Na imagem à direita foi colocada uma borda com
espessura 3.
140
Linguagens de Programação I
O resultado no navegador do Internet Explorer é este:
Figura 5.17 - Exemplo de alinhamento de texto e imagem.
Cada um desses atributos (HSPACE e VSPACE) adiciona
espaço nas duas faces da imagem (em cima e em baixo e à direita
e à esquerda). Portanto não há como definir uma margem maior
apenas à esquerda ou somente na parte inferior.
Seção 2 - Referência de hipertexto com imagem
Uma imagem pode funcionar como um vínculo? É evidente que
sim! Se você incluir a tag <IMG> entre as partes de abertura
e de fechamento de uma tag de vínculo (<A>), essa imagem
funcionará como um ponto ativo (que pode ser selecionado com
um clique) referente ao próprio vínculo. A sintaxe é basicamente
a seguinte:
<A href=”URL”>
<IMG src=”nome da imagem” >
</A>
Se uma frase é marcada como âncora de um link, então ela se
apresenta sublinhada; se uma imagem se faz de âncora, então ela
Unidade 5
141
Universidade do Sul de Santa Catarina
ganha uma borda que indica a sua condição. Neste caso, em vez
de colocar o link em um texto, você estará colocando o link em
uma imagem. Veja o exemplo:
<HTML>
   <HEAD>
       <TITLE>Exemplo Link em Imagem</TITLE>
   </HEAD>
   <BODY BGCOLOR=”black” TEXT=”yellow”>
       <A HREF=”pagina2.html”>
<IMG SRC=”imagens/amigos.jpg”>
</A>
   </BODY>
</HTML>
Vamos verificar o exemplo acima no seu navegador?
Figura 5.18 – Exemplo de imagem com link.
Se você quiser uma borda mais larga, siga o exemplo:
<A HREF=”URL”><IMG SRC=”sol.gif” ALT=”descrição” BORDER=”4”></A>
142
Linguagens de Programação I
E confira o resultado:
Figura 5.19 - Exemplo do uso de imagem como link.
Porém, por questões de apresentação, nem sempre interessa
termos essa borda ao redor da imagem. Assim, com o atributo
BORDER, você pode controlar esse detalhe.
<A HREF=”URL”><IMG SRC=”sol.gif” ALT=”descrição” BORDER=”0”></A>
Deste modo, aparecerá no navegador:
Figura 5.20 - Exemplo do uso de imagem sem borda.
Portanto a borda pode ser apresentada tanto em imagens que não
são âncora de links como em links.
Se você incluir uma imagem e um texto na âncora, a imagem e o
Unidade 5
143
Universidade do Sul de Santa Catarina
texto se tornarão pontos ativos que conduzirão à mesma página.
Veja o exemplo:
<A href=”http://www.bol.com.br”>
<IMG src=”sol.gif” border=”0” alt=”BOL”>Clique aqui para ir à
página do BOL
</A>
A visualização deve ser esta:
Figura 5.21 - Exemplo de alinhamento de texto e imagem.
As imagens que são pontos ativos referentes a vínculos aparecem
com uma borda ao redor, como na figura 5.18.
Ao utilizar as imagens, tenha em conta que elas
podem aumentar consideravelmente o tempo que
é preciso esperar, para se verem os conteúdos das
páginas. Por isso, use-as com cuidado!
144
Linguagens de Programação I
Seção 3 - Painéis de fundo com imagens
Você já deve ter visto páginas na internet com imagens de
fundo. Esta seção consiste no desenvolvimento da imagem como
painel de fundo para as suas páginas HTML, em vez de utilizar
simplesmente um fundo de determinada cor. Quando você usa
uma imagem em um painel de fundo, essa imagem é apresentada
“lado a lado”. Ou seja, esta imagem é repetida em fileiras, para
preencher a janela do navegador.
Para criar um painel de fundo, você precisará de uma imagem,
a qual será repetida para compor esse painel. De modo geral, ao
criar uma imagem para essa finalidade, você precisará verificar se
o padrão escolhido flui harmoniosamente quando disposto lado a
lado.
Normalmente, você pode realizar com cautela algumas operações
de edição na imagem, através da utilização do seu programa
preferido de edição de imagens, para ter certeza de que as
bordas estão alinhadas. O objetivo é que as bordas coincidam
perfeitamente umas com as outras, de modo a não haver emendas
entre as imagens, quando você as apresentar lado a lado. Você
também pode experimentar usar pacotes de clip-art destinados
a painéis de fundo ou padrões lado a lado, que, em geral, são
projetados especificamente para serem apresentados dessa forma.
Quando você tiver essa imagem, tudo o que você precisará para
criar um painel de fundo é do atributo BACKGROUND, que
faz parte da tag <BODY>. O valor desse atributo é um nome de
arquivo ou URL que corresponda ao seu arquivo de imagem,
como no seguinte exemplo:
<BODY background=”fundo.gif”>
Unidade 5
145
Universidade do Sul de Santa Catarina
O resultado é visualizado assim:
Figura 5.22 - Exemplo de painel de fundo.
Caso o desenvolvedor necessite colocar uma imagem de fundo sem
que a mesma seja repetida, utilizará técnicas de folhas de estilo
(CSS), que permitem a configuração visual de toda a página. O
CSS será abordado, ainda neste material, nas próximas unidades.
Seção 4 - Sugestões para um melhor uso das imagens
O uso de imagens é hoje um dos assuntos mais discutidos entre
usuários e provedores de páginas da web. Todo aquele que deseja
projetar páginas da web, incluindo imagens maiores e mais claras
para tirar maior proveito dos recursos gráficos da web, deve estar
ciente de que sempre existirá alguém com uma conexão lenta de
rede, que estará implorando por menos imagens, para que seu
navegador não leve horas para carregar uma única página.
Ao desenvolver websites, você deve considerar esses aspectos:
procure alcançar o ponto de equilíbrio entre a criação de uma
página da web bem estruturada e colorida e a necessidade de
transmitir as suas informações a todo o seu público – e isso
inclui, também, as pessoas que não têm acesso às suas imagens.
Atente para as seguintes sugestões (LEMAY, 1998):
146
Linguagens de Programação I
„„ Você precisa realmente dessa imagem? - Para cada imagem
que você inserir na página da web, reflita sobre o motivo pelo
qual a está incluindo. Essa imagem acrescenta algo ao projeto da
página? Ela fornece informações que poderiam ser substituídas
por texto? Ou você simplesmente a incluiu porque gosta do
resultado produzido? Uma página simples, com apenas algumas
imagens de ícones, costuma produzir um efeito melhor do que
uma página que apresenta uma imagem enorme, sofisticados
botões tridimensionais e marcadores sombreados.
„„ Mantenha as imagens pequenas! - Uma imagem pequena
leva menos tempo para ser transferida na internet. Por isso, o
uso dessas imagens faz a página da web ser carregada mais
rapidamente e causa menos frustração aos usuários que
tentam lê-la em uma conexão lenta de rede. Para criar imagens
pequenas, você pode reduzir as dimensões físicas reais dessas
imagens na tela. Pode, também, criar tamanhos de arquivos
menores para as suas imagens através da redução do número de
cores. Uma boa regra consiste em procurar manter as imagens
com menos de 20KB. Esse tamanho pode parecer pequeno,
mas um arquivo simples de 20 KB leva quase 20 segundos para
ser carregado por um download em uma conexão de 14,4 Kbps.
Multiplique esse tempo pelo número de imagens contidas na
página da web, e você verá que a carga dessa página pode levar
um tempo considerável.
„„ Procure reutilizar imagens! - Procure reutilizar as mesmas
imagens o máximo possível, em páginas isoladas e em várias
páginas. Se, por exemplo, você tiver imagens como marcadores,
use a mesma para todos os marcadores, em vez de usar diversas
imagens. A reutilização de imagens proporciona o projeto
padronizado das páginas, que faz parte da criação de uma
“identidade visual” global para o seu site. E o mais importante
é que, assim, o seu navegador tem de fazer apenas uma vez o
download delas.
„„ Forneça alternativas às imagens! - Se você ainda não estiver
utilizando o atributo ALT nas suas imagens, passe a usá-lo. Esse
atributo é muito útil, pois permite que a sua página da web seja
lida por navegadores de texto.
Unidade 5
147
Universidade do Sul de Santa Catarina
Seção 5 - Arquivos de Áudio
Você pode incluir em sua página um som de fundo. Com isso,
sempre que alguém acessá-la, este som será tocado. Desta forma,
você pode fazer seu site ter mais recursos e personalidade.
Os arquivos de som ideais para serem inseridos em uma home
page são aqueles no formato MIDI (.MID), mas você também
pode incluir sons do tipo WAVE (.WAV).
Existem duas maneiras de colocar músicas em seu site. A primeira
é com a tag <BGSOUND>, que só é reconhecida pelo Internet
Explorer. Para utilizar esta tag, siga o exemplo:
<BGSOUND src=”arquivo.mid”>
Onde:
„„
arquivo.mid é o arquivo de música.
Caso você queira que a música se repita, adicione o
atributo loop=”infinite”.
A segunda maneira de adicionar música ao seu site é com a tag
<EMBED> que, por ser reconhecida pelo Internet Explorer e
Netscape, é a mais recomendada. Para utilizá-la, siga o exemplo:
<EMBED src=”arquivo.mid”>
Essa tag também pode ser usada com alguns atributos. Veja o
exemplo:
<embed src=”nome da música” autostart=”true” loop=”10”>
148
Linguagens de Programação I
Onde:
„„
„„
„„
Em "nome da música", você coloca o nome e caminho do
arquivo a mid ou wav.
Em "loop", você coloca o número de vezes que o som será
repetido.
Em "autostart", você define se quer que a música comece
a tocar sozinha (atributo TRUE). Caso contrário, você
deve colocar “FALSE”, opção na qual o usuário terá que
clicar no botão de “play” para ouvir a música.
Se você quiser que a música fique se repetindo infinitamente,
basta colocar “infinity” no lugar de um número. Não é necessário
colocar “</embed>” neste caso.
O Netscape e o Internet Explorer têm algumas
diferenças em seu sistema e, por isso, em algumas
versões do Netscape o som pode não tocar.
É recomendado usar arquivos mid por serem bem
menores que os wavs.
Unidade 5
149
Universidade do Sul de Santa Catarina
Síntese
Um dos principais recursos que fazem a WWW se destacar
em relação aos outros documentos de informações da internet
consiste na capacidade dos documentos da web conterem imagens
em cores. Com certeza, foi graças a essas imagens que a web se
tornou tão conhecida e utilizada em um curto período de tempo.
Para serem inseridas em páginas da web, as imagens precisam
estar no formato GIF, PNG ou JPG e ter dimensões
suficientemente reduzidas para poderem ser carregadas
rapidamente por download em uma conexão lenta.
Nesta unidade, você também aprendeu que a tag <IMG>
da HTML permite inserir uma imagem na página da web,
utilizando atributos básicos, que contam com o suporte da
HTML padrão:
Tipo
Sintaxe
Exemplo
Localização
SRC=”localização”
<IMG SRC=”linkdaimagem.tipo”>
Comprimento
WIDTH=”tamanho” (em pixels
ou % da página)
<IMG SRC=”linkdaimagem.tipo” WIDTH=”10””>
Altura
HEIGHT=”tamanho” (em pixels
ou % da página)
<IMG SRC=”linkdaimagem.tipo” HEIGHT=”20”>
Borda
BORDER=”tamanho” (em
pixels)
<IMG SRC=”linkdaimagem.tipo” BORDER=”2”>
Alternativa
ALT=”texto” (usa-se em caso de
não aparecer a imagem)
<IMG SRC=”linkdaimagem.tipo” ALT=”Minha Foto”>
Alinhamento
ALIGN=”tipo” (o modo como
a imagem será posicionada
verticalmente em relação ao
texto existente ao redor)
<IMG SRC=”linkdaimagem.tipo” ALIGN=”top”>
<IMG SRC=”linkdaimagem.tipo” ALIGN=”middle”>
<IMG SRC=”linkdaimagem.tipo” ALIGN=”bottom”>
Além das imagens, você aprendeu a incluir painéis de fundo
compostos por padrões ou imagens lado a lado, através do
atributo BACKGROUND, da tag <BODY>, com a imagem que
será usada para compor o painel.
150
Linguagens de Programação I
Atividades de autoavaliação
A partir de seus estudos, leia com atenção e resolva a atividade
programada para a sua autoavaliação.
1. Que tal acrescentar como sua atividade de autoavaliação um arquivo
mid em sua página index.html?
Saiba mais
Você pode saber mais sobre o assunto estudado nesta unidade,
consultando as seguintes referências:
LEMAY, Laura. Aprenda a criar páginas web com HTML e
XHTML em 21 dias. São Paulo: Makron Book Editora, 2002.
E os seguintes sites:
<http://www.silicio.com.br/html/dicas/abertura.html>(Silício: o
portal brasileiro na internet)
<http://www.w3schools.com/html/html_images.asp> (HTML
Images)
Unidade 5
151
unidade 6
Tabelas
Objetivos de aprendizagem
„„ Definir tabelas em HTML.
„„ Criar legendas, células de cabeçalho e de dados.
„„ Modificar o alinhamento da célula.
„„ Criar células que ocupam várias linhas ou colunas.
„„ Trabalhar com cores nas tabelas.
„„ Elaborar tabelas nos seus documentos da web.
Seções de estudo
Seção 1 Elementos básicos de tabelas
Seção 2 Alinhamento da tabela e das células
Seção 3 Dimensões da tabela
Seção 4 Cor em tabelas
6
Universidade do Sul de Santa Catarina
Para início de estudo
As tabelas são construções avançadas em HTML, que permitem
a você organizar um texto, imagens e outro tipo de conteúdo
HTML em linhas e colunas, com ou sem bordas. Elas podem
ser usadas não apenas para apresentar dados em um formato
tabular, mas também para a definição do layout da página e para
o controle do posicionamento dos vários elementos HTML em
uma página. As tabelas tornaram-se tão conhecidas que a maioria
dos principais navegadores hoje oferece suporte para esse recurso.
A formatação de tabelas foi adotada bem antes de sua inclusão
na definição de HTML. A manipulação de tabelas, mesmo
em editores, é trabalhosa. A maior diferença entre tabelas em
HTML e em editores como o MS Word, entretanto, é o fato das
tabelas em HTML serem definidas apenas em termos de linhas,
e não de colunas. Mas isto será percebido no decorrer desta
unidade.
Tabelas implementam um conceito importante de layout: as
grades, segundo as quais organizamos textos e ilustrações de
maneira harmoniosa.
Como já foi possível perceber, as tabelas contêm textos, listas,
parágrafos, imagens, formulários e várias outras formatações
- inclusive outras tabelas. Novas versões de HTML e de
navegadores populares vêm acrescentando diversos atributos às
tabelas e nosso objetivo aqui é saber lidar com a maioria desses
recursos disponíveis.
Cientes dessa possibilidade, vamos adiante!
154
Linguagens de Programação I
Seção 1 - Elementos básicos de tabelas
Para criar tabelas em HTML, você deve definir as partes de sua
tabela e os elementos HTML a serem inseridos. Em seguida,
delimite essas partes com o código HTML de tabela. Por último,
aprimore o aspecto visual da tabela através de alinhamentos,
bordas e células coloridas.
Antes de entrarmos no código HTML propriamente dito para
criar uma tabela, vamos definir alguns termos, para que você
entenda o que será descrito.
„„ Legenda - indica o assunto ao qual a tabela se refere, como por
exemplo, “Estatísticas das Eleições”. As legendas são opcionais.
„„ Cabeçalhos da tabela - identificam as linhas ou as colunas, ou
ambas. Em geral, os cabeçalhos da tabela são apresentados em
uma fonte maior ou enfatizada, de alguma forma diferente em
relação ao restante da tabela. Os cabeçalhos da tabela também
são opcionais.
„„ Dados da tabela - consistem nos valores que compõem a
tabela. A combinação dos cabeçalhos com os dados resulta na
parte essencial da tabela.
„„ Células da tabela - consistem em cada um dos quadrados que
a compõem. Uma célula pode conter dados normais de tabela
ou um cabeçalho de tabela.
Feitas estas considerações preliminares, vamos aprender algumas
tags próprias para a formatação da tabela:
A tag <TABLE>
Para criar uma tabela em HTML, utilize as tags <TABLE>...</
TABLE> que contém o código referente a uma legenda e o
conteúdo da própria tabela.
Unidade 6
155
Universidade do Sul de Santa Catarina
O atributo mais comum da tag <TABLE> é o atributo
BORDER, que indica a apresentação da borda. Veja o exemplo:
<TABLE BORDER=”borda”>
...
</TABLE>
Definir BORDER= “0” significa que a borda não tem largura e,
portanto, não é apresentada. BORDER= “1” cria uma borda de
um pixel de largura, BODER= “2” cria uma borda de 2 pixels de
largura, e assim por diante.
Além disso, se você omitir o atributo BORDER, os navegadores
não deverão apresentar uma borda. As tabelas sem borda são úteis
quando você deseja usar a estrutura da tabela para fins de layout,
mas não quer, necessariamente, apresentar a estrutura de uma
tabela na página.
Linhas e células
Entre as tags <TABLE>...</TABLE> você define o conteúdo da
tabela. As tabelas são especificadas linha por linha em HTML,
e a definição de cada linha contém definições referentes a todas
as células dessa linha. Por isso, para definir uma tabela, você
começa definindo a primeira linha e cada uma de suas células.
Em seguida, define a segunda e suas respectivas células e assim
por diante. As colunas são calculadas automaticamente, com base
na quantidade de células de cada linha.
Cada linha da tabela é indicada pela tag <TR> e termina a tag de
fechamento </TR>. Cada linha da tabela, por sua vez, tem várias
células, que são indicadas pelas tags <TH>...</TH> (para células
de cabeçalho) e <TD>...</TD> (para células de dados).
Você pode ter quantas linhas quiser e quantas células forem
necessárias em cada linha, para compor as suas colunas. Mas
deve verificar se cada linha tem o mesmo número de células, para
que as colunas fiquem alinhadas.
156
Linguagens de Programação I
Legendas
As legendas de tabela informam ao leitor o assunto da tabela.
Embora você possa simplesmente usar um parágrafo normal
ou um cabeçalho como um rótulo para a sua tabela, a tag
<CAPTION> tem justamente essa finalidade de legenda.
Mas o que fazer, se você não quiser usar uma legenda? Você não
precisa incluí-la. As legendas são opcionais.
A tag <CAPTION> é incluída na tag <TABLE>, antes das
linhas da tabela, e contém o título da tabela. Ela é fechada pela
tag </CAPTION>.
O atributo ALIGN da legenda determina o seu alinhamento.
Por padrão, a legenda é colocada na parte superior da tabela
(ALIGN= “top”).
Vejamos o exemplo de uma tabela simples com legenda:
<TABLE BORDER=”4”>
<CAPTION>Primeiro exemplo</CAPTION>
<TR> <TH>Coluna 1</TH><TH>Coluna 2</TH> </TR>
<TR> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> </TR>
<TR> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> </TR>
</TABLE>
Visualize agora:
Figura 6.1 – Exemplo de visualização de tabela com legenda por coluna.
Unidade 6
157
Universidade do Sul de Santa Catarina
A tag <TH> indica uma célula que também é um cabeçalho da
tabela, e a tag <TD> indica uma célula comum da tabela (TD
significa Table Data = dados da tabela). Os cabeçalhos geralmente
são apresentados de forma diferente das células da tabela, como
por exemplo, em uma fonte em negrito.
O exemplo anterior mostra um cabeçalho apresentado na borda
superior da tabela, através da tag <TH> incluída na primeira
linha. Para apresentar os cabeçalhos na borda esquerda da tabela,
inclua cada uma das tags <TH> na primeira célula de cada linha,
como neste exemplo:
<TABLE BORDER=”4”>
<CAPTION>Primeiro exemplo</CAPTION>
<TR>
<TH>Linha 1</TH>
<TD>linha 1, coluna 1</TD>
</TR>
<TR>
<TH>Linha 2</TH>
<TD>linha 2, coluna 1</TD>
</TR>
</TABLE>
A visualização fica assim:
Figura 6.2 – Exemplo de visualização de tabela com legenda por linha.
158
Linguagens de Programação I
Os cabeçalhos e os dados da tabela podem conter
qualquer texto ou código HTML, ou ambos, incluindo
vínculos, listas, formulários, imagens e outras tabelas.
Células vazias
E se você quisesse ter uma célula sem qualquer conteúdo? Isto é
simples. Basta definir uma célula com uma tag <TH> ou <TD>
sem especificar texto algum, como neste exemplo:
<TABLE BORDER=3>
<TR>
<TD></TD>
<TD>20</TD>
<TD>30</TD>
</TR>
</TABLE>
Às vezes, uma célula vazia deste tipo é apresentada, como se a
célula não existisse:
Figura 6.3 – Exemplo de visualização de tabela com a primeira célula inexistente.
Unidade 6
159
Universidade do Sul de Santa Catarina
Se você quiser forçar a apresentação de uma célula vazia, pode
incluir uma quebra de linha nessa célula, sem inserir texto algum:
<TABLE BORDER=3>
<TR>
<TD><BR></TD>
<TD>20</TD>
<TD>30</TD>
</TR>
</TABLE>
No navegador fica assim:
Figura 6.4 – Exemplo de visualização de tabela com a primeira célula vazia.
160
Linguagens de Programação I
Seção 2 - Alinhamento da tabela e das células
Nesta seção, você vê como as tags auxiliam no alinhamento da
tabela e das células.
Alinhamento da tabela
Os elementos dentro da tabela podem ser alinhados da mesma
forma que um parágrafo comum. Por padrão, as tabelas são
apresentadas em uma linha no lado esquerdo da página, com o
restante do texto acima ou abaixo da tabela.
No entanto, ao usar o atributo ALIGN, você pode alinhar as
tabelas na margem esquerda ou direita e promover o retorno
automático do texto ao redor delas, exatamente como faria com
as imagens.
As linhas e células podem ter alinhamentos definidos através dos
atributos:
„„ ALIGN
= alinhamento horizontal
„„ VALIGN
= alinhamento vertical
Esses atributos devem ser usados dentro das tags <TR> e <TD>
(além de <TH>, se for o caso). Por padrão, as células de dados são
alinhadas:
„„ no
sentido horizontal: alinhamento à esquerda
„„ no
sentido vertical: alinhamento no centro da célula
Unidade 6
161
Universidade do Sul de Santa Catarina
Alinhamento da célula
Quando as suas linhas e células estiverem na posição adequada
e a tabela estiver alinhada corretamente na página, você poderá,
ainda, alinhar os dados contidos em cada célula para obter o
melhor efeito possível com base no conteúdo da sua tabela. As
tabelas oferecem várias opções para o alinhamento dos dados
contidos nas células, tanto na horizontal como na vertical.
Alinhamento horizontal:
„„ ALIGN=”LEFT”:
alinha o conteúdo à esquerda.
„„ ALIGN=”RIGHT”:
alinha o conteúdo à direita.
„„ ALIGN=”CENTER”:
alinha o conteúdo ao centro.
Alinhamento vertical:
„„ VALIGN=”BASELINE”:
mantém as linhas de texto com o
mesmo alinhamento (para ser usado dentro de <TR> ou no
primeiro <TD> de uma linha).
„„ VALIGN=”TOP”:
alinha o conteúdo no topo.
„„ VALIGN=”MIDDLE”:
alinha o conteúdo ao centro.
„„ VALIGN=”BOTTOM”:
alinha o conteúdo na base da célula.
Veja como esses alinhamentos funcionam nas células:
<TD ALIGN=”alinhamento_horizontal”>Texto da célula</TD>
<TD VALIGN=”alinhamento_vertical”>Texto da célula</TD>
162
Linguagens de Programação I
O alinhamento pode ser assim resumido no quadro abaixo:
Alinhamento
Horizontal
Alinhamento
Vertical
ALIGN=”LEFT”
ALIGN=”CENTER”
ALIGN=”RIGHT”
VALIGN=”TOP”
VALIGN=”MIDDLE”
VALIGN=”BOTTOM”
A tabela acima foi feita especialmente para mostrar as
diferenças entre os alinhamentos. Uma tabela comum
ajusta o tamanho de suas células ao conteúdo, desta
seguinte forma:
Confira a visualização:
Figura 6.5 – Exemplo de uma tabela.
Vamos utilizar um texto mais longo na segunda célula da
segunda coluna, para demonstrar o alinhamento padrão.
<TABLE BORDER=”1”>
<TR>
<TH>Título 1</TH>
<TH>Título 2</TH>
</TR>
<TR>
<TD>Célula 1</TD>
<TD><B>Célula 2</B><P>
Quando existe um texto longo, a célula é
expandida até à margem da janela do navegador.
Para controlar a apresentação de texto dentro da
tabela, pode-se modificar as dimensões da célula.
</TD>
</TR>
</TABLE>
Unidade 6
163
Universidade do Sul de Santa Catarina
A visualização é esta:
Figura 6.6 – Exemplo de alinhamento de tabela.
Observe que a largura da coluna da direita foi ampliada para
que o texto da célula 2 aproveitasse até o final da margem do
navegador. Se a largura da janela do navegador for diminuída,
também diminui a largura da segunda coluna.
Vamos, agora, melhorar a aparência da tabela ajustando a largura
da célula 2 em 300 pixels. Assim, a largura de toda a segunda
coluna será ajustada. Aproveitamos este exemplo para alinhar o
texto da célula 1 no topo e mudar a largura da borda da tabela.
Se você observar, também as células de cabeçalho por padrão são
centralizadas verticalmente e horizontalmente:
<TABLE BORDER=”3”>
<TR>
<TH>Título 1</TH>
<TH>Título 2</TH>
</TR>
<TR>
<TD valign=”top”>Célula 1</TD>
<TD width=”300”><B>Célula 2</B><P>
A largura de cada célula pode ser controlada
individualmente utilizando-se o atributo
<tt>width</tt>.</TD>
</TR>
</TABLE>
164
Linguagens de Programação I
Qual o resultado do código acima? Qual a aparência de sua tabela
agora?
Alinhamento combinado
Repare que uma mesma célula pode ter atributos ALIGN e
VALIGN combinados:
<TD ALIGN=”alinhamento_horizontal” VALIGN=”alinhamento_
vertical”>Texto da célula</TD>
Veja algumas combinações na tabela abaixo:
ALIGN=”CENTER”,
VALIGN=”TOP”
Alinhamento
horizontal
e vertical
ALIGN=”RIGHT”,
VALIGN=”MIDDLE”
ALIGN=”LEFT”,
VALIGN=”BOTTOM”
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:
<TR ALIGN=”alin_horizontal” VALIGN=”alin_vertical”>Texto da célula</TR>
Porém o alinhamento declarado em uma célula prevalece sobre o
alinhamento da linha, como se vê no exemplo:
Unidade 6
165
Universidade do Sul de Santa Catarina
Center
center
center
TD ALIGN=”right”
TD VALIGN=”top”
bottom
bottom
bottom
Figura 6.7 – Exemplo de alinhamento combinado em tabela.
Tal resultado pode ser interessante, conforme sua necessidade.
Células que ocupam várias linhas ou colunas
Todas as tabelas que você criou até o momento tinham um valor
para cada célula e, às vezes, uma célula vazia. Você, também,
pode criar células que ocupem várias linhas ou colunas da tabela.
Para criar uma célula que ocupa várias linhas ou colunas, você
deve incluir o atributo COLSPAN (para colunas) e ROWSPAN
(para linhas) nas tags <TH> ou <TD> junto com o número de
linhas ou colunas que deseja que a célula ocupe.
O exemplo abaixo mostra uma tabela com duas linhas e duas
colunas. O número de colunas é definido pelo número de células
presentes nas linhas. É possível expandir as células, para que elas
ocupem o espaço de mais de uma coluna:
<TABLE BORDER=”2”>
<TR>
<TD COLSPAN=”2”>Célula expandida</TD>
</TR>
<TR>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD><TD>Célula 4</TD>
</TR>
</TABLE>
166
Linguagens de Programação I
Veja o resultado no seu navegador:
Figura 6.8 – Exemplo de célula expandida ou mesclada por linha.
Agora vamos expandir as células, para que ocupem o espaço de
mais de uma linha.
<TABLE BORDER=”3”>
<TR>
<TD ROWSPAN=”2”>Célula expandida</TD>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD><TD>Célula 4</TD>
</TR> </TABLE>
Observe no seu navegador:
Figura 6.9 – Exemplo de célula expandida ou mesclada por coluna.
Unidade 6
167
Universidade do Sul de Santa Catarina
A solução necessária para fazer uma célula expandida é diferente
em cada um dos exemplos anteriores. No caso da célula
expandida na largura de duas colunas, ela ficou em uma linha
diferente das células 1 e 2. No segundo exemplo, para deixar a
célula expandida da altura de duas linhas, foi preciso colocá-la na
mesma linha das células 1 e 2.
Podemos expandir colunas e linhas em uma mesma tabela.
Os dados contidos nessa célula preencherão a largura ou o
comprimento das células combinadas, como no exemplo a seguir:
<TABLE BORDER=”1”>
<TR><TH COLSPAN=”2”>Colunas 1 e 2</TH></TR>
<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>
<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>
<TR><TH ROWSPAN=”3”>3 linhas</TH><TD>uma linha</TD></TR>
<TR><TD>duas linhas</TD></TR>
<TR><TD>três linhas</TD></TR>
</TABLE>
Vamos testar o código acima no seu navegador? Ele ficou
parecido com o que está sendo visualizado abaixo? Ótimo! Se
não ficou, não se desespere, verifique se não esqueceu de fechar
alguma tag. Ou será que não faltou algum código HTML?
Observe!
Figura 6.10 – Exemplo de célula expandida.
168
Linguagens de Programação I
Neste exemplo, perceba que o cabeçalho Colunas 1 e 2
compreende duas colunas (COLSPAN= “2”); o cabeçalho 3
linhas compreende, por sua vez, 3 linhas (ROWSPAN= “3”).
A identação no código HTML facilita a visualização de
possíveis erros e até o entendimento do código.
Uma outra maneira de identarmos o código anterior poderia
ser assim:
<TABLE BORDER=”1”>
<TR>
<TH COLSPAN=”2”>Colunas 1 e 2</TH>
</TR>
<TR>
<TD>linha1, coluna 1</TD>
<TD> linha 1, coluna 2</TD>
</TR>
<TR>
<TD>linha 2, coluna 1</TD>
<TD>linha 2, coluna 2</TD>
</TR>
<TR>
<TH ROWSPAN=”3”>3 linhas</TH>
<TD>uma linha</TD>
</TR>
<TR>
<TD>duas linhas</TD>
</TR>
<TR>
<TD>três linhas</TD>
</TR>
</TABLE>
Identação significa organizar
o código HTML para o mesmo
tornar-se legível, sabendo,
por exemplo, onde inicia e
termina uma tag ou, ainda,
sabendo quais tags ou texto
estão dentro de outras tags.
Organizamos o código,
utilizando espaço ou a tecla
TAB.
Quais das visualizações dos códigos em HTML para o exemplo acima
parecem ser mais “ legíveis” a você? Observe que os dois códigos
representam a mesma coisa, ou seja, trazem como resultado a
mesma tela do navegador mostrada anteriormente.
Unidade 6
169
Universidade do Sul de Santa Catarina
Seção 3 - Dimensões da tabela
Além de controlar a largura da borda (com o atributo
BORDER), é possível definir as dimensões (em pixels) de toda
a tabela, espaço entre células e as margens dentro das células.
Todos esses controles são feitos através de atributos dentro da tag
<TABLE>.
Os atributos largura da tabela são:
„„ WIDTH:
para definir a largura da tabela.
„„ HEIGHT:
para definir a altura da tabela.
Os atributos de espaçamento são:
„„ CELLPADDING:
„„ CELLSPACING:
para definir a margem dentro das células.
para definir o espaço entre as células.
Acompanhe o exemplo:
<TABLE BORDER=”2” WIDTH=”400” HEIGHT=”200” CELLPADDING=”20”
CELLSPACING=20>
<TR>
<TD ROWSPAN=”2”>Célula expandida</TD>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD><TD>Célula 4</TD>
</TR>
</TABLE>
170
Linguagens de Programação I
A visualização é a seguinte:
Figura 6.11 – Exemplo do uso de tabela com dimensões alteradas.
Os atributos WIDTH e HEIGHT também podem ser
utilizados para definir o tamanho de células específicas. Neste
caso, devem ser colocados dentro da tag <TD> (ou <TH>).
Vamos estudar detalhadamente cada um deles a seguir.
Atributos de largura
Já foi comentado que uma tabela comum ajusta o tamanho de
suas células ao conteúdo. Por exemplo:
Figura 6.12 – Exemplo de tabela ajustada.
Para apresentar uma tabela ocupando determinado espaço
disponível na linha, usamos o atributo WIDTH. Esse atributo
pode ser aplicado, também, a linhas e células.
Essa largura pode ser definida:
Unidade 6
171
Universidade do Sul de Santa Catarina
„„ em
porcentagem (do espaço disponível) - WIDTH=”x%”;
„„ em
pixels - WIDTH=”x”.
Abaixo, segue o exemplo de uma tabela ocupando 50% do espaço
disponível:
<TABLE BORDER=”1” width=”50%”>
A visualização é como segue:
Figura 6.13 –Exemplo de tabela ocupando 50% da janela.
A seguir, um exemplo de uma tabela ocupando 50% do espaço
disponível, com uma coluna de 60% do espaço disponível na tabela:
<TABLE BORDER=”1” width=”50%”>
<TR>
<TD>janeiro</TD><TD width=”60%”>fevereiro</TD><TD>março</TD>
</TR>
<TR>
<TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD>
</TR>
</TABLE>
172
Linguagens de Programação I
Observe o resultado em seu navegador:
Figura 6.14 – Exemplo de tabela usando 50% da janela e alterando largura da 2ª coluna.
Agora, neste outro exemplo, o controle da largura da tabela está
limitado à dimensão de seu conteúdo. Ou seja: a tabela ocupará
50% do espaço disponível com uma coluna de 1%. Os ajustes farse-ão às outras colunas para a ocupação dos 50%:
<TABLE BORDER= “1” width= “50%”>
<TR>
<TD>janeiro</TD><TD width= “1%”>fevereiro</TD><TD>março</TD>
</TR>
<TR>
<TD>abril</TD><TD width=“1%”>maio</TD><TD>junho</TD>
</TR>
</TABLE>
Assim fica a visualização:
Figura 6.15 – Exemplo de ocupação de tabela em relação à janela e ajuste de coluna.
Unidade 6
173
Universidade do Sul de Santa Catarina
Atributos de espaçamento
Como você já verificou, existem dois atributos que permitem o
controle de espaçamento em tabelas:
„„ CELLPADDING – estabelece o espaço entre o texto e as bordas da célula.
„„ CELLSPACING – estabelece o espaço entre células.
Tomemos a mesma tabela simples já vista na figura 6.12:
Figura 6.16 – Exemplo de tabela ajustada.
Agora, vamos alterar o espaço entre o texto e as bordas do
exemplo anterior, colocando na tag TABLE, o seguinte código:
<TABLE BORDER=”1” CELLPADDING=”20”>
Observe que o texto afastou-se da borda:
Figura 6.17 – Exemplo de espaçamento do texto em relação às bordas da tabela.
174
Linguagens de Programação I
Vamos também alterar, agora, o espaço entre células do exemplo
anterior:
<TABLE BORDER=”1” CELLSPACING=”20”>
Veja o espaçamento entre as células (o preenchimento) foi afetado:
Figura 6.18 – Exemplo de preenchimento das bordas da tabela
(afastamento entre as células).
Podemos, ainda, combinar os dois atributos, alterando o espaço
entre texto e bordas além do espaço entre células, conforme
exemplo abaixo:
<TABLE BORDER=”1” CELLPADDING=”20” CELLSPACING=”20”>
A tabela é assim visualizada:
Figura 6.19 – Exemplo de espaçamento e preenchimento na tabela.
Unidade 6
175
Universidade do Sul de Santa Catarina
Você, agora, já viu grande parte dos recursos disponíveis para
manipular tabelas, que permitem produzir bons efeitos de
apresentação.
Vamos, então, estudar as cores em tabelas?
Seção 4 - Cor em tabelas
Você vai estudar, nesta seção, como inserir, em tabelas, cor de
fundo e de borda, além de como combinar tais cores.
Cor de fundo
Para alterar a cor de fundo de uma tabela, de uma linha ou de
uma célula contida em uma linha, use o atributo BGCOLOR
das tags <TABLE>, <TR>, <TD> ou <TH>. Novamente, utilize o
exemplo das frutas, para propor uma cor de fundo na tabela:
<TABLE BORDER=”5” CELLSPACING=”5” CELLPADDING=”10” BGCOLOR=”#E1FFD9”>
Veja o resultado abaixo:
Figura 6.20 – Exemplo da utilização de cores em tabela.
176
Linguagens de Programação 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
página; o fundo de uma linha anula o fundo da tabela; e as cores
das células anulam todas as outras cores.
Podemos colocar cor de fundo em células específicas da tabela.
Verifique o exemplo a seguir:
<TABLE BORDER=”5” CELLSPACING=”5” CELLPADDING=”10”>
<TR>
<TD BGCOLOR=”#E1FFD9”>janeiro</TD>
<TD>fevereiro</TD>
<TD BGCOLOR=”#E1FFD9”>março</TD>
</TR>
<TR>
<TD>abril</TD>
<TD BGCOLOR=”#E1FFD9”>maio</TD>
<TD>junho</TD>
</TR>
</TABLE>
A visualização é a seguinte:
Figura 6.21 – Exemplo do uso de cores de fundo em células alternadas.
Unidade 6
177
Universidade do Sul de Santa Catarina
Cor de borda
Alguns navegadores permitem que você altere as cores dos
elementos da borda da tabela através da utilização dos seguintes
atributos:
„„ BORDERCOLOR
- define a corda da borda, anulando o
aspecto tridimensional da borda padrão.
„„ BORDERCOLORLIGHT
- define o componente claro de
bordas tridimensionais.
„„ BORDERCOLORDARK
- define o componente escuro de
bordas tridimensionais.
Acompanhe o exemplo:
<TABLE BORDER=”5” CELLSPACING=”5” CELLPADDING=”10”
BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">
Veja o resultado do atributo BORDERCOLOR no navegador:
Figura 6.22 – Exemplo de borda com cor.
Veja este outro exemplo:
178
Linguagens de Programação I
<TABLE BORDER=”1” CELLSPACING=”0” CELLPADDING=10
BORDERCOLOR=”#00FF00”>
<TR>
<TD bgcolor=”#E1FFD9”>janeiro</TD>
<TD>fevereiro</TD>
<TD bgcolor=”#E1FFD9”>março</TD>
</TR>
<TR>
<TD>abril</TD>
<TD bgcolor=”#E1FFD9”>maio</TD>
<TD>junho</TD>
</TR>
</TABLE>
A visualização é esta:
Figura 6.23 – Exemplo de formatação de tabela.
Combinando cores
O Internet Explorer, navegador da Microsoft, permite atribuir
cores diferentes para o fundo de cada célula. Basta acrescentar o
atributo BGCOLOR com a cor desejada às tags de célula. Em
algumas combinações de cores, será necessário também modificar
a cor das letras. Isso é feito com o atributo COLOR dentro da
tag <FONT>. Veja o exemplo:
Unidade 6
179
Universidade do Sul de Santa Catarina
<TABLE BORDER>
<TR>
<TH BGCOLOR=”000000”><FONT COLOR=”FFFFFF”>Comida</FONT></TH>
<TH BGCOLOR=”000000”><FONT COLOR=”FFFFFF”>Bebida</FONT></TH>
</TR>
<TR>
<TD BGCOLOR=”white”>Arroz</TD>
<TD BGCOLOR=”black”><FONT COLOR=”WHITE”>Vinho</FONT></TD>
</TR>
</TABLE>
Visualização:
Figura 6.24 – Exemplo de formatação de tabela.
180
Linguagens de Programação I
Síntese
Para melhor auxiliar você nos seus estudos, segue abaixo uma
síntese das tabelas com os atributos de tabela, coluna e linha:
Sintaxe
Definição
<TABLE>...</TABLE>
define a tabela
<CAPTION>...</CAPTION>
define o título da tabela
<TR>...</TR>
delimita uma linha
<TH>...</TH>
define um cabeçalho para colunas
ou linhas (dentro de <TR>)
<TD>...</TD>
delimita um elemento ou célula
(dentro de <TR>)
Eis um resumo para a tag <TABLE>:
Tipo
Sintaxe
Exemplo
Alinhamento
ALIGN=”LEFT|RIGHT|CENTER”
<TABLE ALIGN=”CENTER”>texto</TABLE>
Borda
BORDER=”TAMANHO” (em pixels)
<TABLE BORDER=”1”>texto</TABLE>
Comprimento
WIDTH=”TAMANHO” (em pixels ou
% da pagina)
<TABLE WIDTH=”20%”>texto</TABLE>
Altura
HEIGHT=”TAMANHO” (em pixels ou
<TABLE HEIGHT=”20%”>texto</TABLE>
% da pagina)
Cor de fundo
BGCOLOR=”COR”
<TABLE BGCOLOR=”blue”>texto</TABLE>
Cor da borda
BORDERCOLOR=”COR”
<TABLE BORDERCOLOR=”orange”>texto</TABLE>
Cor da borda
escura
BORDERCOLORDARK=”COR”
<TABLE BORDERCOLORDARK=”red”>texto</TABLE>
Cor da borda clara BORDERCOLORLIGHT=”COR”
Unidade 6
<TABLE BORDERCOLORLIGHT=”yellow”>texto</TABLE>
181
Universidade do Sul de Santa Catarina
Para a tag <TR>:
Tipo
Sintaxe
Exemplo
Alinhamento
ALIGN=”LEFT|RIGHT|CENTER|MIDDLE|BOTTOM”
<TR ALIGN=”CENTER”>texto</TR>
Para a tag <TD>:
Tipo
Sintaxe
Exemplo
Alinhamento
ALIGN=”LEFT|RIGHT|CENTER” e
VALIGN=TOP|MIDDLE|BOTTOM
<TD ALIGN=”CENTER”>texto</TD>
Colunas que
ocupa
COLSPAN=”NÚMERO”
<COLSPAN=”2”>texto</TD>
Linhas que
ocupa
ROWSPAN=”NÚMERO”
<ROWSPAN=”2”>texto</TD>
Cor de fundo
BGCOLOR=”COR”
<TD BGCOLOR=”#123456”>texto</TD>
Existe também o <TH>, que é como o <TD>, mas ele já vem com
o atributo negrito e centralizado como padrão.
Atividades de autoavaliação
Leia com atenção o enunciado seguinte e resolva a atividade programada
para a sua autoavaliação.
1. Caro(a) aluno(a), você consegue reproduzir o código HTML que está
sendo mostrado no navegador abaixo? Vamos tentar?
Figura 6.25 – Um exemplo de tabela para a autoavaliação.
182
Linguagens de Programação I
Pior que os acentos...
A formatação de tabelas é complicada, e o texto fonte
chega a ser quase ininteligível, quando montamos
tabelas complexas e fazemos uso de seus diversos
atributos.
A melhor opção para você montar sua tabela, sem
dúvida, é usar os editores WYSIWYG.
Alguns editores de modo texto têm uma interface
gráfica que ajuda na criação de tabelas, mas a edição
de tabelas já existentes precisa ser feita à mão.
Saiba mais
Aprofunde os conteúdos estudados nesta unidade, ao consultar as
seguintes referências:
<http://www.criarweb.com/artigos/64.php>
<http://www.juliobattisti.com.br/tutoriais/ericogoncalves/
htmlbasico010.asp>
<http://www.pypbr.com/html/htm_avc.asp#table> (HTML
Avançado)
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 através do atributo TARGET.
Seções de estudo
Seção 1 Links com frames
Seção 2 Composição com frames
Seção 3 Atributos de FRAMESET
Seção 4 Atributos de FRAME
Seção 5 Tag NOFRAMES
7
Universidade do Sul de Santa Catarina
Para início de estudo
A especificação de frames em HTML 3.2 ainda está em
andamento, e nem todos os navegadores oferecem suporte a eles.
O Netscape foi o primeiro a implementar esta facilidade (a partir
da versão 2.0).
Os frames são divisões da tela do browser em diversas telas (ou
“quadros”). Com isso, torna-se possível apresentar mais de uma
página por vez. Tome como exemplo um índice principal em uma
parte pequena da tela e os textos relacionados ao índice em outra
parte.
Os documentos que possuem frames são bonitos e atrativos,
por serem diferentes do padrão simples de páginas encontradas
na web. Eles possibilitam dividir um hipertexto em múltiplas
janelas (os frames), nas quais podem ser carregados diferentes
documentos HTML.
Bookmark é um “atalho” que marca
o endereço de um site já acessado
para ser acessado novamente.
Os navegadores possibilitam
armazenar bookmarks ou favoritos,
que guardam a URL dos sites,
tornando fácil visitá-los novamente.
É uma lista de endereços já visitados
na internet.
186
É muito fácil colocar frames em páginas. Porém nem todos os
usuários gostam deles, pois nem sempre a navegação é fácil, além
de problemas para a impressão e a marcação dos documentos
interiores aos frames nos bookmarks. A alternativa natural para os
frames são as tabelas.
Os frames mudam o conceito de página para o navegador e para
você. Ao contrário de todos os exemplos anteriores, que utilizam
uma única página em HTML para apresentar uma tela de
informações, quando você cria sites na web, através da utilização
de frames, uma única tela é composta, na verdade, de diversos
documentos HTML separados, que interagem uns com os
outros.
Linguagens de Programação I
A figura seguinte mostra que é necessário um mínimo de quatro
documentos distintos para criar uma tela como a representada a
seguir:
Figura 7.1 - Estrutura básica de FRAMES.
Os frames são gerados através de dois componentes básicos:
FRAMESET - responsável pela divisão do documento em
campos separados;
„„ elemento
FRAME - que indica as páginas que devem ser carregadas
em cada uma dessas subdivisões.
„„ elemento
O documento que implementa frames, em que se define a
estrutura das janelas, é conhecido como Frame Document.
É nele que se estabelece o número de janelas desejado e a
sua distribuição na tela. Dentro de um Frame Document,
as marcações <BODY> e </BODY> são substituídas por
<FRAMESET> e </FRAMESET>.
Unidade 7
187
Universidade do Sul de Santa Catarina
Construindo Frames com o elemento FRAMESET
Como já dito, a tag <FRAMESET> divide um documento em
diversas regiões. Para tal, ela faz uso dos atributos COLS e
ROWS, referentes a divisões verticais (como colunas em uma
tabela) e horizontais (como linhas) entre as janelas na tela. Os
atributos FRAMEBORDER, BORDER e BORDERCOLOR
também podem ser utilizados para modificar o layout dos frames.
Veremos estes atributos mais adiante.
Observe que, dentro de um FRAMESET, não se pode
utilizar nenhum outro dos elementos válidos no corpo
de um texto HTML comum.
Uma página com frames tem um texto fonte semelhante a:
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<FRAMESET COLS=”20%, 80%”>
<FRAME SRC=”índice1.html”>
<FRAME SRC=”texto.html” NAME=”principal”>
<NOFRAME>
<BODY>
<H2>Bem-vindo à página do assunto X!</h2>
<P>Blá blá blá blá blá blá blá blá blá blá
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Conforme o exemplo acima, a parte FRAMESET define
a divisão da página em “quadros”. Neste caso, a página será
188
Linguagens de Programação 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, não foi configurado o número de linhas (ROWS)
do FRAMESET. Como veremos a seguir, as composições de
linhas e colunas seguem um padrão diferenciado, de forma que
não é possível a definição dos dois atributos (ROWS e COLS)
simultaneamente.
Observe que, dentro da formatação de FRAMESET, temos os
FRAME SRC, os quais fazem referências às páginas que serão
mostradas nos frames definidos.
O caminho das páginas a serem inseridas como frames
(no exemplo: índice1.html e texto.html) seguem a mesma
padronização para a inserção de imagens; neste caso, os dois
arquivos estão no mesmo diretório do frame document (arquivo
que contém a tag FRAMESET).
Assim, no código descrito acima, a página índice1.html será
mostrada na primeira coluna (que ocupará 20% da tela), e a página
texto.html será mostrada na segunda (ocupando 80% da tela).
O conteúdo do arquivo índice1.html é este:
<HTML>
TESTANDO FRAME... 20%
</HTML>
E o conteúdo do arquivo texto.html é este:
<HTML>
TESTANDO FRAME... 80%
</HTML>
Assim, o resultado apresentado no navegador será:
Unidade 7
189
Universidade do Sul de Santa Catarina
Figura 7.2 – Exemplo de visualização de um FRAME.
A formatação de frames inclui também uma parte NOFRAME,
a qual é mostrada normalmente pelos navegadores que não
suportam sua apresentação.
Seção 1 - Links com Frames
Sempre que se aciona um link dentro de uma página, é padrão
que a página referente a esse link seja carregada na mesma janela
da página anterior.
Definindo a janela Alvo através do Atributo TARGET
O atributo TARGET permite controlar em qual janela um link
específico será exibido quando o usuário clicar sobre ele. Por
exemplo, pode-se ter uma janela lateral com uma espécie de índice,
em que vários links estarão disponíveis, e uma outra janela em
que serão carregados os documentos referentes a esses links. Para
projetar um documento com essas características, é preciso que o
atributo TARGET seja utilizado, pois ele é responsável por indicar
em que lugar um determinado documento deve ser visualizado.
É aqui que entra a necessidade de adicionar o atributo NAME
ao elemento FRAME, pois é a partir do atributo NAME que
o elemento TARGET saberá em qual janela da tela deve ser
exibido o documento.
No exemplo a seguir, um link dentro da janela à esquerda faz com
que a página apontada seja mostrada ocupando a janela da direita
(coluna de 80%):
190
Linguagens de Programação 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 à página do assunto X!</h2>
<P> Blá blá blá blá blá blá blá blá blá blá
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Veja que, no código fonte acima, o frame associado à
apresenta.html tem um atributo NAME. Nomear um frame
permite que direcionemos o frame em que será apresentado o
documento de destino de um link.
No arquivo índice1.html, temos o seguinte conteúdo:
<HTML>
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 página de destino do link (apresenta.html) será
mostrada.
Unidade 7
191
Universidade do Sul de Santa Catarina
No arquivo apresenta.html, temos o seguinte conteúdo:
<HTML>
Aqui estamos vendo a apresentação de frames com link.
</HTML>
O resultado no seu navegador será assim:
Figura 7.3 – Exemplo de links com FRAMES.
Quando clicarmos em Exemplo nº 2, no frame da esquerda, o
resultado será mostrado no frame da direita, conforme figura a seguir:
Figura 7.4 – Exemplo de link já visitado com FRAME.
Se você não entendeu como funciona esse mecanismo de
direcionamento, reveja o exemplo e teste todos os links para
verificar o que foi dito neste item, pois esta estrutura básica de
FRAMES em HTML é fundamental!
192
Linguagens de Programação I
Limpando a tela
Há basicamente dois efeitos possíveis para limpar a apresentação
de frames, e isso é feito com “targets” especiais (como você já viu,
o atributo TARGET foi apresentado no item Links com Frames):
limpa os frames que estiverem ativos,
apresentando a página de destino na tela inteira.
„„ TARGET="_top”
abre uma nova janela do browser para
apresentar a página de destino.
„„ TARGET="_blank”
Seção 2 - Composição com Frames
Como você já observou, a formatação FRAMESET tem
atributos que definem a divisão do espaço da janela do browser
em colunas ou linhas. Podemos utilizar uma combinação
de “ framesets” para criar diversos modos de apresentação do
conteúdo de um site.
Antes de ver algumas composições, lembre-se de que os pontoschave para o mecanismo dos frames são estes, mostrados no item
anterior:
„„ a
nomeação dos frames; e
declaração dos targets dos links, que definem o frame no
qual as páginas de destino serão mostradas.
„„ a
Embora quase todos os editores WYSIWYG de HTML deem
suporte à criação de frames, é necessário que o autor se preocupe com
os detalhes de nomeação de frames e de direcionamento de links.
Unidade 7
193
Universidade do Sul de Santa Catarina
Veja como montar dois frames em coluna:
<FRAMESET COLS=”x, y”>
<FRAME SRC=”col1.html”>
<FRAME SRC=”col2.html”>
Figura 7.5 – Exemplo de
FRAME em coluna.
</FRAMESET>
Como montar dois frames em linha:
<FRAMESET ROWS=”x, y”>
<FRAME SRC=”lin1.html”>
<FRAME SRC=”lin2.html”>
Figura 7.6 - Exemplo de FRAME
em linha.
</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.
<FRAME SRC=”lin1.html”>
<FRAME SRC=”lin2.html”>
</FRAMESET>
</FRAMESET>
194
Linguagens de Programação I
Para montar a estrutura abaixo, crie primeiro dois frames em
linha e componha a segunda linha com dois frames em coluna:
<FRAMESET ROWS=”x, y”>
<FRAME SRC=”lin1.html”>
<FRAMESET COLS=”x, y”>
Figura 7.8 - Exemplo de dois
FRAMES em linha e dois
FRAMES em coluna.
<FRAME SRC=”col1.html”>
<FRAME SRC=”col2.html”>
</FRAMESET>
</FRAMESET>
As composições com mais de um frameset precisam
ser bem planejadas para funcionarem de maneira
adequada.
Seção 3 - Atributos de FRAMESET
Nesta seção, você estudará os seguintes atributos de
FRAMESET: ROWS, COLS, FRAMEBORDER, BORDER
e BORDERCOLOR.
ROWS
Este atributo define divisões horizontais entre janelas. Vem
sempre acompanhado de valores que definem que espaço da tela
será ocupado por cada janela. Cada janela a ser criada deverá
ter, portanto, um valor associado, e esses valores devem estar
separados por vírgula. Veja a sintaxe:
Unidade 7
195
Universidade do Sul de Santa Catarina
(ROWS=”valor, valor, valor...”)
Cada valor poderá ser:
Numérico em pixels
(ROWS=”30,50”)
Refere quantos pixels cada frame (ou janela)
deve ocupar. A desvantagem dessa notação
é que não é possível ter o controle do valor
total de pixels que o navegador do usuário
contém.
Percentual
(ROWS=”25%,25%,50%”)
Corresponde a um valor percentual do
tamanho da página, sempre somando um
total de 100%. Esse é o método mais simples.
Relativo
(ROWS=”*,*,2*”)
Define o tamanho de uma janela em relação
às outras. No exemplo ao lado, os dois
primeiros frames vão ocupar um quarto da
tela e o terceiro frame ocupará dois quartos,
ou seja, metade da tela. Este exemplo produz
o mesmo resultado que o exemplo anterior
utilizado no Percentual.
No último caso, do valor relativo, o “ * ” funciona como uma
variável: ao serem somados os valores de cada um dos campos
em que será dividida a tela, deve-se obter 1 (um). No exemplo
anterior, teríamos o seguinte: * + * + 2* = 1 > * = 1/4. Por este
motivo, as primeiras janelas ocupam um quarto da tela (*), e a
terceira janela ocupa um meio (2*).
Também é possível combinar os valores numéricos, percentuais e
relativos, como demonstram os exemplos a seguir.
Veja como dividir a tela do navegador em três janelas horizontais,
com a do meio mais larga que as de cima e de baixo.
196
Linguagens de Programação 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>
Veja o resultado no seu navegador:
FIgura 7.9 – Exemplo da tela dividida em 3 FRAMES em linha.
Se os arquivos Exemplo1.html, Exemplo2.html e
Exemplo3.html não existirem, o resultado na tela
naquele frame que indica um dos arquivos inexistente
aparecerá com a mensagem “A página não pode ser
exibida”.
Unidade 7
197
Universidade do Sul de Santa Catarina
Você também pode propor três janelas horizontais: a primeira e
a última com altura fixa, e o frame central ocupando o restante
do espaço (é o próprio navegador que define qual o tamanho do
frame central, de acordo com o espaço que sobra na tela após a
definição do primeiro e do último frames).
<HTML>
<HEAD>
<TITLE> Frame Document </TITLE>
</HEAD>
<FRAMESET ROWS=”35, *, 40”>
<FRAME SCR=”exemplo1.html”>
<FRAME SRC=”exemplo2.html”>
<FRAME SCR=”exemplo3.html”>
</FRAMESET>
</HTML>
Visualizando a tela dividida em frames no seu navegador:
Figura 7.10 – Exemplo do uso de FRAMES em linha com o FRAME central mais largo.
198
Linguagens de Programação I
Na definição do Frame Document anterior, cada janela (frame)
corresponde a um elemento FRAME, que indica, no mínimo, a
URL que será associada a essa região da tela, através do atributo
SRC. O elemento FRAME e seus atributos serão descritos em
breve.
COLS
O atributo COLS funciona exatamente como a marcação
anterior (inclusive no que diz respeito ao modo de apresentação
do campo “valor”). No entanto este atributo divide a tela em
frames ou janelas verticais (assim como as colunas em tabelas),
como mostram os exemplos a seguir. A sintaxe é a seguinte:
(COLS=”valor,valor,valor..”)
Acompanhe os exemplos:
Aqui se divide a tela em 3 colunas, sendo que a do meio é mais
larga que as outras duas:
<HTML>
<HEAD>
            <TITLE> Frame Document </TITLE>
</HEAD>
<FRAMESET COLS=”30%, 40% ,30%”>
   
<FRAME SRC=”exemplo1.html”>
   
<FRAME SRC=”exemplo2.html”>
   
<FRAME SRC=”exemplo3.html”>
</FRAMESET>
</HTML>
Vejamos o resultado do código HTML acima, no seu navegador.
Unidade 7
199
Universidade do Sul de Santa Catarina
Figura 7.11 – Exemplo da tela dividida em 3 FRAMES em coluna.
Aqui se divide a tela em duas verticais:
<HTML>
<HEAD>
            <TITLE> Frame Document </TITLE>
</HEAD>
<FRAMESET COLS=”200,*”>
    <FRAME SRC=”exemplo1.html”>
    <FRAME SRC=”exemplo2.html”>
</FRAMESET>
</HTML>
Vejamos o resultado no seu navegador:
Figura 7.12 – Exemplo da tela dividida em 2 FRAMES em coluna.
200
Linguagens de Programação I
Da mesma maneira que nos exemplos das linhas (ROWS), o
navegador irá definir sozinho qual o tamanho da segunda célula
do atributo COLS. Para intercalar janelas verticais e horizontais,
é necessário definir várias áreas FRAMESET. Para cada área
delimitada com FRAMESET, pode-se definir o número de
linhas ou colunas. Contudo não é possível definir COLS e
ROWS para uma mesma área FRAMESET.
Para intercalar linhas e colunas, pode-se fazer como no exemplo a
seguir:
<HTML>
<HEAD>
<TITLE> Frame Document </TITLE>
</HEAD>
<!-- O tag HTML abaixo divide a tela em duas linhas -->
<FRAMESET ROWS=”30%,70%”>
    <FRAME SRC=”exemplo1.html”>
    <!-- A linha de código 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
Universidade do Sul de Santa Catarina
Veja o resultado no seu navegador:
Figura 7.13 – Exemplo da tela dividida em FRAMES por linha e coluna.
FRAMEBORDER
Este atributo especifica se os frames do FRAMESET devem
apresentar uma borda, ou não. Se ele for omitido, será usado o
valor (“yes” ou “no”) do FRAMESET mais externo. Se nenhum
FRAMESET apresentar este atributo, então, o valor padrão
(com bordas) será usado. O modelo é o seguinte:
(FRAMEBORDER=”yes”|”no”)
Eis um exemplo:
<FRAMEBORDER=”no”>
202
Linguagens de Programação I
Podemos testar o exemplo a seguir utilizando o atributo
FRAMEBORDER no FRAMESET:
<HTML>
<HEAD>
            <TITLE> Frame Document </TITLE>
</HEAD>
<FRAMESET COLS=”200,*”
FRAMEBORDER=”no”>
    <FRAME SRC=”exemplo1.html”>
    <FRAME SRC=”exemplo2.html”>
</FRAMESET>
</HTML>
Veja o resultado do frame sem as bordas no seu navegador:
Figura 7.14 – Exemplo de FRAME sem borda.
Unidade 7
203
Universidade do Sul de Santa Catarina
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 padrão RGB:
<BORDERCOLOR=”blue”>
204
Linguagens de Programação I
Seção 4 – Atributos de FRAME
Até este ponto, vimos os atributos COLS e ROWS (para
FRAMESET), SRC e NAME (para FRAME).
A tag <FRAME> define qual página HTML será carregada em
cada janela contida em uma área FRAMESET. Ela aceita seis
possíveis atributos, cuja utilização depende das necessidades do
criador da página (Frame Document):
„„
SRC
„„
NAME
„„
MARGINWIDTH
„„
MARGINHEIGHT
„„
SCROLLING
„„
NORESIZE
Vejamos cada atributo separadamente.
SRC
O atributo SRC define a URL que será exibida em cada frame.
Ele pode ser omitido caso se deseje criar uma região em branco
na tela. A sintaxe é esta:
(SRC=”url”)
Veja o exemplo:
<FRAME SRC=”índice.html”>
Unidade 7
205
Universidade do Sul de Santa Catarina
NAME
Esse atributo é utilizado para associar um nome a uma das
divisões do Frame Document. Deve ser usado quando se
deseja especificar onde (em que janela) documentos devem ser
carregados. É um atributo opcional. Por padrão, os frames não
têm nome, mas, quando acontece de se estabelecerem nomes
para janelas, estes devem começar com caractere alfanumérico. A
sintaxe é a seguinte:
(NAME=”nome”)
Acompanhe o exemplo:
<FRAME SRC=”inicial.html” NAME=”navega”>
MARGINWIDTH
Este atributo controla as margens esquerda e direita de cada
frame, ou seja, a distância entre o conteúdo da página e as
margens da janela. O valor associado será em valor absoluto em
pixels. O menor valor aceito é 1. É um atributo opcional. Caso
não esteja definido, o navegador usará o seu padrão para definir
as margens dos frames ou janelas. A sintaxe é a seguinte:
(MARGINWIDTH=”valor”)
Observe o exemplo:
<FRAME SRC=”índice.html” MARGINWIDTH=”3”>
206
Linguagens de Programação I
MARGINHEIGHT
Também é um atributo opcional. Funciona exatamente como o
anterior, só que determina as margens superior/inferior de cada
frame. Eis a sintaxe:
(MARGINHEIGHT=”valor”)
Veja o exemplo:
<FRAME SRC=”índice.html” MARGINHEIGHT=”4”>
SCROLLING
Novamente, temos um atributo opcional. Com SCROLLING
é definido se uma janela deve possuir barra de rolagem, ou não.
Caso seja definido como YES, a janela sempre possuirá uma
barra de rolagem visível. Caso seja definido como NO, nunca
haverá barra de rolagem. E, finalmente, se vier como AUTO, o
navegador aplicará a barra, quando necessário. O valor padrão é
AUTO. Portanto, se o atributo SCROLLING não for definido,
o navegador aplicará a barra de rolagem à janela em questão,
automaticamente, toda vez que o conteúdo da página HTML
não couber completamente no frame. A sintaxe é esta:
(SCROLLING=”yes/no/auto”)
Observe o exemplo:
<FRAME SRC=”índice.html” SCROLLING=”yes”>
Unidade 7
207
Universidade do Sul de Santa Catarina
Para dispor o frame sem a barra de rolagem:
<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. Não é possível, atualmente, mudar esta
característica.
NORESIZE
NORESIZE é também opcional. Este atributo não possui valor
associado; quando ele não aparece, o usuário poderá alterar
o tamanho da janela, arrastando a sua borda com o mouse.
Caso contrário, a janela terá sempre um tamanho inalterável.
Normalmente, todas as janelas podem ter seu tamanho
alterado, já que navegadores diferentes estarão sendo utilizados
por diferentes pessoas, e as páginas podem não caber na tela,
impedindo que os usuários possam lê-las. Eis um exemplo:
<FRAME SRC=”índice.html” NORESIZE>
Aqui está um exemplo de elemento FRAME acompanhado de
alguns atributos:
208
Linguagens de Programação 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>
Veja o resultado no seu navegador:
Figura 7.15 – Exemplo de atributos na tag FRAME.
Unidade 7
209
Universidade do Sul de Santa Catarina
Seção 5 – Tag NOFRAMES
Se existem navegadores que não suportam ou não entendem
frames, o que fazer para viabilizar Frame Documents que possam ser
navegados por eles?
É justamente aí que entra a container tag <NOFRAMES>.
Ela possibilita que se crie uma opção de navegação na página
para quem não possui um navegador que entenda frames. Isso é
bastante recomendável! Essa marcação aparece no documento
inicial Frame Document.
Quando o acesso for feito através de um navegador que NÃO
entenda frames, os elementos FRAMESET e FRAME (e
NOFRAMES também!) serão ignorados pelo navegador, e
as marcações entre <NOFRAME> e </ NOFRAME> serão
obedecidas, montando-se uma página alternativa. Por outro lado,
os navegadores que suportam frames ignoram todo conteúdo
entre as marcações NOFRAMES. Veja o exemplo a seguir:
<HTML>
<HEAD>
<TITLE> Noframes </TITLE>
</HEAD>
<FRAMESET ROWS=”30%,70%”>
<FRAME SRC=”exemplo1.htm”>
<FRAMESET COLS=”50%,50%”>
<FRAME SRC=”exemplo2.htm”>
<FRAME SRC=”exemplo3.htm”>
</FRAMESET>
</FRAMESET>
<!-- O campo abaixo é o campo que o navegador que aceita
frames, ignora -->
<NOFRAMES>
<FONT SIZE=4>
210
Linguagens de Programação I
Esta parte do código só irá aparecer no seu navegador
caso o mesmo não suporte o uso de frames.
</FONT>
</NOFRAMES>
</HTML>
Veja o resultado no seu navegador. Se ele suporta o uso de frames,
surgirá algo do tipo:
Figura 7.16 – Exemplo do uso da tag NOFRAMES.
Caso o seu navegador NÃO suporte o uso de frames, surgirá na
tela a seguinte mensagem:
Figura 7.17 – Exemplo do uso da tag NOFRAMES quando o navegador não aceita FRAME.
Unidade 7
211
Universidade do Sul de Santa Catarina
Síntese
E assim acaba nossa unidade. Neste momento, você tem os
conhecimentos suficientes para a construção de um web site
básico. Agora, com um bocado de imaginação, pode fazer um
bom web site.
Os Frames são interessantes para apresentar conjuntos de páginas
com um índice fixo para a navegação. Além disso, com este
recurso, torna-se possível mostrar diversas páginas e/ou mídias
em uma única janela do browser.
Tenha o cuidado de procurar controlar a navegação, evitando
que o acionamento de links leve o leitor a ver seu navegador criar
frames dentro de frames, gerando uma grande confusão. Evite
isso, utilizando a tag TARGET, como vimos na seção 1 desta
unidade.
Atividades de autoavaliação
Leia com atenção e resolva as atividades programadas para a sua autoavaliação.
1 – Crie o frame a seguir para ser visualizado no seu navegador:
Cabeçalho.html
Menu.html
Rodapé.html
212
Principal.html
Linguagens de Programação 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 conteúdos estudados nesta unidade, ao consultar as
seguintes referências:
<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
Desenvolvendo Páginas Eficientes
Objetivos de aprendizagem
„„ Utilizar as tags HTML 2.0, 3.2 ou 4.
„„ Criar páginas HTML de modo a serem facilmente
consultadas.
„„ Elaborar um layout adequado de páginas da web.
„„ Compreender quando e por que criar vínculos.
„„ Identificar elementos/ atributos obsoletos (deprecated).
Seções de estudo
Seção 1 Uso das extensões HTML
Seção 2 Seu texto na web
Seção 3 Projeto e layout da página
Seção 4 Uso de vínculos
Seção 5 Outras sugestões de bons hábitos
Seção 6 Elementos e atributos obsoletos
8
Universidade do Sul de Santa Catarina
Para início de estudo
Nesta unidade, não vamos abordar as tags HTML, e sim, os
elementos que podem diferenciar os seus documentos dos de
alguém que apenas conhece as tags e espalha o texto e as imagens
gráficas no documento, chamando isso de apresentação. Ainda:
conheceremos alguns elementos e atributos que já estão obsoletos
e que devem ser evitados na programação eficiente.
Seção 1 – Uso das extensões HTML
No passado, antes de todas as empresas que produzem navegadores
começarem a introduzir suas próprias tags HTML, era fácil ser
um projetista da web. As únicas tags com que você tinha de lidar
eram aquelas da HTML 2.0, e a grande maioria dos navegadores
existentes na web era capaz de ler as suas páginas sem qualquer
problema. Hoje, ser um projetista da web é bem mais complicado.
Você tem que trabalhar com vários grupos de tags:
„„ Tags da HTML 2.0.
„„ Recursos da HTML 3.2 e 4, como por exemplo, frames, tabelas, divisões,
painéis de fundos, cores e folhas de estilos, que contam com o suporte
da maioria, mas não de todos os navegadores.
„„ Tags específicas dos navegadores, que podem, ou não, se tornar parte
da especificação HTML oficial e cujo suporte varia de um navegador
para outro.
„„ Outras tags propostas para o futuro para a HTML, que contam com o
suporte de poucos navegadores.
Fonte: LEMAY, 2001.
Se você considera tal situação confusa, saiba que não é o(a)
único(a). Os autores e projetistas estão tentando esclarecer
216
Linguagens de Programação I
essa confusão e tomar decisões com base no aspecto visual que
desejam atribuir às suas páginas. As extensões HTML oferecem
maior flexibilidade no layout, mas limitam o público que pode ver
essas páginas da maneira que você deseja que elas sejam exibidas.
A escolha de uma estratégia para a utilização de extensões
HTML é uma das mais importantes decisões de projeto que
você fará, ao criar páginas da web. Se o autor da web quer o
maior público possível para suas páginas da web, então ele deve
se manter fiel às tags da HTML 2.0, conforme definidas pelo
padrão. Você pode criar um documento da web magnífico com as
tags da HTML 2.0, e esse documento tem uma grande vantagem
em relação a muitos documentos experimentais, pois ele é
reconhecido sem qualquer dificuldade pela grande maioria dos
navegadores e atinge, portanto, o maior público possível.
Se o autor da web, por outro lado, deseja ter sobre o layout
de páginas o tipo de controle que as mais avançadas tags
proporcionam e está disposto a perder boa parte de seu público
para conseguir isso, então ele utilizará as mais novas inserções
propostas pela HTML 4. As páginas para esse autor são
elaboradas para poucos navegadores, são testadas somente
nesses navegadores, e é possível, inclusive, que haja um aviso na
página, informando em qual navegador a página deve ser lida.
Na maioria das vezes, se você usar outro navegador para ler essas
páginas, o resultado poderá ser bem confuso, quando não for
inteiramente ilegível.
A melhor posição, ao se escolher entre um projeto refinado e um
grande público, é provavelmente o equilíbrio entre os dois. Com
algum conhecimento prévio dos efeitos que as extensões HTML
terão sobre as suas páginas, tanto em navegadores que oferecem
suporte para elas como em outros que não oferecem esse suporte,
você poderá promover pequenas modificações no seu projeto, que
permitirão tirar proveito dos dois aspectos mencionados. Assim,
as suas páginas continuarão legíveis e úteis em navegadores
mais antigos e em uma grande variedade de plataformas, mas
poderão também tirar proveito dos recursos avançados nos novos
navegadores. (LEMAY, 2001).
A estratégia mais importante que podemos sugerir para utilizar
extensões e, ao mesmo tempo, manter a compatibilidade
com outros navegadores consiste em testar os seus arquivos
Unidade 8
217
Universidade do Sul de Santa Catarina
nesses navegadores. A maioria dos navegadores é composta
de programa freeware ou shareware e se encontra disponível
para download. Por isso, basta localizá-los e instalá-los. Ao
testar as suas páginas, você poderá ter uma noção de como os
diversos navegadores interpretam as diferentes tags e acabará
percebendo quais extensões proporcionam maior flexibilidade,
quais delas exigem codificação especial para fornecer alternativas
em navegadores mais antigos e quais tags podem ser usadas
livremente, sem causar problema em outros navegadores.
Você sabe como usar um HTML 4?
Pesquise no site: <http://www.clem.ufba.br/tuts/html/
c16.htm>.
Seção 2 – Seu texto na web
A redação na web não é diferente da redação no mundo real.
Mesmo que o texto que você esteja redigindo para a web não
seja apresentado em uma cópia impressa, ainda assim ele será
“publicado” e refletirá a sua personalidade e o seu trabalho. Na
verdade, você deverá seguir as regras de uma boa redação com
mais cuidado, pelo fato de o documento estar no ambiente on-line
e ser, por isso, muito visitado por leitores muito exigentes.
Com a grande quantidade de informações na web, os leitores
não terão muita paciência se a sua página estiver cheia de erros
de grafia ou desorganizada. Eles certamente desistirão depois de
lerem a segunda frase e passarão para a página de outra pessoa.
Afinal de contas, existem milhões de páginas na web. Não há
tempo a perder com páginas ruins. Vai dizer que você nunca
fez isso? Nunca visitou uma página carregada de informações
desorganizadas, sem um bom layout e acabou desistindo?
Isso não significa que você tenha de se tornar um escritor
profissional para criar uma página na web apresentável. Mas deve
seguir algumas sugestões para tornar a sua página mais legível e
compreensível. Analise-as na sequência.
218
Linguagens de Programação I
Redija com clareza e objetividade
Uma das melhores formas de tornar as suas páginas da web
legíveis consiste em redigir da maneira mais clara e objetiva
possível, apresentando os seus pontos de vista e nada mais. Se
você colocar muitas informações adicionais, poderá dificultar a
compreensão das suas ideias por parte do leitor da sua página.
O critério de qualidade do texto vale tanto para a Internet quanto
para o papel. Não há linguagem nova que desobrigue o texto
na Internet a ser bom, legível e compreensível. O texto só passa
a existir realmente, quando é consumido produtivamente pela
pessoa que está do outro lado da linha.
Você sabe o que é Webwriting?
Webwriting é o trabalho de criação, produção, edição e
administração de textos específicos para conteúdo de websites,
a partir de um conjunto de características próprias da linguagem
escrita da mídia internet. Estude mais sobre o assunto no seguinte
site:
<http:// www.webwritersbrasil.com.br/detalhe.asp?numero=146>.
Organize as suas páginas para uma rápida consulta
Mesmo que você crie o texto mais sucinto e bem-estruturado
jamais visto em toda a web, os seus leitores não irão lê-lo com
atenção do início ao fim.
Um texto para internet tem de ter o tamanho que a informação
exigir. Na informação rápida, não se pode esquecer de um ponto
crucial: o porquê. Se nós entramos na Internet, queremos saber
o porquê dos fatos, não queremos só rapidez. A velocidade tem
que vir com peso, com qualidade. A internet é a grande chance
da humanidade para preservar sua cultura e, neste sentido, deve
funcionar como um banco de dados, e não apenas como um
veículo de informação.
Unidade 8
219
Universidade do Sul de Santa Catarina
A consulta, nesse contexto, é a primeira olhada dos leitores
em cada página, para ter uma noção geral de seu conteúdo.
Dependendo das informações que eles quiserem obter nas
páginas, poderão ler as partes que mais chamam a atenção
(cabeçalhos, vínculos, palavras enfatizadas) e, talvez, alguns
parágrafos contextuais, para, em seguida, continuar a leitura. Ao
criar e organizar as suas páginas para facilitar a “consulta”, você
estará ajudando os leitores a obter o mais rapidamente possível as
informações que necessitam. Para facilitar a consulta à página:
„„ Utilize cabeçalhos para resumir os tópicos - Se observar, este livro possui
títulos e subtítulos, para que você possa percorrê-lo rapidamente, na busca
da informação de maior interesse. O mesmo se aplica às páginas da web.
„„ Utilize listas - São excelentes para resumir itens relacionados.
„„ Não se esqueça dos menus de vínculos - O menu de vínculo consiste em
uma espécie de lista que, além de oferecer todas as vantagens das listas
para a consulta, funciona como uma excelente ferramenta de navegação,
através dos links.
„„ Não esconda informações importantes no meio do texto - Se tiver
alguma ressalva ou ponto a destacar, faça-o na parte superior da página
ou no início do parágrafo. Parágrafos longos são de difícil leitura, e é
mais complicado obter informações neles. Quanto mais para dentro
do parágrafo você colocar a questão que deseja destacar, menor será a
probabilidade desta ser lida.
„„ Destaque cada página - Tenha o cuidado de criar páginas da web de
modo que cada uma delas seja autossuficiente. Por exemplo: se o leitor
cair em uma das páginas de seu site, a qual depende de uma página que
ele não visitou, deve ser dado um destaque nessa página visitada, de que
ele precisa de informações de outra página, ou criar um vínculo até a outra
página.
„„ Utilize títulos descritivos - O título deverá fornecer informações sobre
o assunto abordado nessa página e também sobre o seu relacionamento
com as outras páginas da apresentação de que faz parte.
„„ Se uma página depender de outra anterior a ela, forneça um vínculo
de retorno à página anterior (de preferência, crie também um vínculo
com a página que ocupa o nível mais alto da hierarquia).
„„ Evite frases do tipo “você poderá evitar esses problemas fazendo...”,
“ao terminar isso, faça aquilo...”, “as vantagens desse método são...”, que
disponham informações as quais estarão sendo apresentadas em outra
página. Ao se deparar logo de início com essas frases, o leitor poderá ficar
confuso.
Fonte: LEMAY, 2001.
220
Linguagens de Programação I
Não exagere na ênfase
Parágrafos com muitas informações em negrito e itálico ou
palavras EM LETRAS MAIÚSCULAS são de difícil leitura,
especialmente se você as utiliza diversas vezes em um mesmo
parágrafo ou se enfatiza trechos muito longos. A melhor maneira
de enfatizar o texto consiste em destacar apenas palavras
pequenas, como, por exemplo E, MAS...
Os textos de vínculo constituem também uma forma de ênfase.
Utilize uma única palavra ou uma frase curta como texto de
vínculo. Não use trechos ou parágrafos inteiros como vínculos.
Não use termos específicos do navegador
Evite fazer referências a recursos específicos de determinados
navegadores. Não use, por exemplo, frases como estas:
„„ Dê um clique Aqui - E se o seu leitor estiver usando um navegador
sem mouse?
„„ Para gravar esta página, abra o menu Arquivo e selecione Salvar
- Cada navegador tem um conjunto diferente de menus e maneiras
específicas de executar a mesma ação, além de idiomas diferentes.
Sempre que possível, evite fazer referência a operações específicas do
navegador nas suas páginas da web.
„„ Utilize o botão Voltar/Back para retornar à página anterior - Como
no item anterior, cada navegador possui um conjunto de botões e
métodos específicos de “retorno”. Para que seus leitores consigam
realmente retornar a uma página anterior ou acessar outra página
específica, estabeleça um vínculo direto com essas páginas.
Verifique a grafia e revise as suas páginas
Parece óbvio esse item, mas, em virtude da quantidade de
páginas que existem e que já visitamos, vale a pena mencionálo. A elaboração de um conjunto de páginas da web e sua
publicação correspondem ao processo de publicação de um livro,
Unidade 8
221
Universidade do Sul de Santa Catarina
à produção de uma revista ou ao lançamento de um produto.
Obviamente, é muito mais fácil publicar páginas na web do que
livros, revistas ou outros produtos. No entanto o fato de ser mais
fácil não significa que o processo deve ser descuidado. Por isso,
existem muitas páginas com muitos erros, pois qualquer pessoa
pode redigir um texto, mesmo sem ser um “expert” em língua
portuguesa, por exemplo.
Lembre-se de que qualquer pessoa poderá ler e explorar suas
páginas da web. Erros ortográficos ou gramaticais produzem uma
impressão negativa do seu trabalho, de você e das informações
que estiver fornecendo. Uma redação ruim poderá irritar o leitor
e fazê-lo desistir de prosseguir com a leitura do seu site, por mais
fascinante que seja o assunto abordado.
Revise e verifique a grafia de cada uma de suas páginas da web.
Se possível, peça a alguém para lê-las. Quando outra pessoa
lê, esta poderá detectar melhor determinados erros os quais
você, por ser o autor, muitas vezes não percebe. Uma simples
revisão poderá aprimorar as suas páginas, facilitando a leitura e
navegação.
222
Linguagens de Programação I
Atividade de autoavaliação
Leia cada enunciado com atenção e responda as questões que seguem.
1.O texto na web apresentado a seguir mostra o tipo de técnica de
redação que deve ser evitado. Pelo fato de todas as informações dessa
página serem apresentadas em formato de parágrafo, os seus leitores
terão de ler todos os parágrafos para localizar as informações que
desejam e, ainda, descobrir como prosseguir com a leitura. Como você
aprimoraria este exemplo? Procure elaborar novamente esta seção, de
forma a destacar melhor os pontos principais do texto e o layout da
página. Não se esqueça de revisar o português e fazer os links, como
veremos abaixo:
Fonte: LE MAY, 2001.
Figura 8.1 – Como construir um website.
O código HTML, para ser utilizado no exercício de
autoavaliação, encontra-se na MIDIATECA. Publique o
seu resultado em EXPOSIÇÃO.
Unidade 8
223
Universidade do Sul de Santa Catarina
Resposta:
224
Linguagens de Programação I
Seção 3 – Projeto e layout da página
O melhor layout a ser seguido, ao elaborar o projeto de cada
página da web, é o seguinte: mantenha o projeto o mais simples
possível. Reduza o número de elementos (imagens, cabeçalhos e
linhas) e lembre-se sempre de chamar a atenção para os pontos
mais importantes da página, sem exagerar.
Use cabeçalho como cabeçalhos
Aqui estamos falando das tags de cabeçalhos <h1>, <h2>... Em
navegadores gráficos, os cabeçalhos são, em geral, representados
em fontes maiores ou em negrito. Por isso, somos sempre
tentados a utilizar uma tag de cabeçalho para fornecer algum tipo
de advertência ou nota, ou mesmo, enfatizar um texto normal.
Os cabeçalhos funcionam melhor, quando utilizados realmente
como cabeçalhos, pois destacam o texto e indicam o início de um
novo tópico. Se você desejar enfatizar uma determinada seção do
texto, considere a possibilidade de utilizar uma imagem pequena,
uma linha ou outra forma de ênfase.
Agrupe visualmente as informações relacionadas
Agrupar informações relacionadas em uma página da web é
uma tarefa de criação e de projeto. Conforme já sugerido, você
pode aumentar a capacidade de consulta através do agrupamento
de informações afins em cabeçalhos. Ao separar visualmente
as seções, você facilita sua diferenciação e enfatiza a relação
existente entre as informações fornecidas.
Se uma página da web contiver diversas seções, separe-as
visualmente, utilizando, por exemplo, um cabeçalho ou uma
linha horizontal, através da tag <HR>.
Unidade 8
225
Universidade do Sul de Santa Catarina
Use um layout padronizado
Em um livro ou revista, as páginas e seções apresentam em geral
o mesmo layout (veja este livro, por exemplo). Os números das
páginas, assim como a primeira palavra apresentada nelas, estão
sempre na posição padrão.
Esse tipo de layout padronizado funciona igualmente bem nas
páginas da web. A atribuição de uma única aparência e de um
único comportamento a todas as páginas da sua apresentação
da web proporciona conforto aos leitores. Depois da segunda ou
terceira página, eles conhecerão os elementos de cada página e
saberão onde localizá-los. Assim, com um projeto padronizado,
os seus leitores podem localizar as informações que necessitam e
navegar pelas suas páginas sem precisar parar em cada uma delas,
para saber onde encontrar essas informações.
Um layout padronizado deve conter:
„„
„„
Elementos de página padronizados - Se você utilizar
cabeçalhos de segundo nível (<H2>), em uma página,
para indicar os tópicos principais, deverá utilizá-los
também para os tópicos principais de todas as outras
páginas. Se tiver incluído um cabeçalho e uma linha
horizontal na parte superior da página, utilize esse
mesmo layout em todas as outras páginas.
Formas padronizadas de navegação - Inclua os seus
menus de navegação na mesma posição, em todas as
páginas (em geral, na parte superior ou inferior da
página), e utilize a mesma quantidade de menus. Se
preferir usar ícones de navegação, lembre-se de utilizar os
mesmos ícones na mesma ordem, em todas as páginas.
Você sabe como os internautas leem na Internet?
Pesquise o assunto no site:
<http:// www.comunidade.sebrae.com.br/intranet/Downloads/
Downloads_GetFile.aspx?id=5101>.
226
Linguagens de Programação I
Seção 4 – Uso de vínculos
Sem os vínculos, as páginas da web não teriam a menor graça e
seria praticamente impossível encontrar algo interessante na web.
Sob vários aspectos, a qualidade dos seus vínculos pode ser tão
importante quanto a criação e o projeto das páginas propriamente
ditas. Considere, na sequência, orientações que Lemay (2001;
2002) coloca em seus livros:
Use menus de vínculos com texto descritivo
Conforme já comentado, quando você organiza os vínculos em
listas ou em outras estruturas semelhantes a menus, o seu leitor
pode consultar rápida e facilmente as opções oferecidas para a
página.
No entanto a simples organização dos vínculos em menus não
é suficiente. Ao organizá-los dessa forma, verifique se as suas
descrições não estão excessivamente reduzidas. Muitas vezes,
somos tentados a usar menus de nomes de arquivo ou de outros
vínculos pouco descritivos.
Se os vínculos forem menus com nomes de arquivo, por exemplo,
como o leitor saberá quais informações encontrará no outro lado do
vínculo? E, assim, como o leitor poderá determinar se está ou não
interessado nessas informações, a partir das limitadas indicações
fornecidas? A maneira correta ofereceria um texto adicional que
descrevesse o conteúdo do arquivo ou, simplesmente, evitasse
o uso de nomes de arquivos. Logo, descreva o conteúdo dos
arquivos no menu, destacando o texto apropriado.
Uso de vínculos no texto
A melhor maneira de fornecer vínculos no texto consiste
em redigir antes o texto sem os vínculos, como se você não
pretendesse incluir vínculo algum nele (para utilizá-lo, por
exemplo, apenas como uma cópia impressa). Em seguida,
destaque as palavras apropriadas que funcionarão como o texto
Unidade 8
227
Universidade do Sul de Santa Catarina
dos vínculos, os quais conduzirão a outras páginas. Ao incluir um
vínculo, verifique se este não está interrompendo o fluxo da página.
A ideia de inclusão de vínculos no meio do texto torna-o
autossuficiente. Dessa forma, os vínculos fornecem informações
adicionais ou superficiais que os leitores podem optar por ignorar
ou acessar, de acordo com seu interesse.
Se você estiver usando um texto apenas para descrever vínculos,
considere a possibilidade de usar um menu de vínculos, em
vez de um parágrafo. Os leitores encontrarão mais facilmente
as informações que estiverem procurando. Em vez de lerem o
parágrafo inteiro, poderão simplesmente dar uma olhada nos
vínculos, para identificar aqueles em que estão interessados.
Uma maneira de saber se você esta incluindo vínculos no texto
de forma apropriada consiste em imprimir a página da web
formatada no seu navegador. Na cópia impressa, sem hipertexto,
o parágrafo faz algum sentido? Se a página ficar esquisita no papel,
ficará esquisita também na web. De modo geral, alguns ajustes
na construção das frases podem tornar o texto mais legível e mais
útil tanto na web quanto na cópia impressa.
Evite a síndrome do “Aqui”
Um erro comum que muitos autores da web cometem ao criar
vínculos no meio do texto consiste no que costumamos chamar
de “síndrome do aqui”. Esta síndrome é a tendência de criar
vínculos com uma única palavra (aqui) destacada e descrever o
vínculo em alguma outra parte do texto. Por exemplo:
Informações sobre o uso de vínculo clique aqui.
Uma opção muito melhor seria usar algo semelhante a isto:
Selecione este link para obter informações sobre o uso de vínculo.
228
Linguagens de Programação I
Ou ainda:
O tutorial de HTML tem informações sobre o uso de vínculos.
Por estarem destacados na página da web, os vínculos se
“sobressaem” visualmente mais do que o texto apresentado ao
redor. Assim, o seu leitor verá o vínculo antes de ler o texto.
Experimente usar vínculos desse modo.
Use vínculos de retorno à origem
Considere a possibilidade de incluir em cada uma das páginas
da sua apresentação, um vínculo com a página de nível mais alto
ou com a home-page. Este vínculo permite que os leitores saiam
rapidamente dos níveis mais profundos do seu documento. Usar
um vínculo de retorno à origem é bem mais fácil que tentar
navegar de volta pela hierarquia das páginas ou utilizar o recurso
de retorno (voltar) de um navegador.
Vincular ou Não Vincular
A exemplo do que ocorre com as imagens gráficas, para todo
vínculo criado, você deverá considerar o motivo pelo qual está
vinculando duas páginas ou seções.
Esse vínculo é útil para os leitores? Ele fornecerá mais informações e os
deixará mais próximos de seus objetivos? Esse vínculo é relevante em
relação ao assunto corrente?
Cada vínculo deve ter uma finalidade. Tenha motivos razoáveis
para estabelecê-los. O simples fato de você mencionar a palavra
“café” em uma página referente a algum outro tópico não
significa que tenha de vinculá-la com um site referente ao café.
Isso pode até parecer interessante, mas, se um vínculo não for útil
para o assunto corrente, servirá apenas para confundir o leitor.
Unidade 8
229
Universidade do Sul de Santa Catarina
Existem algumas categorias de vínculos úteis em páginas da web.
Veja na sequência.
„„ Vínculos explícitos de navegação - São aqueles que indicam os
caminhos específicos que o leitor poderá tomar nas páginas da web:
para frente, para trás, para cima e para o início. Em geral, esses vínculos
são indicados por ícones de navegação.
„„ Vínculos implícitos de navegação -
São aqueles que apenas
sugerem, sem indicar de forma direta, a navegação entre as páginas.
Os menus de vínculos são o melhor exemplo de vínculos implícitos.
O destaque do texto de vínculo torna claro ao leitor que ele poderá
obter maiores informações sobre esse tópico ao selecionar um vínculo
correspondente. Mas isso não é indicado de forma explícita no texto.
Os vínculos implícitos de navegação podem também conter estruturas
de sumário ou outras estruturas de visão geral compostas inteiramente
por vínculos.
„„ Vínculos de definição - Palavras ou definições de conceitos podem
se tornar vínculos excelentes, especialmente se você estiver criando
grandes redes de páginas que contenham glossários. Ao estabelecer
um vínculo entre a primeira ocorrência de uma palavra e sua definição,
você pode explicar o significado dessa palavra aos leitores que não
o conhecem, sem desviar a atenção daqueles que já possuem esse
conhecimento.
„„ Vínculos de tangentes - Vínculos com informações tangentes e
relacionadas são úteis quando o conteúdo do texto pode desviar
a atenção do leitor do objetivo principal da página. Considere os
vínculos de tangente como as notas de rodapé ou as notas de fim em
um texto impresso. Eles podem se referir a citações de outras obras
ou a informações adicionais que sejam interessantes, mas que não
sejam diretamente relacionadas àquelas que você quer transmitir.
Mas cuidado com os vínculos de tangente. É possível você criar
tantas tangentes a ponto de os leitores passarem um tempo enorme
acessando vínculos para outras páginas e não conseguirem, por isso,
retornar ao texto original. Resista à tentação de criar todos os vínculos
que puder e procure estabelecer vínculos apenas para tangentes
relevantes ao seu próprio texto. Evite também duplicar a mesma
tangente – por exemplo, estabelecer vínculos com todas as ocorrências
da palavra web na sua página.
230
Linguagens de Programação I
Seção 5 – Outras sugestões de bons hábitos
A seguir, algumas sugestões sobre os bons hábitos que você deve
desenvolver ao trabalhar com grupos de páginas da web.
Não divida os tópicos entre as páginas
As páginas da web funcionam melhor quando abrangem um
único tópico completamente. Não divida os tópicos entre as
páginas. Mesmo que você crie vínculos entre elas, a transição
pode ser confusa. E ficará ainda mais confusa se um leitor passar
diretamente para a segunda ou a terceira página e não souber o
que está acontecendo.
Se você perceber que um tópico está ficando muito longo para
uma única página, considere a possibilidade de reorganizar o
conteúdo, para que possa dividir esse tópico em vários subtópicos.
Isto funciona especialmente bem em organizações hierárquicas
e permite que você determine exatamente o nível de detalhe
de cada “nível” da hierarquia que deve ser incluído, além do
tamanho e da complexidade a serem atribuídos a cada página.
Não crie páginas a mais ou a menos
Não existem regras para o número de páginas ou para o tamanho
que as suas apresentações da web devem ter. Você pode ter
uma única página ou milhares delas, dependendo do volume
de informações que deseja transmitir e da forma como as tiver
organizado.
Suponha que você queira incluir todas as informações que deseja
transmitir em uma página grande e crie vários vínculos com as
seções dessa página. Você pode optar por um extremo ou por
outro, cada qual com suas vantagens e desvantagens.
Unidade 8
231
Universidade do Sul de Santa Catarina
Vantagens
„„
„„
A manutenção de um único arquivo é mais fácil, e os
vínculos contidos nele não serão rompidos, se você mover
as informações ou atribuir novos nomes aos arquivos
vinculados.
A estrutura é a mesma utilizada em documentos reais.
Desvantagens
„„
„„
„„
Leva muito tempo para se fazer download de um arquivo
grande, especialmente em conexões de rede lentas e se a
página contém muitas imagens gráficas.
Os leitores precisam rolar o texto várias vezes para
localizar o que desejam. O acesso a informações
específicas pode se tornar tedioso. A navegação até
outros pontos que não estejam localizados nem no início
nem no final do documento, torna-se praticamente
impossível.
A estrutura é excessivamente rígida. Uma única página
é, por natureza, linear. Embora você possa passar
diretamente de uma seção para outra, a estrutura linear
ainda reflete a da página impressa e não tira proveito da
flexibilidade das páginas menores vinculadas de forma
não linear.
Ou, por outro lado, você pode criar um conjunto de páginas
pequenas e estabelecer vínculos entre elas.
Vantagens
„„
„„
232
As páginas menores são carregadas rapidamente.
Frequentemente você pode apresentar a página inteira na
tela. Desta forma, as informações contidas nessa página
podem ser facilmente consultadas pelo leitor.
Linguagens de Programação I
Desvantagens
„„
„„
A manutenção de todos esses vínculos pode se tornar um
pesadelo. A simples inclusão de algum tipo de estrutura
de navegação para essa grande quantidade de páginas
criaria milhares de vínculos.
Se houver muitos vínculos entre as páginas, eles ficarão
em desarmonia. É difícil manter a continuidade da
leitura, quando o leitor passa mais tempo alternando
entre documentos do que propriamente lendo o texto.
Afinal, qual é a solução? De modo geral, o assunto que você está
escrevendo determinará o tamanho e a quantidade de páginas
de que você precisará, especialmente se você seguir a sugestão de
usar um tópico por página. Se você testar as suas páginas da web
em uma grande variedade de plataformas e velocidades de rede,
saberá se uma única página é muito grande. Se, por exemplo,
você passar muito tempo rolando o texto do documento ou se ele
demorar mais do que o esperado para ser carregado, significa que
está muito grande.
Assine as suas páginas
Cada página deve conter algum tipo de informação na
parte inferior, que funcione como uma “assinatura”. A tag
<ADDRESS> foi criada especificamente com esse objetivo. A
utilização desta tag é útil nas suas páginas, pois informam:
„„
„„
Sobre como entrar em contato com o autor da página
da web ou com a pessoa responsável pela página, a quem
chamamos de webmaster. Estas informações devem
conter pelo menos o nome e o correio eletrônico dessa
pessoa.
Webmaster é a pessoa
responsável pela criação
e manutenção de um
site na web. Em geral,
as responsabilidades de
um webmaster incluem
responder a mensagens de
correio eletrônico, garantir
a operação apropriada
do site, criar e atualizar
páginas da web e manter
a estrutura e o projeto
do site. Muitas vezes, o
webmaster acumula a
tarefa de administração
de servidores na qual se
alberga o site.
O status da página. Ela está completa? É um trabalho
ainda em andamento? Foi deixada propositalmente em
branco?
Unidade 8
233
Universidade do Sul de Santa Catarina
„„
„„
„„
A data da última revisão realizada na página. Isto é
especialmente importante no caso de páginas alteradas
com muita frequência. Inclua uma data em cada página,
para que as pessoas saibam há quanto tempo ela foi,
criada e/ou atualizada.
Sobre os direitos autorais e as marcas registradas,
quando necessário.
O URL da página. A inclusão de um URL impresso de
uma página que pode ser localizada nesse mesmo URL
pode parecer um pouco exagerada. Mas, e se alguém
imprimir a página e perder todas as outras referências a
ela no meio da pilha de papéis da mesa de trabalho? De
onde elas vieram?
A figura abaixo apresenta um ótimo exemplo de um bloco de
endereço:
Figura 8.2 – Exemplo de assinatura para uma página web.
Uma boa sugestão para a sua página da web é estabelecer um
vínculo entre um URL mailto e o texto que contém o endereço de
correio eletrônico (e-mail) do webmaster, como neste exemplo:
<A HREF=”mailto:[email protected]”>[email protected]</A>
234
Linguagens de Programação I
O endereço da figura anterior ficaria assim:
Figura 8.3 – Exemplo de assinatura para uma página web com mailto.
Tal procedimento permite aos leitores os quais tenham
navegadores que ofereçam suporte ao URL mailto, simplesmente
selecionar o vínculo e enviar uma correspondência para a pessoa
responsável pela página, sem precisar digitar novamente o
endereço em seus programas de correio eletrônico.
Seção 6 - Elementos e atributos obsoletos
No início, o HTML era a linguagem mais utilizada por
cientistas. Eles não precisavam de qualidade gráfica, diferentes
formatações de textos, preocupavam-se muito mais com o
conteúdo do que a forma visual. Como as páginas eram simples,
qualquer navegador poderia ser utilizado para visualização.
Com a evolução dos navegadores que apresentam novas
funcionalidades, para atrair usuário e designers, surgiu a
necessidade de criar páginas mais interessantes e, ao mesmo
tempo, mais complexas.
O design da página passou a ter a mesma importância que
o conteúdo. Em um certo momento, o HTML passou a se
preocupar com ambas as necessidades(conteúdo, designer), mas
não foi muito bem-sucedido. As Web pages ficaram cheias de tags
desnecessárias, muitas tabelas agrupadas e outros truques para
fazer com que o HTML se comportasse como uma linguagem
de design gráfico.
Unidade 8
235
Universidade do Sul de Santa Catarina
As páginas passaram a ter uma codificação mais complexa e de
difícil manutenção e, por consequência, trouxeram problemas de
exibição a certos navegadores.
Foi aí que a W3C resolveu dar um basta nisso e resolveu tornar
essas tags de formatação de texto como obsoletas (deprecated),
ou seja, essas tags de formatação de texto e atributos estariam
condenadas em futuras versões do HTML e do XHTML.
A W3C então incorporou essas tags de formatação de texto/
atributos ao CSS, separando o que é conteúdo da estrutura.
No CSS as tags básicas do HTML definem os
parágrafos, as listas, os cabeçalhos, etc., e o CSS define
como o navegador irá mostrar as informações.
Algumas tags obsoletas do HTML 4.0. são:
TAG HTML
Center
B
U
Font
HTML Atributo
align
background
bgcolor
hspace
vspace
size
Propriedade CSS
text-align:center
font-weight:bold
font-style:italic
font-family:font name
Propriedade CSS
text-align
background-image:url(image)
background-color
padding
padding
font-size:
Exemplo :
align = left|center|right|justify
Exemplo Obsoleto:
<H1 align=“center”> Cabeçalho Centralizado </H1>
Exemplo utilizando CSS:
<HEAD>
<STYLE type=“text/css”>
236
Linguagens de Programação I
H1 { text-align: center}
</STYLE>
<BODY>
<H1> Cabeçalho Centralizado </H1>
Síntese
As principais normas para o projeto e a elaboração de páginas da
web, apresentadas nesta unidade, são destacadas a seguir.
„„
Teste as suas páginas da web em vários navegadores.
„„
Redija suas páginas de forma clara e concisa.
„„
„„
„„
„„
„„
„„
„„
„„
Organize o texto da página, para que os leitores possam
consultar as informações importantes.
Crie páginas independentes de contexto, ou seja, crie
páginas que não dependam de páginas anteriores ou
posteriores.
Não abuse da ênfase e nem utilize as tags de cabeçalho
para dar ênfase.
Não use terminologias específicas de algum navegador.
Revise e verifique a grafia das suas páginas, bem como a
concordância gramatical.
Utilize um layout padronizado e simples em todas as
páginas.
Use menus de vínculos.
Não sobrecarregue a página com imagens bonitas, porém
desnecessárias.
Unidade 8
237
Universidade do Sul de Santa Catarina
Atividades de autoavaliação
Leia cada enunciado com atenção e responda às questões que seguem.
1. Visite os 3 sites seguintes, explore-os e na ferramenta FÓRUM, discuta
o tipo de informação que é apresentada, o projeto e layout da(s)
página(s), o uso de vínculos e imagens. Aponte ainda os recursos
adequados e inadequados:
„„
<http://www.hippo.com.br>
„„
<http://www.livrodereceitas.com>
„„
<www.wikipedia.br>
Saiba mais
Aprofunde os conteúdos estudados nesta unidade, ao consultar as
seguintes referências:
DAMASCENO, Anielle. Webdesign: teoria e prática. São
Paulo: Visual Books, 2006.
LEMAY, Laura. Aprenda em 1 semana HTML 4. São Paulo:
Campus, 2001.
LEMAY, Laura. Aprenda a criar páginas web com HTML e
XHTML em 21 dias. São Paulo: Makron Book, 2002.
RODRIGUES, Bruno. Webwriting redação & informação para
a web. Rio de Janeiro: Brasport, 2006.
Também consulte o(s) seguinte(s) site(s) para aprofundar seus
estudos:
<http://www.unesp.br/prograd/PDFNE2003/Um%20
ambeinte%20de%20aprendizagem.pdf>
(Construção de páginas web: depuração e especificação de um
ambiente de aprendizagem)
<http://www.abraweb.com.br/site/colunistas.php?c=27>
(O valor de um projeto de página web)
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 definição de estilos.
„„ Criar folhas de estilos.
Seções de estudo
Seção 1 O que são os estilos CSS
Seção 2 A sintaxe CSS
Seção 3 Tipos de definição de estilos
Seção 4 A ordem da cascata
9
Universidade do Sul de Santa Catarina
Para início de estudo
Você deve estar perguntando: o que será que são folhas de
estilo? Para que servem? Já ouvi falar tanto nisso, mas não
tenho ideia do que seja. Nesta unidade, aprenderemos a criar
essas folhas de estilos no seu documento HTML ou em parte
dele. Mas, antes de definirmos folhas de estilo, que tal você
descrever o que é um estilo?
Conseguiu? Ótimo! Observe que você já sabe o que é estilo, ou
mesmo, já tem uma noção a respeito do assunto: do que se trata,
etc. Sabendo o que isto significa, podemos começar o nosso
estudo de folhas de estilo.
240
Linguagens de Programação I
Seção 1 – O que são os estilos CSS
As tags que definem os elementos do HTML foram concebidas
para definir conteúdos. O autor do HTML nunca teve qualquer
intenção de usar esta linguagem para definir estilos gráficos para
as páginas. As tags do HTML foram idealizadas para declarar
coisas como “Isto é um parágrafo”, ou “Isto é um cabeçalho”. Para
isso, colocavam-se tags como <P> ou <H1> em redor do texto. A
forma como esta informação devia ser apresentada graficamente
era um problema que o navegador tinha de resolver, tendo em
consideração o significado de cada tag.
Este conceito perfeitamente racional era muito adequado
enquanto o objetivo das páginas se limitava à escrita e à partilha
de textos na web, mas a rápida aceitação da web fez com
que as pessoas que davam importância ao design também se
interessassem por este meio.
Esse interesse estimulou esforços para criar páginas graficamente
elaboradas, mais ao gosto dos designers. Um dos efeitos
importantes foi a completa adulteração do propósito de diversas
tags. A tag <TABLE>, por exemplo, foi concebida unicamente
para apresentar tabelas com dados numéricos, mas os designers
passaram a usá-la para colocar as tags em diversos pontos das
páginas, em arranjos cada vez mais complexos.
Mas isto não foi suficiente, porque havia coisas que não podiam
ser feitas usando apenas as tags disponíveis. Para dar aos designers
aquilo que eles pediam, os criadores dos navegadores acharam
que era boa ideia os primeiros inventarem as suas próprias tags
e acrescentarem atributos estilísticos às que já existiam. Estas
extensões permitiram usar o HTML para dar cores e estilos
diferentes ao texto e aplicar outras formatações.
As iniciativas dos criadores destas novas tags e atributos
ignoraram por completo a filosofia na qual o criador do HTML,
Tim Berners Lee, baseou-se para criar a linguagem. As novas
tags (como a tag <FONT>) davam importância ao aspecto gráfico
que produziam, e não ao significado daquilo que continham.
Apesar de todas as contraindicações, a criação e rápida
disseminação de tags conduziu a uma situação em que os
conteúdos das páginas estavam completamente misturados com
Unidade 9
241
Universidade do Sul de Santa Catarina
os aspectos estilísticos. Este contexto conduziu o HTML, no
final da década de 1990, a um estado em que era muito difícil
criar e fazer a manutenção de websites compostos por mais do que
um número reduzido de páginas. Os conteúdos das páginas não
eram mais do que imensas “sopas de tags” mal organizadas, cujo
significado não era muito claro.
Este problema começou a ser resolvido pelo World Wide Web
Consortium (W3C) com a criação dos padrões HTML 4, CSS,
XML e XHTML. Para o W3C, o HTML  deve ser usado em
conjunto com estilos CSS (folhas de estilo em cascata), sendo
que os conteúdos se exprimem em HTML e os estilos em CSS.
As folhas de estilo permitem que você defina a aparência padrão
de diferentes partes de seu documento. E é precisamente esse
o objetivo das folhas de estilo em cascata. Com elas, você pode
controlar a cor e o estilo de fontes, ajustar o espaço em branco, etc.
Este novo paradigma para a criação de páginas é bem suportado
por todos os navegadores dominantes: Netscape/Mozila,
Microsoft Internet Explorer, Opera, Google Chrome, etc...
Vantagens dos estilos CSS
As páginas que usam estilos CSS, além de serem mais fáceis
de escrever, são também mais leves e carregam mais rápido no
navegador.
Como já mencionado, as regras de estilos definem o layout, a
tipografia e os recursos de projeto de um documento, separados
da definição da estrutura do documento. Assim, a estrutura
de um documento é definida através da utilização do HTML.
Um autor pode, então, definir a aparência e o projeto de sua
preferência, usando uma folha de estilo.
A folha de estilo é um conjunto de regras,
normalmente definido em um arquivo separado, que
um navegador compatível utiliza para representar o
documento estruturado, definido com o HTML.
242
Linguagens de Programação I
Um navegador que não ofereça suporte para folhas
de estilo ainda pode representar o arquivo como um
documento HTML padrão e este documento deve ser
autossuficiente, sem depender da folha de estilo.
As folhas de estilos permitem ganhar tempo e flexibilidade
O que é interessante na ideia das folhas de estilos é que elas são
flexíveis. As tags e atributos usados para aplicar folhas de estilo
em um documento HTML não prendem os autores e fabricantes
de navegadores a um tipo único de folha de estilo.
Os estilos CSS definem o aspecto gráfico a dar às tags do
HTML. Os estilos podem ser definidos numa folha de estilos,
externa ou internamente, no próprio documento HTML.
Quando definidos numa pasta externa, os estilos podem ser
compartilhados por muitas páginas, o que permite alterar
instantaneamente o aspecto gráfico de todas as páginas,
modificando apenas a pasta em que os estilos são definidos.
Quando você tinha de usar as técnicas antigas para fazer
alterações no aspecto gráfico de um website, você era obrigado(a)
a alterar todas as tags <FONT> e todas as tabelas usadas para
formatar as páginas. Isto tinha que ser feito em todas as páginas.
Quando você utiliza estilos CSS, basta modificar um número
reduzido de definições numa única folha de estilo para,
instantaneamente, atualizar centenas ou milhares de páginas
com um esforço mínimo. Os erros ocorrem com muito menor
frequência e são muito mais fáceis de corrigir.
A facilidade com que as alterações são feitas dá uma maior
flexibilidade ao website e melhoram o seu desempenho. As
páginas ficam simultaneamente mais ricas e mais leves.
Unidade 9
243
Universidade do Sul de Santa Catarina
O “mecanismo” de cascata
O termo cascata se refere à sequência ordenada de estilos de
formatação do documento. As regras das folhas posteriores têm
precedência sobre as anteriores. A ordem de estilos aplicados é:
„„
„„
„„
um arquivo de folha de estilos separado, que é vinculado
- uma folha de estilos externa;
informações de estilos incorporados dentro da página uma folha de estilo interna;
estilos aplicados diretamente a texto selecionado - um
estilo linear ou inline.
Atenção! As definições dos diferentes tipos de estilos, você
estudará na seção 3 desta Unidade.
As folhas de estilos CSS dão-nos muita liberdade na forma de
definir os estilos. No mesmo documento, podemos utilizar uma
ou mais pastas externas, definir os estilos na secção <HEAD> do
documento ou utilizar o atributo STYLE nas tags do HTML.
O navegador lê todas as definições de estilos que encontra e,
quando aparecem estilos repetidos, ele combina-os num só estilo,
seguindo algumas regras simples.
Uma das regras da cascata diz que, ao encontrar várias versões
para o mesmo estilo, o navegador guarda a última que encontrou.
Outra regra diz que alguns estilos são herdados pelas tags que se
encontram dentro de outras tags.
Limitações dos navegadores atuais
As limitações associadas ao suporte que os navegadores atuais
oferecem devem estar sempre presentes na mente do criador de
páginas baseadas em CSS. Se você usar apenas as funcionalidades
que são bem suportadas, que já são muitas, não será preciso
tomar muitas precauções. Se você decidiu utilizar funcionalidades
mais avançadas, definidas pelos padrões CSS, lembre-se de que é
preciso testar tudo de forma exaustiva, em todos os navegadores
relevantes, para não ter surpresas desagradáveis.
244
Linguagens de Programação I
Seção 2 - A sintaxe CSS
Agora você está pronto(a) para usar as folhas de estilo em cascata.
Elas utilizam uma sintaxe simples para definir a propriedade de
estilo. A sintaxe das definições CSS é composta por duas partes:
uma tag e uma declaração.
Veja:
tag { propriedade: valor }
Os nomes de propriedade fazem parte da especificação CSS
(color, background, etc.). Os valores representam todos os valores
válidos para a propriedade específica. Veja um exemplo:
Tag
Declaração
H1
{ color: green }
Neste exemplo, a tag H1 diz que o estilo se aplica a tags <h1>, e a
definição diz que a cor do texto destas tags deve ser verde (“green”).
A declaração fica entre chaves ({...}) e pode conter várias
definições. Cada definição é formada por um par-propriedade:
valor, que é separado da propriedade pelo caractere : (dois
pontos).
A declaração pode ser composta de uma lista de parespropriedade: valores separados por ; (ponto e vírgula). Veja o
exemplo abaixo:
Tag
P
Declaração
{ color: green;
font-family: arial}
Unidade 9
245
Universidade do Sul de Santa Catarina
Essas listas podem ser usadas de várias formas, para aplicar estilo
a uma tag. A W3C definiu um conjunto de tags e atributos que
podem ser usados para aplicar qualquer folha de estilo em um
documento. A base das folhas de estilo é simples (será estudada
com mais ênfase na próxima seção). Veja:
„„
„„
„„
folhas de estilo inline – é uma definição de estilo que
pode ser aplicada a uma tag HTML específica, através
da utilização do atributo STYLE;
folhas de estilo interna – é uma definição de estilo que
pode ser criada entre as tags <STYLE> e </STYLE>
(isto deve estar no cabeçalho do documento HTML).
Este tipo de definição estabelece um estilo para todas as
ocorrências de determinada tag HTML. Por exemplo,
você pode definir todas as ocorrências de cabeçalho
<H1>, para que sejam apresentadas em tipo vermelho;
folhas de estilo externa – é uma folha de estilo que
pode ser importada de um arquivo externo, através da
utilização de <LINK REL=“stylesheet” HREF=“nome
do arquivo de folha de estilo”>.
O ideal é remover toda a formatação das tags da
linguagem e colocar em folhas de estilo em cascata.
Seção 3 – Tipos de definição de estilos
Quando o navegador encontra uma folha de estilos num
documento, ele a usa para formatar os elementos desse
documento. Existem três formas básicas e diferentes (como já
comentado) para definir estilos e inseri-los num documento.
246
Linguagens de Programação I
1. Folhas de Estilo Inline
Usa-se um estilo “inline”, quando a definição só precisa ser
utilizada uma única vez.
A definição de estilos “inline” faz-se através do atributo STYLE
colocado na tag à qual queremos aplicar o estilo. A definição
pode conter qualquer uma das propriedades CSS. A sintaxe a
seguir mostra como é a definição de um estilo inline:
<tag STYLE=”propriedade: valor; propriedade: valor”>... </tag>
A definição de estilos utilizando o atributo STYLE faz-nos
perder muitas das vantagens das folhas de estilos, porque
acabamos por misturar estilos com conteúdos. Esta forma de
definir estilos deve ser feita em uma única tag.
O atributo STYLE aceita quase todas as propriedades CSS.
O exemplo seguinte mostra como podemos controlar a cor e a
margem esquerda de um parágrafo:
<html>
<body>
<p style=”color: blue; margin-left: 20px”>
Isto é um parágrafo formatado com o atributo style</p>
<p> este parágrafo não tem estilo
</body>
</html>
Unidade 9
247
Universidade do Sul de Santa Catarina
Assim fica no navegador:
Figura 9.1 – Exemplo da criação de um estilo em parágrafo.
Se desejarmos atribuir a uma propriedade um valor que contém
espaços, devemos colocá-lo entre apóstrofos (‘). No exemplo
seguinte, usaremos o tipo de letra “sans serif ” a um parágrafo e
“comic sans ms” a outro:
<html>
<body>
<p style=”font-family: ‘sans-serif’”>
Neste parágrafo o tipo de letra é “sans-serif”</p>
<p style=”font-family: ‘comic sans ms’”>
Neste parágrafo o tipo de letra é “comic sans ms”
</p>
</body>
</html>
A visualização é esta:
Figura 9.2 - Exemplo da criação de um estilo em parágrafos diferentes.
248
Linguagens de Programação I
2. Folha de Estilos Interna
As folhas de estilos internas devem ser utilizadas, quando as
definições são usadas por um único documento. Neste caso, as
definições dos estilos são colocadas dentro de uma tag <STYLE>,
no cabeçalho do documento HTML. Veja este exemplo:
<STYLE TYPE=”text/css”>
tag {propriedade : valor; propriedade : valor; ...}
tag {propriedade : valor; propriedade : valor; ...}
...
</STYLE>
Observe o uso do atributo TYPE na tag <STYLE> para indicar
o uso da folha de estilo em cascata. Uma folha de estilos interna
deve ser usada, quando os estilos são usados uma única vez.
Nesse caso, as definições fazem-se dentro de uma tag <STYLE>
que deve ser colocada dentro da tag <HEAD> da página
HTML, assim:
<HEAD>
<STYLE type=”text/css”>
body { background-color: red }
p
{ margin-left: 20px }
</STYLE>
</HEAD>
O navegador lê as definições contidas na tag <STYLE> e faz a
formatação dos elementos da página, aplicando essas definições.
O exemplo seguinte, permite-lhe experimentar isto de imediato e
ver seu resultado no navegador:
Unidade 9
249
Universidade do Sul de Santa Catarina
<html>
<head>
<style type=”text/css”>
H1 { color: green }
</style>
</head>
<body>
<H1>Este cabeçalho tem cor verde</H1>
</body>
</html>
Visualização:
Figura 9.3 – Exemplo de folha de estilo interno.
Se o valor que desejamos dar à propriedade tiver mais do
que uma palavra, então devemos colocá-lo entre aspas, como
mostrado a seguir:
<html>
<head>
<style type=”text/css”>
p { font-family: “comic sans ms” }
</style>
</head>
<body>
<p>
</p>
</body>
</html>
250
O texto deste parágrafo tem tipo de letra “comic sans ms”.
Linguagens de Programação I
Visualize agora:
Figura 9.4 – Exemplo de folha de estilo com propriedade com mais de uma palavra.
Dentro das chaves { e }, podemos colocar várias definições
separadas pelo caractere “;” (ponto e vírgula), conforme já
comentado. O exemplo seguinte define três propriedades para a
tag <P>, que são o alinhamento, a cor do texto e o tipo de letra:
<html>
<head>
<style type=”text/css”>
p { text-align: center;
color: green;
font-family: arial
}
</style>
</head>
<body>
<p> O texto deste parágrafo tem tipo de letra “arial”,
cor verde e está alinhado ao centro.
</p>
</body>
</html>
Unidade 9
251
Universidade do Sul de Santa Catarina
Observe como fica no navegador:
Figura 9.5 – Exemplo de folha de estilo com mais de uma definição.
Para tornarmos mais legíveis as definições dos estilos,
devemos colocar cada definição em uma linha
diferente, mas podemos também escrever tudo na
mesma linha.
O comportamento normal dos navegadores consiste em ignorar
os elementos cujo significado desconhecem. Isto significa que um
navegador muito antigo, que não suporta estilos CSS, ignorará
a tag <STYLE>, mas não ignorará o texto que está escrito lá
dentro. Se for necessário evitar que esse navegador escreva o texto
das definições, devemos então ocultá-lo, colocando-o dentro de
um comentário do HTML, como mostramos a seguir:
<head>
<style 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 aplicação da folha
de estilo à tag mencionada.
252
Linguagens de Programação 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 espaçamento
entre as linhas?
Calma, não se preocupe. Existem as propriedades da CSS
que você encontra em vários livros e sites. Não é necessário
decorar todas as propriedades. Mas é interessante conhecêlas para poder criar as folhas de estilo a serem utilizadas no
seu documento HTML e utilizar as tags HTML apenas para o
conteúdo, sem se preocupar com layout. Um bom site é o da
própria W3C: http://www.w3.org/TR/REC-CSS1.
Consulte também outros sites na seção Saiba Mais, nesta
unidade.
3. Folha de Estilos Externa
Uma folha de estilos externa é a solução mais indicada quando
se pretende aplicar os mesmos estilos a várias páginas. Este
método de formatação permite-nos alterar os estilos apenas na
folha e assim aplicá-los a todas as páginas imediatamente. Todas
as páginas ficam atualizadas com as novas definições. Para uma
página poder usar uma folha de estilos, basta colocar dentro do
cabeçalho (<HEAD>) uma tag <LINK> com uma referência
para a folha de estilos que contém as definições, como se ilustra a
seguir:
<HEAD>
<LINK rel=”stylesheet” type=”text/css” href=”meu_estilo.css”>
</HEAD>
A tag LINK associa um arquivo de folha de estilo externa
ao documento corrente. Desta forma, um estilo padronizado
para um site pode ser determinado pelo gerente, por exemplo,
e aplicado aos documentos criados por um autor de uma
Unidade 9
253
Universidade do Sul de Santa Catarina
organização. O atributo REL relaciona o link a uma folha de
estilos externa.
A utilização de folha de estilos externa permite poupar tempo,
ganhar flexibilidade e aumentar a consistência das páginas que
constituem um website. Quando guardamos os estilos em uma
pasta externa e os aplicamos a todas as páginas de um website, a
modificação de diversas qualidades do aspecto gráfico passa a ser
uma tarefa fácil.
O navegador lê as definições contidas na folha de estilos
“meu_estilo.css” e faz a formatação dos elementos do documento
aplicando essas definições.
Mais uma vez, o caminho dos arquivos das folhas de estilo deve
estar no mesmo diretório da página, ou ser definido o caminho
absoluto ou relativo.
Para poder testar este tipo de inserção de folhas de estilho, crie
um arquivo texto (pode ser editado no próprio bloco de notas do
Windows) chamado “meu_estilo.css”. Em seu conteúdo, escreva
as formatações dos exemplos.
Sempre que alterar o valor de um estilo, basta salvar o arquivo
CSS e atualizar (F5) a página, sem a necessidade de nenhuma
alteração no arquivo HTML.
Dentro do mesmo arquivo, pode haver a definição de layout de
várias tags, classes de forma que, com a abertura e fechamento
das chaves {}, delimitam uma declaração de outra.
Se você abrir o arquivo “meu_estilo.css” irá reparar que a folha
de estilos externa é apenas um arquivo de texto que contém
definições CSS. No seu conteúdo, não podem aparecer tags do
HTML, pois só são permitidas definições CSS válidas.
Elementos de bloco e elementos “inline”
Todos os elementos visíveis numa página escrita em HTML
pertencem a um destes dois tipos: bloco ou “inline”.
254
Linguagens de Programação I
Os elementos de bloco, como por exemplo, <div> ou <table>,
começam numa nova linha e, ao terminarem, ocorre novamente
uma mudança de linha. Os elementos de bloco recebem larguras
que são calculadas em função da largura do bloco em que estão
contidos.
Os elementos “inline”, como <b> ou <span>, não dão início
a uma nova linha, e a sua largura é determinada apenas
pelo seu conteúdo. O seu comportamento é semelhante ao
comportamento do texto simples.
Agrupar tags
Se você desejar aplicar os estilos a mais do que uma tag, agrupe
as tags que partilham as mesmas definições. Para isso, escreva
uns seguidos dos outros, separados por vírgulas. No exemplo
seguinte, as tags de <h1> até <h6> partilham todas a mesma
definição:
h1,h2,h3,h4,h5,h6
{
color: green
}
Tags de 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, através da utilização do atributo CLASS. Apenas as
definições de estilo para esse elemento na classe específica serão
aplicadas a ele.
As definições de classes permitem-nos definir estilos diferentes
que podem ser aplicados à mesma tag. Imagine que você precisa
ter dois tipos diferentes de parágrafo no documento, um alinhado
à direita e outro alinhado ao centro. Vejamos como as classes
tornam isto fácil:
Unidade 9
255
Universidade do Sul de Santa Catarina
<html>
<head>
<style type=”text/css”>
p.direita { text-align: right }
p.centro { text-align: center }
</style>
</head>
<body>
<p class=”direita”>
Este parágrafo está alinhado à direita.</p>
<p class=”centro”>
Este parágrafo está alinhado ao centro.</p>
</body>
</html>
Visualize:
Figura 9.6 – Exemplo de tag de classe.
O atributo CLASS, como qualquer outro atributo, só pode ser
especificado uma única vez em uma tag. O exemplo seguinte está
errado:
256
Linguagens de Programação I
<p class=”direita” class=”verde”>
Este parágrafo tem um erro causado pela utilização
repetida do atributo class.
</p>
As definições de classe também podem ser criadas sem colocarmos
o nome de uma tag no início da definição. Quando isso acontece,
as definições podem ser aplicadas a qualquer tag, cujo atributo
CLASS tenha o valor correto. O exemplo seguinte define uma
classe que pode ser utilizada com qualquer tag da HTML:
<html>
<head>
<style type=”text/css”>
.centro { text-align: center }
</style>
</head>
<body>
<h2 class=”centro”>
Cabeçalho alinhado ao centro
</h2>
<p class=”centro”>
Este parágrafo também está alinhado
ao centro.
</p>
</body>
</html>
Acompanhe a visualização:
Unidade 9
257
Universidade do Sul de Santa Catarina
Figura 9.7 – Exemplo de tag de classe em tags diferentes.
Perceba que a definição de classes genéricas, que pode ser
utilizada em qualquer tag, necessita obrigatoriamente um ponto
(.) antes do nome da classe.
Essa metodologia é bem interessante, pois existe a possibilidade
de reaproveitamento de estilos, sempre que for necessário utilizar
a referida formatação.
O critério de nomenclatura das classes é o seguinte:
Nome_da_tag.nome_da_classe
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
página. As regras do HTML ditam que os valores do atributo
ID não podem repetir-se numa mesma página. Daí resulta que o
número de elementos no documento com um determinado ID é
um ou é zero.
A regra de seleção para o estilo definido no exemplo seguinte
indica que ele só pode ser aplicado a uma tag <P> que tenha o
valor “para1” no atributo ID:
258
Linguagens de Programação I
<html>
<head>
<style type=”text/css”>
p#para1
{
text-align: center;
color: red
}
</style>
</head>
<body>
<p id=”para1”>
Este parágrafo está alinhado ao centro e
tem cor vermelha.
</p>
</body>
</html>
Visualize:
Figura 9.8 – Exemplo de tag de ID.
Se tentarmos aplicar esta regra a uma tag <DIV> usando
id=”para1”, vemos que o navegador não a aceita, pois ele foi
definido somente para a tag <P>:
Unidade 9
259
Universidade do Sul de Santa Catarina
<html>
<head>
<style type=”text/css”>
p#para1
{
text-align: center;
color: red
}
</style>
</head>
<body>
<div id=”para1”>
Este elemento não está alinhado ao centro e não
tem cor vermelha porque não é um parágrafo.
</div>
</body>
</html>
A visualização fica assim:
Figura 9.9 – Exemplo de tag ID utilizada em outra tag não definida.
Se quisermos que a regra se aplique a qualquer tag que tenha o
id=“para1”, basta escrevê-la na forma seguinte:
260
Linguagens de Programação I
#para1
{
text-align: center;
color: red
}
A regra acima é aplicável a qualquer tag que tenha o ID correto,
porque não está sendo definido para uma tag específica, e sim
para o ID que se aplica a todas as tags. No exemplo seguinte, ela
seria aplicada à tag <H1>:
<H1 id=”para1”>As músicas do Bonga são bué de fixes</H1>
Escrever Comentários em Folha de Estilos
Podemos inserir comentários nas definições CSS para explicar o
código que escrevemos, tornando-o mais fácil de compreender. Ao,
mais tarde, voltarmos a uma folha de estilos, ou se a partilharmos
com outra pessoa, será mais fácil perceber como funciona.
Para iniciar um comentário, escreva a sequência de caracteres “/*”,
depois o texto do comentário e, no fim, escreva “*/” para terminar
o comentário. O exemplo seguinte mostra como se faz:
p
{
text-align: center;
/* Isto é um comentário */
color: black;
/* O MSIE 5 não reconhece os comentários!!! */
font-family: arial
}
Unidade 9
261
Universidade do Sul de Santa Catarina
Seção 4 - A ordem da cascata
Quando um estilo é definido mais do que uma vez, qual das
definições deve o navegador escolher? A primeira? A última? Nenhuma
delas? Para decidir, o navegador aplica as regras seguintes
(listadas por ordem crescente de importância):
„„
„„
„„
estilos definidos por omissão (são aplicados sempre que
não existirem outros que se sobreponham a eles);
estilos definidos numa folha de estilos interna (dentro da
tag <STYLE>) ou em uma pasta externa;
estilos "inline” (definidos através do atributo STYLE nas
tags do documento HTML).
Assim, temos que os estilos que são definidos na própria tag
através do atributo STYLE têm a prioridade mais elevada. As
definições que o atributo STYLE faz sobrepõem-se a qualquer
definição que tenha sido feita antes.
Um documento HTML pode definir ou utilizar mais
do que uma folha de estilos. Quando isso acontece, é
possível que algumas propriedades sejam definidas
numa folha e definidas de novo numa outra. Nestes
casos, o navegador deve aplicar as regras descritas
para decidir qual das definições é mais importante.
Suponha que uma folha de estilos externa defina as seguintes
propriedades para a tag h2:
H2
{
color: red;
text-align: left;
font-size: 8pt
}
262
Linguagens de Programação I
Mas existe uma folha de estilos interna com as seguintes
propriedades também para a tag h2:
H2
{
text-align: right;
font-size: 20pt
}
Se a página que contém a folha de estilos interna usa a tag <link>
para se ligar à folha de estilos externa indicada antes, então as
duas definições serão combinadas para produzir a seguinte versão
final para a tag h2:
H2
{
color: red;
text-align: right;
font-size: 20pt
}
Veja que a cor foi herdada da folha externa, mas o alinhamento
do texto e o tamanho de letra foram substituídos pelas definições
dadas na folha interna.
Herança de Estilos entre Elementos
Algumas propriedades CSS definidas para um elemento são
automaticamente aplicadas aos descendentes desse elemento.
Quando isso acontece, diz-se que as propriedades são herdadas.
O exemplo seguinte mostra como funciona este mecanismo de
“herança” de estilos:
Unidade 9
263
Universidade do Sul de Santa Catarina
<html>
<head>
<style type=”text/css”>
div { color: blue }
</style>
</head>
<body>
<div>O texto dos elementos &lt;div&gt; tem cor azul.
<p>
Este parágrafo está dentro de um elemento
&lt;div&gt;. Ele herda a cor azul.
</p>
</div>
<p>
Este parágrafo não está dentro de nenhum
elemento que lhe deixe uma “herança”.
</p>
</body>
</html>
No exemplo acima, a folha de estilos expressa que o texto das tags
<DIV> deve ter cor azul. O parágrafo que está dentro de uma
tag <DIV> herda a cor azul, porque a propriedade color é herdada
pelos descendentes de uma tag. Já o segundo parágrafo não está
dentro de nenhuma tag que lhe deixe uma “herança” (que neste
caso é a propriedade color), e, por isto, o seu texto tem a cor
normal.
Visualização:
Figura 9.10 – Exemplo de herança de estilos.
264
Linguagens de Programação I
Há outras propriedades que só afetam o elemento ao qual são
aplicadas e não se propagam aos seus descendentes. Diz-se que
estas propriedades não são herdadas. O exemplo seguinte é
semelhante ao anterior com o acréscimo da propriedade border,
que não é herdada:
<html>
<head>
<style type=”text/css”>
div
{ color: blue;
border: solid thin red
}
</style>
</head>
<body>
<div>
Os elementos &lt;div&gt; recebem uma linha de contorno
vermelha (border) e texto com cor azul.
<p>
Este parágrafo está dentro de um elemento &lt;div&gt;.
Ele herda a cor azul mas não herda a linha de contorno (border).
</p>
<div>
Tal como o elemento &lt;div&gt; principal este elemento &lt;div&gt;
recebe a sua própria linha de contorno.
</div>
</div>
</body>
</html>
Como você pode observar no seu navegador, a propriedade color
propaga-se à tag <P> mas a propriedade border, não:
Figura 9.11 – Outro exemplo de herança de estilos.
Unidade 9
265
Universidade do Sul de Santa Catarina
Síntese
Nesta unidade, aprendemos a criar estilos para um documento
HTML.
Através da utilização das folhas de estilo, você pode definir desde
tipos de fonte para as diferentes tags da HTML até cores de
fontes, cores e imagens gráficas de fundo, margens, espaçamento,
estilo de tipo e muito mais. Basicamente, qualquer parte da
aparência visual de seu documento pode ser definida com as
folhas de estilo em cascata.
Apesar de os navegadores atuais oferecerem um bom suporte
para os estilos CSS, é preciso chamar a atenção para o fato de
ainda subsistirem alguns problemas, quando aplicamos técnicas
avançadas de formatação baseadas em CSS. Por isso, é necessário
testar e aplicar os estilos, para que você veja o resultado em vários
navegadores.
Nesta unidade, também definimos algumas tags utilizadas para
criar estilos em documentos HTML, que podem ser resumidas
no quadro a seguir:
266
Tag
Descrição
<STYLE>
Define estilos CSS – estilos internos
<LINK>
Define uma referência para um estilo externo
<DIV>
Insere uma seção no documento
Linguagens de Programação I
Atividades de autoavaliação
1. Crie uma folha de estilo externa para seu documento HTML. Utilize as
mais variadas propriedades em tags como <BODY>, <P>, <DIV> etc.
Veja as referências para consultar as propriedades e seus valores em
sites apropriados.
Saiba mais
Você pode saber mais sobre o assunto estudado nesta unidade,
consultando os seguintes sites:
„„ <http://www.w3.org/TR/REC-CSS1>(Cascading style sheets, level 1)
„„ <http://pt-br.html.net/tutorials/css/>
„„ <http://www.htmlhelp.com/reference/css/structure.html> (CSS structure and rules)
„„ <http://www.maujor.com/> (CSS para web design)
Unidade 9
267
Universidade do Sul de Santa Catarina
„„ <http://paginas.fe.up.pt/~jvv/Assuntos/CSS/CSS_ficheiros/frame.html> (Cascading style
sheets)
„„ <http://unix.wmonline.com.br/dreamweaver/tutoriais/melhordaweb/css_dw/> (Como
utilizar folhas de estilos em cascata)
Também existem outras propriedades de recursos mais avançados
para a utilização em folhas de estilos que poderão ser encontradas
em:
„„ <http://www.linhadecodigo.com.br/artigo.aspx?ID=82>.
268
unidade 10
Criação de Formulários
Objetivos de aprendizagem
„„ Criar um formulário.
„„ Aprender os elementos básicos de entrada dos
formulários.
Seções de estudo
Seção 1 Criando um formulário
Seção 2 Campos de entrada de texto
Seção 3 Seleções e listas de opções
Seção 4 Botões de rádio
Seção 5 Caixas de validação
Seção 6 O botão de envio
Seção 7 Exemplo completo de formulário
Seção 8 Exemplo de um formulário utilizando Javascript
Universidade do Sul de Santa Catarina
Para início de estudo
Até agora você viu a forma na qual o HTML mostra a
informação, essencialmente mediante o texto, imagens e
links. Até então, os leitores estão sentados lendo as páginas,
percorrendo vínculos e absorvendo as informações que você
apresentou.
Os formulários mudam inteiramente essa situação. O leitor passa
a interagir com o seu site através de uma grande quantidade
de ações que se podem realizar na web: comprar um artigo,
preencher uma enquete, enviar um comentário ao autor, etc.
Você viu, anteriormente, que podemos, por intermédio dos
links, entrar em contato diretamente com um correio eletrônico.
Entretanto esta opção pode ser pouco versátil em alguns casos,
se o que desejamos é que o leitor nos envie uma informação bem
precisa através da página criada por você. Isto pode ser realizado
por meio do uso de formulários.
Os formulários são estas famosas caixas de texto e botões que
podemos encontrar em muitas páginas web. São muito utilizados
para realizar buscas ou também para introduzir dados pessoais,
por exemplo, em sites de comércio eletrônico. Os dados que
o usuário introduz nestes campos são enviados ao correio
eletrônico do administrador pelo formulário, ou são processados
automaticamente por um programa.
Usando HTML, você pode unicamente enviar o formulário
a um correio eletrônico. Se quiser processá-lo por intermédio
de um programa, a coisa pode ser um pouco mais complexa, já
que você terá que empregar algumas linguagens para web como
ASP ou PHP, por exemplo, que permitirá, entre outras coisas, o
tratamento de formulários.
270
Linguagens de Programação I
Seção 1 - Criando um formulário
Um formulário é uma seção da página HTML que contém
elementos os quais permitem ao leitor introduzir dados numéricos,
textos curtos, textos extensos, selecionar elementos em uma lista
com várias escolhas, responder facilmente com respostas do tipo
“sim” ou “não”, selecionar rapidamente uma opção em um pequeno
grupo, etc.
Nesta unidade, você aprenderá a criar layouts do formulário
A criação de um formulário envolve, em geral, duas etapas
independentes:
1) a criação do layout do formulário;
2) a criação de um programa de script no servidor para processar
as informações que você obtém a partir de um formulário.
Para criar um formulário, você utiliza as tags <FORM>...</
FORM>. A tag <FORM> por si só não faz com que o navegador
desenhe algo na página nem permite inserir dados. Ela contém
elementos que recolhem os dados (campos de texto, botões, etc.) e
possui atributos que dizem ao navegador como e para onde deve
enviar os dados para processamento.
Atributos da tag <FORM>
Acompanhe os atributos da tag <FORM>, utilizados para a
criação de formulários.
ACTION
Este atributo da tag <FORM> define o tipo de ação a ser
realizado com o formulário. Como já comentado anteriormente,
existem duas possibilidades:
„„
„„
o formulário é enviado a um endereço de correio
eletrônico;
o formulário é enviado a um programa ou script que
processa seu conteúdo, ou seja, uma URL.
Unidade 10
271
Universidade do Sul de Santa Catarina
No primeiro caso, o conteúdo do formulário é enviado ao
endereço de correio eletrônico especificado por meio da sintaxe
abaixo:
<FORM action=”mailto:endereç[email protected]”>...</FORM>
Se o que o que você deseja é que o formulário seja processado por
um programa, você deve especificar o endereço do arquivo que
contém tal programa. Neste caso, a tag ficaria da seguinte forma:
<FORM action=”endereço do arquivo”>...</FORM>
A maneira de se expressar a localização do arquivo que contém o
script é a mesma já estudada na unidade sobre vínculos.
METHOD
Este atributo da tag <FORM> encarrega-se de especificar
a forma na qual o formulário é enviado, ou seja, seleciona
um método para acessar a URL de ação. Os métodos usados
atualmente são GET e POST. Ambos os métodos transferem
dados do navegador para o servidor, com a seguinte diferença
básica:
„„
POST - os dados inseridos fazem parte do corpo da
mensagem enviada para o servidor. Transfere-se grande
quantidade de dados e os mesmos não são visualizados
pelos usuários;
„„
GET - os dados inseridos fazem parte da URL associada
à consulta enviada para o servidor. Suporta até 128
caracteres, e os dados podem ser vistos pelos usuários na
URL.
Os formulários podem conter qualquer formatação - parágrafos,
listas, tabelas, imagens - exceto outros formulários. Em especial,
colocamos dentro da tag <FORM> as formatações para campos
272
Linguagens de Programação I
de entrada de dados, que são três: <INPUT>, <SELECT> e
<TEXTAREA>.
Todos os campos de entrada de dados têm um atributo NAME,
ao qual associamos um nome, utilizado, posteriormente, pelo
sistema, para enviar os dados. Normalmente, são usados “scripts”.
Os scripts organizam esses dados de entrada de todos os
campos em um conjunto de informações e realizam uma tarefa
programada, como por exemplo, enviar os dados do formulário
para o seu e-mail.
Como a HTML não tem condições de fazer isso, é necessário
utilizar scripts CGI, PERL, ASP, JavaScript, etc., para
executar estas tarefas. Porém estes tipos de scripts necessitam de
aprendizado mais dedicado para criar o que você deseja, e são
muito mais complexos do que a linguagem HTML, pois eles
processam informações.
ENCTYPE
Este outro atributo da tag <FORM> indica a forma na qual a
informação que for mandada pelo formulário viajará. No caso
mais corrente, ao se enviar o formulário por correio eletrônico,
o valor deste atributo deve ser “TEXT/PLAIN”. Assim, você
consegue que o conteúdo do formulário seja enviado como texto
plano dentro do e-mail.
Se você deseja que o formulário se processe automaticamente
por um programa, geralmente não se utiliza este atributo no seu
valor padrão, ou seja, não incluindo ENCTYPE dentro da tag
<FORM>.
Assim, para o caso mais habitual - o envio do formulário por
correio - a tag de criação do formulário terá o seguinte aspecto:
<FORM action=”mailto:endereç[email protected] (ou o nome do arquivo
de script)” method=”post” enctype=”text/plain”>...</FORM>
Unidade 10
273
Universidade do Sul de Santa Catarina
Entre esta tag e seu fechamento, você colocará o resto de tags que
darão forma ao seu formulário, as quais serão vistas nas próximas
seções.
O HTML propõe uma grande diversidade de alternativas na
hora de criar os formulários. Elas vão desde a clássica caixa de
texto até a lista de opções, passando pelas caixas de validação.
Todos os elementos do formulário dão suporte às configurações
das folhas de estilo (CSS). Você vai ver em que consiste cada
uma destas modalidades e como pode implementá-las em seu
formulário.
Seção 2 – Campos de entrada de texto
Os campos de textos permitem ao usuário digitar texto em
um campo de única linha. A tag <INPUT> inicia a criação de
campos de dados ou caixas de texto. Esse é um dos elementos
que mais encontramos nos formulários.
A tag <INPUT> não tem tag de fechamento. O emprego
destas caixas está fundamentalmente destinado à tomada de
dados breves: palavras ou conjuntos de palavras de longitude
relativamente curta. Você verá, mais adiante, que existe outra
forma de tomar textos mais longos a partir de outra tag. Há
vários atributos que permitem a criação de diferentes campos de
entrada de dados.
Atributo NAME
O nome do elemento do formulário é de grande importância para
poder identificá-lo em nosso programa de processamento ou no
e-mail recebido. Sua sintaxe é:
<INPUT name=”nome_do_campo”>
274
Linguagens de Programação I
Este atributo é especialmente usado para que você dê um nome
ao campo. Ele não aparece na página, mas serve para identificar
o campo e o valor digitado no e-mail que você receber ou algum
elemento do script a ser processado.
Nunca deixe de definir o nome dos campos, pois, só assim, você
poderá saber o que cada usuário preencheu em cada campo,. Por
exemplo, se você tem vários campos de texto, cada um para um
tipo de informação diferente, você usa o atributo NAME para
identificar o campo. Você sempre verá em todas as tags INPUT
que este atributo estará presente.
Atributo TYPE
Por outro lado, é importantíssimo indicar o atributo TYPE, já
que existem outras modalidades de formulário que usam esta
mesma tag. Em campo de dados de texto, o atributo TYPE
recebe o valor text.
A tag é da seguinte forma:
<INPUT type=”text” name=”nome”>
Deste modo, expressamos nosso desejo de criar uma caixa de texto,
cujo conteúdo será chamado nome (por exemplo). O aspecto deste
tipo de caixas é conhecido, como pode ser visto aqui:
Figura 10.1 – Caixa de texto.
Quando INPUT não apresenta o atributo TYPE, assume-se
TYPE= “TEXT” como padrão da formatação.
O exemplo seguinte mostra um formulário simples com dois
elementos input:
Unidade 10
275
Universidade do Sul de Santa Catarina
<FORM action=”processar.php” method=”post”>
Primeiro nome: <INPUT type=”text” name=”primeiro_nome”><br>
Último nome: <INPUT type=”text” name=”último_nome”>
</FORM>
Acompanhe o aspecto do formulário, quando visualizado no seu
navegador:
Figura 10.2 – Exemplo de um formulário.
Atributo VALUE
Em alguns casos, pode ser interessante atribuir um valor definido
ao campo em questão. Isto pode ajudar ao usuário a preencher
mais rapidamente o formulário ou a dar alguma ideia sobre a
natureza de dados que se deseja. Este valor inicial do campo
pode ser expresso mediante o atributo value. Vejamos seu efeito
com um exemplo simples:
<input type=”text” name=”nome” value=”Ana Paula”>
Gera-se, assim, um campo deste tipo:
276
Linguagens de Programação I
Figura 10.3 – Exemplo de caixa de texto com valor definido.
Campo de dados texto em formato senha
O campo de dados texto, em formato senha, é uma entrada
de texto na qual os caracteres são escondidos por asteriscos.
Podemos esconder o texto escrito por meio de asteriscos de forma
a fornecer certa confiabilidade. Este tipo de campo é análogo
aos de texto, com somente uma diferença: o atributo TYPE será
igual ao “password ”:
<INPUT type=”password” name=”nome”>
Neste caso, pode ser comprovado que, ao escrever dentro
do campo, no lugar de texto, serão vistos asteriscos. Estes
campos são ideais para a introdução de dados confidenciais,
principalmente códigos de acesso. É muito usado para entradas
de senhas, como se pode ver no exemplo:
<FORM>
Usuário: <INPUT TYPE=”TEXT NAME”=login><br>
Senha: <INPUT TYPE=”PASSWORD NAME”=”senha”>
</FORM>
Unidade 10
277
Universidade do Sul de Santa Catarina
Resultado:
Figura 10.4 – Exemplo de caixa de texto em formato senha.
Campo de dados escondido
O campo de dados escondido funciona igual a um campo de
texto, só que ele não aparece no formulário para o visitante. Ele
está lá no código, mas o visitante não pode vê-lo ou alterá-lo. Isso
é importante, para você incluir informações que ache necessárias,
mas que não deseja que o visitante altere. Veja um exemplo:
<FORM>
<INPUT TYPE=”HIDDEN” NAME=”Escondido” Value=”Sim”>
</FORM>
Aqui o campo está escondido. O visitante não o vê, mas ele
vai ser processado pelo formulário. Você pode incluí-lo sem
problemas junto com os outros elementos. Por exemplo:
<FORM>
Usuário: <INPUT TYPE=”TEXT” NAME=”login”><br>
Senha: <INPUT TYPE=”PASSWORD” NAME=”senha”>
<INPUT TYPE=”HIDDEN” NAME=”Escondido” Value=”Sim”>
</FORM>
A visualização deste exemplo é a seguinte:
278
Linguagens de Programação I
Figura 10.5 – Exemplo de caixa de texto com campo escondido.
Em alguns casos, à parte dos próprios dados enviados pelo
usuário, pode ser prático enviar dados definidos por nós mesmos,
que ajudem o programa em seu processamento do formulário.
Vejamos um outro exemplo:
<input type=”hidden name”=”site” value=”www.meusite.com”>
Esta tag, incluída dentro de nosso formulário, enviará um dado
adicional ao correio ou ao programa encarregado da gestão do
formulário. Poderíamos, a partir deste dado, tornar conhecida
para o programa a origem do formulário ou algum tipo de ação a
ser realizada (um re-endereçamento, por exemplo).
Atributo SIZE
O atributo SIZE define o tamanho da caixa em número de
caracteres. Se, ao escrever, o usuário chega ao final da caixa, o
texto irá desfilando, à medida que se escreve, fazendo desaparecer
a parte de texto que fica à esquerda. Este atributo também
especifica o tamanho do espaço no vídeo para o campo do
formulário. Só é válido para campos TEXT e PASSWORD. O
valor padrão é 20. Veja um exemplo:
Unidade 10
279
Universidade do Sul de Santa Catarina
<FORM>
Endereço: <INPUT TYPE=”TEXT” SIZE=”35”>
</FORM>
A visualização é a seguinte:
Figura 10.6 - Exemplo da utilização do atributo SIZE.
Atributo MAXLENGTH
Este atributo indica o tamanho máximo do texto que pode ser
“tomado” pelo formulário. É importante não confundi-lo com o
atributo SIZE. Enquanto o primeiro define o tamanho aparente
da caixa de texto, o MEXLENGTH indica o tamanho máximo
real do texto que pode ser escrito, em número de caracteres.
Podemos ter uma caixa de texto com um tamanho
aparente (SIZE), que é menor do que o tamanho máximo
(MAXLENGTH). O que ocorrerá, neste caso, é que, ao ser
escrito, o texto irá desfilando dentro da caixa, até que cheguemos
ao seu tamanho máximo, definido por MAXLENGTH. Neste
momento, será impossível continuar escrevendo. Este atributo só
é válido para campos de entrada TEXT e PASSWORD.
<FORM>
Dia do mês: <INPUT TYPE=”TEXT” NAME=”ex” MAXLENGTH=”2”>
</FORM>
280
Linguagens de Programação I
Resultado:
Figura 10.7 - Exemplo da utilização do atributo MAXLENGTH.
No exemplo acima, apenas 2 caracteres serão lidos pelo
formulário, e não será possível digitar mais do que 2 caracteres
no campo.
Quando você deseja utilizar elementos de formulário,
você deve escrevê-los sempre entre as tags <form>...</
form>. Caso contrário, os elementos serão vistos
perfeitamente no Internet Explorer, enquanto em
outros navegadores podem não ser.
É por isso que, para mostrar um campo de texto, não
adianta colocar a tag <input>, e sim, colocá-la dentro
de um formulário, assim:
<form>
<input type=”text” name=”nome”
value=”Josefa Palotes”>
</form>
Área de texto longo
Se você deseja colocar à disposição do usuário um campo de
texto onde possa escrever sobre um espaço composto de várias
linhas, você tem, então, que utilizar a tag <TEXTAREA> e seu
fechamento correspondente.
Unidade 10
281
Universidade do Sul de Santa Catarina
Estes tipos de campos são práticos, quando o conteúdo a ser
enviado não é um nome, telefone ou qualquer outro dado breve, e
sim um comentário, opinião, etc.
Dentro desta tag, você deve indicar o atributo NAME para
associar o conteúdo a um nome, que será semelhante a uma
variável em linguagens de programação. Além disso, você pode
definir as dimensões do campo a partir dos seguintes atributos:
„„
ROWS: Define o número de linhas do campo de texto.
„„
COLS: Define o número de colunas do campo de texto.
A tag fica desta forma:
<TEXTAREA name=”comentário” rows=”10” cols=”40”>...</TEXTAREA>
O resultado é o seguinte:
Figura 10.8 - Exemplo da utilização de área de texto.
Mesmo assim, ainda é possível definir o conteúdo do campo.
Para isso, você não usará o atributo VALUE, e sim o conteúdo
entre as tags que lhe desejamos atribuir. Vejamos:
<textarea name=”comentário” rows=”10” cols=”40”>Escreva seu comentário....</textarea>
282
Linguagens de Programação I
Você obtém o resultado:
Figura 10.9 - Exemplo da utilização de área de texto com conteúdo definido.
Repare que, no atributo “COLS”, nós definimos o número de
colunas para a largura do campo de texto; e, em “ROWS”, o
número de linhas para o campo de texto. Se o usuário digitar
mais do que 10 linhas ou se o texto ocupar mais do que as 10
linhas definidas, surgirá uma barra de rolagem. Os valores destes
atributos podem ser modificados à vontade, de acordo com a sua
necessidade.
Seção 3 – Seleções e listas de opções
Efetivamente, os textos são uma forma muito prática para se
fazer chegar a informação do navegante. Porém, em muitos
casos, os textos são dificilmente adaptáveis a programas que
possam processá-los devidamente. Ou pode ser, também,
que seu conteúdo não se ajuste ao tipo de informação que
requeremos. É por isso que, em determinados casos, pode
ser mais efetivo propor uma escolha ao navegante, a partir da
exposição de uma série de opções.
Este é o caso de, por exemplo, oferecer uma lista de países, o
tipo de cartão de crédito para um pagamento, etc. Estes tipos de
opções podem ser expressos de diferentes formas.
Unidade 10
283
Universidade do Sul de Santa Catarina
As listas de opções são tipos de menus desdobráveis que nos
permitem escolher uma (ou várias) das múltiplas opções que
nos propõem. Para construí-las, utilizaremos uma tag com seu
respectivo fechamento: <SELECT>.
Como para os casos já vistos, dentro desta tag definiremos seu
nome por meio do atributo NAME. Cada opção será incluída em
uma linha precedida da tag <OPTION>.
Veja, a partir destas diretrizes, a forma mais típica e simples
desta tag:
<SELECT name=”estação”>
<option>Primavera</option>
<option>Verão</option>
<option>Outono</option>
<option>Inverno</option>
</SELECT>
O resultado é:
Figura 10.10 - Exemplo de seleção.
A tag SELECT pode ser vista modificada, principalmente a
partir de outros dois atributos: SIZE e MULTIPLE.
„„
284
Atributo SIZE – indica o número de elementos da lista,
visíveis no formulário. O resto pode ser visto por meio da
barra lateral de deslocamento. Exemplo:
Linguagens de Programação I
<SELECT name=”estação” size=”3”>
<option>Primavera</option>
<option>Verão</option>
<option>Outono</option>
<option>Inverno</option>
</SELECT>
Visualize agora:
Figura 10.11 - Exemplo de seleção com o atributo SIZE.
„„
Atributo MULTIPLE – permite a seleção de vários
elementos da lista. A escolha de mais de um elemento se
faz a partir das teclas CTRL ou SHIFT ou com o mouse.
Se for possível, não utilize MULTIPLE. Não
recomendamos a prática desta opção, já que o
manejo das teclas CTRL ou SHIFT, para escolher
várias opções, pode ser desconhecido para o
usuário. Evidentemente, sempre cabe a possibilidade
de explicar como funciona, apesar de ser uma
complicação a mais para o visitante.
Vejamos qual é o efeito produzido por esses atributos:
Unidade 10
285
Universidade do Sul de Santa Catarina
<SELECT name=”estação” size=”3” MULTIPLE>
<option>Primavera</option>
<option>Verão</option>
<option>Outono</option>
<option>Inverno</option>
</SELECT>
A lista poderá ser selecionada dessa forma:
Figura 10.12 - Exemplo de seleção com o atributo MULTIPLE.
A tag <OPTION> ainda pode ser utilizada juntamente com
outros atributos, tais como SELECTED e VALUE.
„„
Atributo SELECT - Da mesma forma que o
MULTIPLE, este atributo não toma nenhum valor,
a não ser o de, simplesmente, indicar que a opção
apresentada está escolhida por padrão. Esse atributo é
aplicado à tag <OPTION>.
Assim, se mudamos a linha do código anterior:
286
Linguagens de Programação I
<SELECT name=”estação”>
<option>Primavera</option>
<option>Verão</option>
<option SELECTED>Outono</option>
<option>Inverno</option>
</SELECT>
O resultado será:
Figura 10.13 - Exemplo de seleção com o atributo SELECTED.
„„
Atributo VALUE - Define o valor da opção que será
enviada ao programa ou ao correio eletrônico, se o
usuário escolhe esta opção. Este atributo pode ser muito
útil, se o formulário for enviado a um programa, visto
que, a cada opção, se pode associar um número ou letra,
o qual se torna muito mais fácil de manipular do que
uma palavra ou texto. Poderíamos, assim, escrever linhas
do tipo:
<option value=”1”>Primavera</option>
Deste modo, se o usuário escolhe primavera, o que chegará
ao programa (ou ao correio) é uma variável chamada estação,
que terá como valor 1. No correio eletrônico, por exemplo,
receberíamos:
Unidade 10
287
Universidade do Sul de Santa Catarina
estação=1
Seção 4 - Botões de rádio
Os botões de rádio indicam uma lista de itens, dos quais apenas
um pode ser escolhido de cada vez. Os botões de rádio usam a
tag <INPUT> com o atributo TYPE igual a “radio”. Você indica
os grupos de botões de rádio, usando o mesmo atributo NAME
para cada um.
Além disso, cada um dos botões de rádio deve ter um atributo
VALUE exclusivo, indicando o valor da seleção. Veja o exemplo:
<form>
<input type=”radio” name=”sexo” value=”masculino”> Masculino<br>
<input type=”radio” name=”sexo” value=”feminino”> Feminino
</form>
Este é o aspecto do formulário, quando visualizado em um
navegador:
Figura 10.14 - Exemplo de botão de seleção.
288
Linguagens de Programação I
repare que só se pode selecionar uma das opções dadas. Elas
excluem-se mutuamente. Se o usuário escolhe, supostamente,
feminino, receberemos como resultado:
Sexo=”feminino”
Observe que a tag <input type=”radio”> somente
coloca o campo para clicar na página. Os textos que
aparecem ao lado, assim como as quebras de linha,
devem ser dispostos com o correspondente texto
no código da página e com as tags HTML de que
necessitarmos.
Por padrão, todos os botões de rádio estão desativados (não
selecionados). Você pode determinar o botão de rádio padrão
de um grupo, através da utilização do atributo CHECKED, da
seguinte forma:
<form>
<input type=”rádio” name=”sexo” value=”masculino”> Masculino<br>
<input type=”rádio” name=”sexo” value=”feminino” checked> Feminino
</form>
Vejamos o efeito:
Figura 10.15 - Exemplo de botão de seleção selecionado.
Unidade 10
289
Universidade do Sul de Santa Catarina
Seção 5 - Caixas de validação
As caixas de validação (“checkboxes”) ou verificação devem ser
usadas sempre que desejamos que o usuário aprove (ou não) itens
dentro de um pequeno grupo. É permitido validar mais do que
uma opção simultaneamente. Ou seja: as caixas de verificação
permitem a seleção de vários itens de uma lista.
Cada caixa pode estar ativada, ou desativada (o padrão é
desativada). A tag <INPUT>, juntamente com o atributo TYPE,
definem as caixas de validação, quando TYPE=“checkbox”.
Observe o exemplo:
<form>
<input type=”checkbox” name=”patins”>Eu tenho patins.<br>
<input type=”checkbox” name=”skate”>Eu tenho um skate.<br>
<input type=”checkbox” name=”bicicleta”>Eu tenho uma bicicleta.
</form>
Acompanhe o aspecto do formulário, quando visualizado em um
navegador:
Figura 10.16 - Exemplo de caixa de validação.
Repare que você pode selecionar cada uma das opções de forma
independente da outra. Estes tipos de elementos podem ser
ativados ou desativados pelo usuário com um simples clique sobre
a caixa em questão.
290
Linguagens de Programação I
Da mesma forma que para os botões de rádio, podemos ativar a
caixa de validação por meio do atributo CHECKED. Exemplo:
<form>
<input type=”checkbox” name=”patins” checked>Eu tenho patins.<br>
<input type=”checkbox” name=”skate”>Eu tenho um skate.<br>
<input type=”checkbox” name=”bicicleta”>Eu tenho uma bicicleta.
</form>
Visualize:
Figura 10.17 - Exemplo de caixa de validação selecionada.
O tipo de informação que chegará ao nosso correio (ou ao
programa) será do tipo:
patins=on (ou off dependendo se tiver sido ativada ou não)
Unidade 10
291
Universidade do Sul de Santa Catarina
Seção 6 – O botão de envio
Os botões de envio orientam o navegador para que envie os dados
do formulário ao servidor. Você deverá incluir pelo menos um
botão de envio em cada formulário. Para criar um botão de envio,
use “SUBMIT” como valor do atributo em uma tag <INPUT>,
da seguinte forma:
<INPUT type=“submit”>
Você pode modificar o texto de rótulo do botão, usando o
atributo VALUE, como neste exemplo:
<input type=”submit” value=”Enviar”>
O aspecto deste botão é o seguinte:
Figura 10.18 - Exemplo de botão de envio.
Quando o usuário clicar sobre o botão “Enviar”, as respostas e
texto inseridos no formulário são enviados para processamento.
O atributo action do elemento <FORM> contém o endereço
(URL) do recurso da web que está encarregado de realizar
esse processamento. É para lá que o conteúdo do formulário é
enviado. Veja este exemplo:
292
Linguagens de Programação I
<form name=”entrada” action=”página2.html” method=”get”>
Nome:
<input type=”text” name=”nome”>
<input type=”submit” value=”Enviar”>
</form>
Observe o aspecto do formulário, quando visualizado em um
navegador:
Figura 10.19 – Exemplo de formulário.
Os formulários, assim, não somente permitem captar uma
informação do usuário como também apresentam uma outra
série de funções. Concretamente, os formulários permitem-nos
enviar informações através do seu botão de envio. Também pode
ser prático propor um botão ‘Apagar Campos’ ou, ainda, propor
dados ocultos que possam ajudar-nos em seu processamento.
Botão apagar campos
Este botão nos permite apagar o formulário por completo, caso o
usuário deseje refazê-lo desde o princípio. Sua estrutura sintática
é igual à anterior, só que utilizamos o atributo TYPE com o
valor “reset”:
<input type=”reset” value=”Apagar Campos”>
Unidade 10
293
Universidade do Sul de Santa Catarina
A diferença entre o botão de envio, indispensável em qualquer
formulário, para o botão de Apagar Campos é meramente
optativa, já que este último não é utilizado frequentemente.
Tenha cuidado de não colocá-lo muito perto do botão de envio e
de distinguir claramente um do outro.
Botões normais
Dentro dos formulários, também podemos colocar botões
normais, clicáveis como qualquer outro botão. Da mesma forma
que ocorre com os campos HIDDEN, estes botões por si sós não
têm muita utilidade, mas poderemos necessitá-los para realizar
ações no futuro. Sua sintaxe é a seguinte:
<input type=”button” value=”Texto escrito no botão”>
A visualização ficaria desta maneira:
Figura 10.20 - Exemplo de botão.
O uso mais frequente de um botão é na programação do cliente.
Utilizando linguagens como Javascript, podemos definir ações a
tomar, quando um usuário clica o botão de uma página web.
294
Linguagens de Programação I
Seção 7 - Exemplo completo de formulário
Com esta unidade, você finaliza o estudo sobre formulários.
Passamos, agora, a exemplificar todo o aprendido a partir da
criação de um formulário, que consulta o grau de satisfação
dos usuários de uma linha de ônibus fictícia. O formulário
está construído de modo que se enviem os dados por correio
eletrônico a uma caixa de entrada determinada.
Vemos o formulário nesta página. Você deve agora construí-lo,
para ver se realmente entendem bem os temas sobre formulários.
Nome
E-mail
Cidade
Sexo
Homem
Mulher
Frequência das viagens
Comentários sobre sua satisfação pessoal
Desejo receber notificação das novidades nas linhas de ônibus.
Figura 10.21 - Exemplo de um formulário completo.
Unidade 10
295
Universidade do Sul de Santa Catarina
A seguir, também mostraremos o código fonte deste formulário,
importante para o seu olhar, mesmo que seja rapidamente.
<form action=”mailto:[email protected]” method=”post” enctype=”text/plain”>
Nome <input type=”text” name=”nome” size=”30” maxlength=”100”> <br>
E-mail<input type=”text” name=”email” size=”25” maxlength=”100” value=””>
<br>
Cidade <input type=”text” name=”cidade” size=”20” maxlength=”60”><br>
Sexo<br>
<input type=”radio” name=”sexo” value=”Masculino” checked> Homem<br>
<input type=”radio” name=”sexo” value=”Feminino”> Mulher<br>
<br>
Frequência das viagens <br>
<select name=”utilização”>
<option value=”1”>Várias vezes por dia
<option value=”2”>Uma vez por dia
<option value=”3”>Várias vezes por semana
<option value=”4”>Várias vezes por mês
</select>
<br><br>
Comentários sobre sua satisfação pessoal<br>
<textarea cols=”30” rows=”7” name=”comentários”></textarea>
<br><br>
<input type=”checkbox” name=”receber_info” checked>
Desejo receber notificação das novidades nas linhas de ônibus. <br><br>
<input type=”submit” value=” Enviar formulário”> <br> <br>
<input type=”Reset” value=”Apagar tudo”>
</form>
Para finalizar, veja um modelo de correio eletrônico recebido na
empresa de ônibus, quando um usuário qualquer preenchesse este
formulário e clicasse sobre o botão de envio:
296
Linguagens de Programação I
nome=Frederico Silvestre
[email protected]
cidade=Rio de Janeiro
sexo=Masculino
utilização=2
comentários=Acho que não é uma boa linha. Colocar mais ônibus.
receber_info=on
Seção 8 – Exemplo de um formulário utilizando Javascript
JavaScript é uma linguagem para páginas web. Os scripts escritos com
JavaScript podem ser colocados dentro das suas páginas HTML. Com
JavaScript, você é capaz, por exemplo, de responder muito facilmente
a eventos iniciados pelo usuário. Deste modo, você pode criar páginas
muito sofisticadas com a ajuda desta linguagem.
Estudos mais avançados de Java Script serão abordados em outras
disciplinas do curso. Vamos ver um exemplo, utilizando JAVASCRIPT?
Antes de qualquer coisa, vamos criar um script simples que contém
uma função chamada Enviar(). A página HTML terá dois elementos
textuais, um campo texto e um botão para enviar os dados da caixa de
texto para serem processadas.
<script language=”JavaScript”>
function Enviar(form) {
document.write(“Seu nome é: “+form.nome.value);
}
</script>
<form>
Digite seu nome:<br>
<input type=”text” name=”nome”>
<hr>
<input type=”button” name=”botão1” value=”Teste a Informação” onClick=”Enviar(this.form)”>
</form>
Unidade 10
297
Universidade do Sul de Santa Catarina
Vamos a uma rápida explicação. Todo script é executado dentro
das tags <SCRIPT>...</SCRIPT>. Você pode usar essas tags no
seu documento, no lugar que desejar. Muitos autores declaram
os scripts dentro das tags <HEAD> quando utilizam funções
Javascript, como é o caso do exemplo anterior (foi utilizada
a função Enviar() com o parâmetro FORM). As funções
são convocadas por eventos iniciados pelo usuário. Elas são
carregadas, antes que o usuário possa fazer alguma ação que
chamará a função.
Quando executarmos o código anterior, surgirá no seu navegador
a seguinte tela:
Figura 10.22 – Visualizando um formulário HTML.
Digite seu nome na caixa de texto e, após, clique no botão
“Teste a Informação”. Após o clique neste botão (pelo atributo
ONCLICK), a função Enviar(form) será chamada. Dentro desta
função, temos o comando document.write(), que escreve na tela
alguma informação. Poderíamos substituir este comando pelo
comando alert(), que mostra a informação em uma janela. Como
desejamos mostrar na tela o nome que foi digitado na caixa de
texto, utilizamos o comando form.<nome da caixa de texto>.value.
Então, o comando fica assim: form.nome.value para pegar o valor
da caixa de texto chamada “nome”. O resultado na tela, após o
clique no botão, será:
298
Linguagens de Programação I
Figura 10.23 – Resultado da ação do botão.
O estudo de Javascript não faz parte da nossa disciplina,
por isso, seguem, abaixo, alguns links para você
aprofundar seu estudo:
• <http://www.javascript-tutorial.com.br/>
• <http://www.cm-braganca.pt/document/448112/503209.pdf>
• <http://www.mozilla.org/js/>
• <http://pt.wikipedia.org/wiki/JavaScript>
Síntese
Caro(a) aluno(a)!
Nesta unidade, você aprendeu a criar formulários. Os
formulários são de extrema importância no HTML, uma
vez que são responsáveis pela interação entre um usuário e o
servidor, possibilitando a troca de dados ou informações.
O uso de formulário é importante, quando desejamos enviar
os dados cadastrados em um formulário para outra página ou
pelo correio eletrônico. Quando precisamos enviar dados para
outra página, faz-se necessária a utilização de outra linguagem
de programação para tornar o processo dinâmico, entre eles:
Javascript, Php, Asp, etc.
Unidade 10
299
Universidade do Sul de Santa Catarina
Veja, a seguir, um breve relato dos elementos estudados nesta
unidade.
Elementos para Formulários
Elemento
Descrição
<form>
Define um formulário
<input>
Insere um campo para introduzir dados
<textarea>
Define uma área de texto (permite inserir texto com várias
linhas e um número ilimitado de caracteres)
<select>
Define uma lista com várias opções selecionáveis
<option>
Insere uma opção a mais numa lista com várias opções
selecionáveis
<button>
Define um botão que pode ser pressionado
Atividades de autoavaliação
1. Que tal, agora, você criar um formulário? Suponha que você irá fazer
uma pesquisa sobre o usuário do seu site. Pergunte nome, endereço,
e-mail, profissão, sexo, e sugirá uma lista de opções do que ele
gostaria de visualizar no site. Não se esqueça de incluir um campo para
comentários. Publique na ferramenta EXPOSIÇÃO do ambiente on-line.
Saiba mais
Aprofunde os conteúdos estudados nesta unidade, ao consultar as
seguintes referências:
„„ <www.icmc.usp.br/ensino/material/html/forms.html> (Formulários)
„„ <http://www.mhavila.com.br/topicos/web/valform.html> (Validação de formulários
HTML com JavaScript)
„„ <http://www.criarweb.com/artigos/93.php?manual=2> (Formulários HTML)
300
Para concluir o estudo
Caro(a) aluno(a)!
Conhecer HTML é imprescindível para qualquer profissional
que pretenda trabalhar com desenvolvimento web, sendo este
o primeiro passo na confecção de páginas na internet. Neste
livro abordamos os conceitos introdutórios de HTML e suas
características, utilização de tags de formatação de textos
e parágrafos, estilos, blocos de texto, alinhamentos, listas,
links, imagens, tabelas e células. Destacamos a importância e
características dos frames, uso de formulários, alguns comandos
básicos de JAVASCRIPT, bem como criar páginas eficientes.
Espero que você tenha gostado da disciplina e que tenha
aproveitado os conhecimentos adquiridos para iniciar a
construção de sua página web. A nossa preocupação foi
direcioná-lo(a) ao início da construção de sites simples,
colocando em prática os conceitos básicos sobre as tags de
HTML, da melhor forma possível. Sabemos que a criação
das páginas pode ser aprofundada em cada unidade estudada,
bem como através de linguagens dinâmicas que permitem a
interação do usuário com a página, como por exemplo, Php,
Asp, Javascript, etc. Por isso, desejamos que você não pare seus
estudos aqui! Siga na sua constante busca de conhecimentos.
Espero que você consiga tirar proveito dos temas aqui
trabalhados e aplicá-los em seus projetos pessoais tanto quanto
profissionais. Que o nosso esforço lhe traga muito sucesso. Boa
sorte!
Abraços, Patrícia
Referências
FLANAGAN, David. JavaScript: o guia definitivo. 4ª ed.
Porto Alegre: Bookman, 2004.
GRAHAM, Ian S. HTML 4.0 sourcebook: a complete guide
to HTML 4.0 and HTML extensions. New York: Wiley
Computer Publishing, 1998.
LEMAY, Laura. Aprenda em 1 semana HTML 4. Rio de
Janeiro: Editora Campus, 1998.
MARCONDES, Christian Alfim. HTML 4.0 fundamental:
a base da programação para web. São Paulo: Editora Érica,
2005.
NIEDERST, Jennifer. Web design in a nutshell: a desktop quick
reference. Sebastopol: O’Reilly, 1998.
PRATES, Rubens. HTML: guia de consulta rápida. São
Paulo: Editora Novatec, 1997.
RAMALHO, José Antônio Alves. HTML 4: prático e
rápido. São Paulo: Editora Berkeley, 1999.
REHDER, Wellington da Silva & PEREIRA, Marcelo
Gino. HTML: hypertext markup Language. São Paulo: Editora
Viena, 2003.
WEINMAN, Lynda; WEINMAN, Bill. Design criativo
com Html 2: um guia prático e completo para design na web.
Rio de Janeiro: Ciência Moderna, 2002.
Universidade do Sul de Santa Catarina
Sites de Referência
•
<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>
304
•
<http://rouder.vilabol.uol.com.br/html.htm>
•
<http://www.hexagora.com/en_home.asp>
•
<http://www.icmc.usp.br/ensino/material/html/edicao.html>
•
<http://www.mat.ua.pt/antoniop/html/intro.htm>
•
<http://members.fortunecity.com/vshelter/html/>
•
<http://eof.alunos.dcc.fc.up.pt/manuais/HTML/HTML.html>
•
<http://www.webwritersbrasil.com.br/detalhe.asp?numero=145>
•
<http://www.artifice.web.pt/tutoriais>
•
<http://vitoria.upf.tche.br/~carolina/ccc002/oficina/>
•
<http://www.maujor.com/blog/2006/04/06/el-html/>
•
<http://enciclopedia.tiosam.com/enciclopedia/enciclopedia.asp?title=Wiki>
•
<http://www.mxstudio.com.br/views.glossario.php?cid=6&char=&p=5>
•
<http://www.imasters.com.br/artigo/4224/css/>
•
<http://www.w3schools.com/>
•
<http://www.webwriter.dk/english/index.htm>
•
<http://www.htmlbeauty.com/>
•
<http://www.pagebreeze.com>/
•
<http://forum.htmlstaff.org/>
Sobre a professora conteudista
Patrícia Gerent Petry nasceu em Florianópolis, SC. Formada
em Ciência da Computação pela Universidade Federal de
Santa Catarina. Mestre em Ciência da Computação, área
Informática e Educação, pela Universidade Federal de Santa
Catarina, tendo como tema principal de sua dissertação “O
Processo de Ensino e Aprendizagem de Algoritmos”. Atuou
como professora substituta da Universidade Federal de Santa
Catarina. Foi professora nas instituições de ensino superior:
Universidade do Vale do Itajaí e Faculdades Barddal.
Atualmente é Analista de Sistemas dos Correios/SC e atua
como professora da Universidade do Sul de Santa Catarina
desde 1998. Atuou por muitos anos nas disciplinas de
Programação I, Programação II, Laboratório de Informática
e Análise e Projeto de Sistemas I dos cursos de Sistema de
Informação e Ciência da Computação no ensino presencial da
UNISUL.
No ensino virtual, atua como tutora nas cadeiras de
Introdução à Internet, Lógica de Programação I e II,
Linguagem de Programação I do curso de Tecnólogo em Web
Design e Programação.
Publicou diversos artigos científicos e capítulo de um livro na
área de Informática e Educação.
Respostas e comentários das
atividades de autoavaliação
Unidade 1
1) Resposta Pessoal
Unidade 2
1) Não. A maioria dos navegadores é capaz de lidar com páginas
em HTML simples, sem as tags de estrutura de página. Mas,
ao incluí-las, você permitirá que a sua página seja lida por
ferramentas SGML (Standard Generalized Markup Language –
define a estrutura geral do conteúdo dos documentos, e não
a aparência real desse conteúdo na página) mais genéricas e
também tirará proveito dos recursos dos futuros navegadores.
2) Resposta pessoal.
Unidade 3
1) Resposta pessoal.
2) Resposta pessoal.
Unidade 4
1) Resposta pessoal.
Unidade 5
1) Resposta pessoal.
Universidade do Sul de Santa Catarina
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 opção de navegação na
página para quem não possui um navegador que entenda frames. Se você
está navegando na internet e entra em uma página que não suporte frames,
o navegador ignora essas tags e procura pela tag NOFRAME, que seria uma
página alternativa.
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 serviços oferecidos pela Biblioteca Virtual aos
alunos a distância:
„„ Pesquisa a publicações online
www.unisul.br/textocompleto
„„ Acesso a bases de dados assinadas
www. unisul.br/bdassinadas
„„ Acesso a bases de dados gratuitas selecionadas
www.unisul.br/bdgratuitas
„„ Acesso a jornais e revistas on-line
www. unisul.br/periodicos
„„ Empréstimo de livros
www. unisul.br/emprestimos
„„ Escaneamento de parte de obra1
Acesse a página da Biblioteca Virtual da Unisul, disponível no EVA
e explore seus recursos digitais.
Qualquer dúvida, escreva para [email protected]
1 Se você optar por escaneamento de parte do livro, o sumário da obra será
enviado primeiramente para que você possa escolher os capítulos que deseja
solicitar a reprodução. Lembre-se que para não ferir a Lei dos direitos autorais
(Lei 9610/98), até 10 % do total de páginas de um livro podem ser reproduzidos.