. Existem dois tipos de tags. Algumas são formadas aos pares, indicando o início e o fim do trecho afetado, como o par e . Outras podem ser colocadas individualmente, como o

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















texto,



imagem,



links,



...







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 e 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 e 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 . 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 e , 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 , , , , ... Veja, em detalhe, cada uma destas tags estruturais.

A primeira tag de estrutura de toda a página em HTML é a , 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: .... a sua página ... 40

Linguagens de Programação I

A tag e delimita o cabeçalho do documento. Geralmente há poucas tags na parte 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> ...

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





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

42

Linguagens de Programação I

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

<META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=iso-8859-1”> <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”>

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:

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

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.

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.

É o corpo do documento. Tudo que estiver contido em será mostrado na janela principal do seu navegador. 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, , 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 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: 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:

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:

„„

LINK (cor dos links) - determina a cor de todos os links da página. Cor dos links (padrão: azul). Exemplo:

„„

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:

„„

ALINK (cor dos links ativos) - determina a cor dos links ativos. Cor dos links, quando acionados (padrão: vermelho). Exemplo:

Acompanhe a sintaxe seguinte, como modelo de uso dos atributos específicos do : conteúdo

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: conteúdo

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. Título principal

Este é o texto do primeiro exemplo.

Este é o segundo parágrafo.

Título secundário
Acabei de abrir uma linha. Vamos agora adicionar uma lista.

Uma lista

• Item 1
• Item 2
• Item 3

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



 texto do cabeçalho de nível 1 




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



51



 Universidade do Sul de Santa Catarina



deixa a letra maior que o 
 e assim por diante. Veja o seguinte exemplo:



Este é um cabeçalho de nível 1
 
Este é um cabeçalho de nível 2
 
Este é um cabeçalho de nível 3
 
Este é um cabeçalho de nível 4
 
Este é um cabeçalho de nível 5
 
Este é um cabeçalho de nível 6




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



Este é 
um cabeçalho de nível 1
 dentro de um cabeçalho de nível 2




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:



Este é
 
um cabeçalho de nível 1
 dentro de um cabeçalho de nível 2




Ou seja, os navegadores interpretam a formatação anterior como se estivesse faltando uma etiqueta de fechamento de 
 antes de 
 e faltando uma abertura de 
 depois do fechamento de 
, 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: 
Cabeçalho centralizado
 
Cabeçalho alinhado à direita
 
Cabeçalho alinhado à esquerda (default)




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 
. 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 
, ele reinicia o texto na margem esquerda da linha seguinte a essa tag. Você pode usar a tag 
 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 
, 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 
 serve para indicar o início de um novo parágrafo. As tags 
 e 
 delimitam um parágrafo no texto. É possível, neste caso, não fechar a tag 
, ou seja, omitir o 
, sem prejudicar o resultado final. Ao contrário da quebra de linha, com o uso do 
 é 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 
 é 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: 




„„



RIGHT - se você quiser que o texto fique alinhado à direita. Exemplo: 




„„



CENTER - se você quiser que o texto fique alinhado ao centro. Exemplo: 




Neste último caso, a tag 
 ganhou uma opção (ALIGN=CENTER). Por isso é preciso utilizar uma tag de fechamento (
) 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;
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;
 linha 1 do parágrafo 1, 
 linha 2 do parágrafo 1.
Parágrafo 2;
 linha 1 do parágrafo 2, 
 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:



Assim como os trens, as boas ideias às vezes chegam com atraso. 
(Giovani Guareschi)
 
Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.
 
Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.




Verifique o seguinte resultado no navegador:



Figura 2.7 – Exemplo de alinhamento de parágrafo.



Linha horizontal A tag 
 é 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:







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:







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:







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 
). 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 
 e 
 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 
 é 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 
 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 
 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



 
Exemplo de texto à esquerda
 
Testando à esquerda
 




Verifique o seguinte resultado no navegador:



Figura 2.11 –Exemplo de alinhamento de bloco de texto à esquerda.



Centralização de texto As tags  e  centralizam os elementos textos, imagens, tabelas - que estiverem dentro de sua marcação. A tag  funciona de maneira idêntica à 
, centralizando todo o conteúdo HTML contido entre as tags de abertura e de fechamento. Acompanhe o seguinte exemplo:



 



Exemplo de texto centralizado




 



Testando.








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 
 e 
 serve para aumentar a margem. O efeito dessa tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:



Texto com mais margem
 
Texto com mais margem ainda




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 
 é 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 
. 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 
 e 
. 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 
 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 
 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:



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



...



Toda a página em HTML



...



O cabeçalho, o prólogo da página em HTML



...



Todo o restante do conteúdo da página em HTML







O título da página



...




Título de nível 1



...




Título de nível 2



...




Título de nível 3



...




Título de nível 4



...




Título de nível 5



...




Título de nível 6








Nova linha







Parágrafo



...



Alinhar o texto ao centro







Pré-formatação



...



Margem







Linha Horizontal



...




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 (, , ) 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:  (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 
...
 e cada item começa com a tag 
, onde: „„



OL = Ordered List (lista ordenada)



„„



LI = List Item (item de lista)



A tag 
 é unilateral, você não precisa especificar a tag de fechamento. A existência da próxima 
 ou da tag de fechamento  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.



 
item de uma lista numerada 
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 
item de lista numerada 




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 
, como no exemplo a seguir, que utiliza o padrão TYPE=“a”.



72



 Linguagens de Programação I



 
item de uma lista numerada 
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 
item de lista numerada 




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 
, mudando efetivamente o tipo de numeração no meio da lista. Quando o atributo TYPE é usado na tag 
, 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, 
 iniciaria a lista no número 4, enquanto 
 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: 
 
item de uma lista numerada 
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 
item de lista numerada 




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 
. A atribuição de um VALUE em uma tag 
 reinicia a numeração na lista a partir da entrada afetada, como no exemplo a seguir: 
 



item 1



 



item 2



 



item 3



 



item 55



 



item 56







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 
...
, em vez de 
. Os elementos da lista são separados por 
, como nas listas ordenadas. Confira o exemplo: 
 
item 1 
item 2 
item 3 
item 4 
item 5 




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: 
 
Fita 
CD 
DVD 
 
 
Fita 
CD 
DVD 
 
 
Fita 
CD 
DVD 




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 
: 
 



um item



 



mais um item



 



último item







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 
 e os descritores 
 e 
 fazem esta função. Cada componente da lista de glossário possui sua própria tag: „„



: para o termo (Definition Term)



„„



: 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  com definições ou termos específicos. A lista de glossário inteira é indicada pelas tags 
...
 (Definition List). Eis um exemplo de uma lista de glossário: 
 
termo a ser definido 



definição



termo a ser definido 



definição







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  e , e cada item da lista é indicado pela tag 
. 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  e  e a tag 
 identifica cada item da lista. Veja o exemplo abaixo:  
maçã 
laranja 
goiaba 



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 
 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 
 é 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. 
 
termo a ser definido 



definição



 
item de uma lista numerada 
item de uma lista numerada 



 



item de uma lista



 







 



item de uma lista numerada



 
termo a ser definido 



definição







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:



                            
      



 
1




     



 
2




      



3




       
     



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 
, , e 
. 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: 
 
Documentos básicos 
Documentos avançados 
 



formulários



 







 



CGI



 







 



contadores



 



relógios



 
 
Detalhes sobre imagens 




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:



 
Documentos básicos 
Documentos avançados 
 
formulários 







 



CGI







 
contadores 
relógios 
 
Detalhes sobre imagens 




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: 
 
Imperadores do Brasil: 
D. Pedro I 
 
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 
 
D. Pedro II 
 
Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga 
 




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: 



Em versões mais atuais da HTML, você pode comentar também várias linhas assim:  Aqui tem um exemplo de comentário!! Ele não apareceu escrito!!



Visualize o exemplo acima no seu navegador:



Figura 3.13 - Exemplo de comentário.



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  Para criar um vínculo em uma página em HTML, você deverá utilizar a tag de vínculo .... 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  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



Acesse o Menu Principal 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 , 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:



Aqui vai o nome ou o endereço da página para a qual você está apontando o link



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:



UnisulVirtual



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



Saiba mais sobre o meu site
 Escrevendo um texto em HTML com vínculos.





 

 O meu site



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:



Capítulo 1



Enquanto o alvo do link fica desta forma:



Capítulo 1



92



 Linguagens de Programação I



Neste exemplo, quando o usuário clicar sobre o link Capítulo 1, ele será remetido ao ponto onde está a referência Capítulo 1. 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  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:



Mande-me um e-mail



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 exemplo de caminho relativo.



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:



Tudo sobre feijoada



Pode-se colocar referências do tipo  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 é:



Capítulo 1 do Exemplo



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:



Universidade do Sul de Santa Catarina



Com esta mesma sintaxe, é possível escrever links para qualquer servidor de informações da internet. Veja este outro exemplo: São Carlos é um pólo de alta tecnologia.



Neste caso, foi produzido um link para um parágrafo marcado com  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 , conforme já foi estudado na unidade 2.



96



 Linguagens de Programação I







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



conteúdo




 
item
 




conteúdo




 
item
 




conteúdo




 
termo
 
definição
 




Não Ordenada



Definição



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



97



 Universidade do Sul de Santa Catarina



Tipo de vínculo



Sintaxe



Exemplo



Localização



HREF=”LOCALIZAÇÃO”



 texto



Abrir Nova Janela



TARGET=”_BLANK”



texto



Mail



HREF=”mailto:MAIL”



 texto



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.  



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







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



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








Para indicar trechos de código de programas.



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







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



CERN: Centre d`Éstudes et Recherches Nucleaires 







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



É preciso pesquisar muito para encontrar o termo exato.







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



Para ler mensagens recebidas, digite  pine -i 



Indica uma sequência de caracteres, por exemplo, uma mensagem de erro ou um resultado ou um texto de exemplo. Semelhante a .



O resultado do primeiro applet é:  Hello, World! 



Forte ênfase, mostrada normalmente em negrito.



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



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



No campo Login, escreva  guest. 















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







Negrito (Quando disponível em alguns navegadores, pode aparecer sublinhado).



Texto em negrito







Itálico.



Texto em itálico







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



Texto monoespaçado 







Sublinhado.



Texto sublinhado



Tachado.



Texto Tachado



Fonte maior que a do texto ao redor.



Testando a fonte maior.



Fonte menor.



Testando a  fonte  menor.







Subscrito.



Frase em estilo índice, como em H2O.







Sobrescrito.



Frase em estilo expoente, como em Km2.



 ou   



Fonte: LEMAY, 1998.



Utilize a Tag  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



Texto em negrito e itálico
 Texto monoespaçado em negrito
 Texto monoespaçado em itálico
 Texto monoespaçado em negrito e itálico



Vamos visualizar o exemplo acima no navegador:



Figura 4.1 – Exemplo de tags de estilo.



Ao contrário de 
, a tag  ignora espaços em branco adicionais e entradas de parágrafo no meio do texto. Em relação ao espaçamento, a tag  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é



Ou Café



Acompanhe como fica esta palavra em seu navegador:



Figura 4.2 - Exemplo de visualização do uso de caracteres especiais.



No exemplo acima, eacute e #233 equivale ao caractere e acentuado na tabela ASCII. Suponha agora que você queira incluir em um arquivo em HTML uma linha de código semelhante a esta: 106



 Linguagens de Programação I



se (x < 0) então



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:



 se (x<0) ent&atiloe;0



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



<



<



Unidade 4



107



 Universidade do Sul de Santa Catarina



ISO Latin1: ASCII com extensões para idiomas Europeus



108



>



>



&



&



"



“



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



Caractere



á



á



â



â



à



à



ã



ã



ç



ç



é



é



ê



ê



í



í



ó



ó



ô



ô



õ



õ



ú



ú



ü



ü



Entidade



Caractere



Á



Á



Â



Â



À



À



Ã



Ã



Ç



Ç



 Linguagens de Programação I



É



É



Ê



Ê



Í



Í



Ó



Ó



Ô



Ô



Õ



Õ



Ú



Ú



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:



  







 



<META HTTP-EQUIV=”Content-Type”



 



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



  



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



© para o símbolo ©;



„„



® para ®; e



„„



§ para §.



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  é 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  consiste em alterar o tamanho da fonte de um caractere, palavra, frase ou qualquer texto. As tags  e  delimitam o texto, e o atributo  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



Texto



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



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  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: Letra maior
 Letra normal
 Letra menor



Unidade 4



111



 Universidade do Sul de Santa Catarina



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



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



Texto com FONT SIZE=7
 Texto com FONT SIZE=6
 Texto com FONT SIZE=5
 Texto com FONT SIZE=4
 Texto com FONT SIZE=3
 Texto com FONT SIZE=2
 Texto com FONT SIZE=1



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



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  no topo do texto. Confira o exemplo:  Aqui todo o texto está em um único
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:







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: O texto será escrito em vermelho, com fonte arial e tamanho 6.



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



Texto



Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de . 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. Texto na cor branca



ou Texto na cor branca



Ainda, é possível ter texto de várias cores na mesma página. Texto em branco, azul, verde e vermelho



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:



Fonte Verdana azul Fonte Arial verde



Este exemplo é assim visualizado:



Figura 4.10 - Exemplo de visualização de formatação de caracteres.



Seção 4 - As Tags  e  Você conhece as tags  e ? Para que servem estas tags? Você estudará essas tags logo abaixo.



BLINK As tags  e  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:



Efeito piscante ao texto.



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 . Este é o modelo para o uso do MARQUEE:



Texto



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



Texto



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



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:



Texto



Confira os atributos da tag : 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:   MXSTUDIO - Comunidade DW e FW  



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 
 é 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 
[email protected]




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  



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  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  e seus atributos A inserção de imagens num documento faz-se com a tag . Esta tag tem conteúdo vazio, o que significa que ele apenas possui atributos e não tem tag de fechamento. A tag  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 . A forma genérica mais simples de expressar a tag IMG e o seu atributo SRC é a seguinte: 



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: 



A imagem será desenhada no local que corresponde à tag  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:     



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:







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:







E assim por diante! Use sempre as mesmas regras que utilizaria para nomes de página na parte HREF da tag , 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: 



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.







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, 



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



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







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:
  Note que a imagem...




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







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



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



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



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: ...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 
 com o atributo CLEAR=ALL, conforme exemplo abaixo: ...e agora você pode escrever à vontade entre as imagens! O texto que você desejar, sem a linha ir para abaixo da imagem...
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:
. 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:







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:







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



e 



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 à 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 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 
 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  entre as partes de abertura e de fechamento de uma tag de vínculo (), 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:   



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:                                    



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:







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.







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:



 Clique aqui para ir à página do BOL 



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 . O valor desse atributo é um nome de arquivo ou URL que corresponda ao seu arquivo de imagem, como no seguinte exemplo:







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 , que só é reconhecida pelo Internet Explorer. Para utilizar esta tag, siga o exemplo: 



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  que, por ser reconhecida pelo Internet Explorer e Netscape, é a mais recomendada. Para utilizá-la, siga o exemplo: 



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



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







Comprimento



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







Altura



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







Borda



BORDER=”tamanho” (em pixels)







Alternativa



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







Alinhamento



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



  



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 , 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: (Silício: o portal brasileiro na internet)  (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 
 Para criar uma tabela em HTML, utilize as tags ... 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  é o atributo BORDER, que indica a apresentação da borda. Veja o exemplo:  ... 



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 ... 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  e termina a tag de fechamento . Cada linha da tabela, por sua vez, tem várias células, que são indicadas pelas tags ... (para células de cabeçalho) e ... (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  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  é incluída na tag , antes das linhas da tabela, e contém o título da tabela. Ela é fechada pela tag . 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: 
 
Primeiro exemplo
 
 
Coluna 1
Coluna 2
 
 
 
linha1, coluna 1
 linha 1, coluna 2
 
 
 
linha 2, coluna 1
linha 2, coluna 2
 
 




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  indica uma célula que também é um cabeçalho da tabela, e a tag  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  incluída na primeira linha. Para apresentar os cabeçalhos na borda esquerda da tabela, inclua cada uma das tags  na primeira célula de cada linha, como neste exemplo:



















 
Primeiro exemplo
 
 

Linha 1

 

linha 1, coluna 1

 
 
 

Linha 2

 

linha 2, coluna 1

 
 




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  ou  sem especificar texto algum, como neste exemplo: 











 
 

 

 

20

 

30
 

 
 




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











 
 


 

 

20

 

30
 

 
 




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  e  (além de , 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  ou no primeiro  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:



Texto da célula Texto da célula



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. 
 
 
Título 1
 
Título 2
 
 
 
Célula 1
 
Célula 2
 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. 
 
 




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: 















 
 

Título 1

 

Título 2

 
 
 

Célula 1

 

Célula 2
 A largura de cada célula pode ser controlada individualmente utilizando-se o atributo width.

 
 




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:



Texto da célula



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:



Texto da célula



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  ou  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: 
 
 
Célula expandida
 
 
 
Célula 1
Célula 2
 
 
 
Célula 3
Célula 4
 
 




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.















 
 

Célula expandida

 

Célula 1
Célula 2

 
 
 

Célula 3
Célula 4

 
 




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:



 
Colunas 1 e 2
 
linha1, coluna 1
 linha 1, coluna 2
 
linha 2, coluna 1
linha 2, coluna 2
 
3 linhas
uma linha
 
duas linhas
 
três linhas
 




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:



 
 
Colunas 1 e 2
 
 
 
linha1, coluna 1
 
 linha 1, coluna 2
 
 
 
linha 2, coluna 1
 
linha 2, coluna 2
 
 
 
3 linhas
 
uma linha
 
 
 
duas linhas
 
 
 
três linhas
 
 




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











 
 

Célula expandida

 

Célula 1
Célula 2

 
 
 

Célula 3
Célula 4

 
 




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  (ou ). 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: 


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: 







 
 

janeiro
fevereiro
março

 
 
 

abril
maio
junho

 
 




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







 
 

janeiro
fevereiro
março

 
 
 

abril
maio
junho

 
 




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:






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: 


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: 


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


define o título da tabela

...


delimita uma linha




define um cabeçalho para colunas ou linhas (dentro de )




delimita um elemento ou célula (dentro de )


Eis um resumo para a tag 
 ou 
. Novamente, utilize o exemplo das frutas, para propor uma cor de fundo na tabela: 


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:

























 
 

janeiro

 

fevereiro

 

março

 
 
 

abril

 

maio

 

junho

 
 




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:






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

























 
 

janeiro

 

fevereiro

 

março

 
 
 

abril

 

maio

 

junho

 
 




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 . Veja o exemplo:



Unidade 6



179



 Universidade do Sul de Santa Catarina



















 
 

Comida

 

Bebida

 
 
 

Arroz

 

Vinho

 
 




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



...



define a tabela



...





...


...

: Tipo


Sintaxe


Exemplo


Alinhamento


ALIGN=”LEFT|RIGHT|CENTER”

texto



Borda



BORDER=”TAMANHO” (em pixels)



texto



Comprimento



WIDTH=”TAMANHO” (em pixels ou % da pagina)



texto



Altura



HEIGHT=”TAMANHO” (em pixels ou texto % da pagina)



Cor de fundo



BGCOLOR=”COR”



texto



Cor da borda



BORDERCOLOR=”COR”



texto



Cor da borda escura



BORDERCOLORDARK=”COR”



texto



Cor da borda clara BORDERCOLORLIGHT=”COR”



Unidade 6



texto



181



 Universidade do Sul de Santa Catarina



Para a tag : Tipo



Sintaxe



Exemplo



Alinhamento



ALIGN=”LEFT|RIGHT|CENTER|MIDDLE|BOTTOM”



texto



Para a tag : Tipo



Sintaxe



Exemplo



Alinhamento



ALIGN=”LEFT|RIGHT|CENTER” e VALIGN=TOP|MIDDLE|BOTTOM



texto



Colunas que ocupa



COLSPAN=”NÚMERO”



texto



Linhas que ocupa



ROWSPAN=”NÚMERO”



texto



Cor de fundo



BGCOLOR=”COR”



texto



Existe também o , que é como o , 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:    (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  e  são substituídas por  e .



Unidade 7



187



 Universidade do Sul de Santa Catarina



Construindo Frames com o elemento FRAMESET Como já dito, a tag  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:



       
Bem-vindo à página do assunto X!
 
Blá blá blá blá blá blá blá blá blá blá    



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:  TESTANDO FRAME... 20% 



E o conteúdo do arquivo texto.html é este:  TESTANDO FRAME... 80% 



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



       
Bem-vindo à página do assunto X!
 
 Blá blá blá blá blá blá blá blá blá blá    



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:  TESTANDO FRAME... 20% Exemplo nº.2. 



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:



 Aqui estamos vendo a apresentação de frames com link. 



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:    Figura 7.5 – Exemplo de FRAME em coluna.







Como montar dois frames em linha:    Figura 7.6 - Exemplo de FRAME em linha.







Para montar esta estrutura abaixo, você deve criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:    Figura 7.7 - Exemplo de dois FRAMES em coluna e dois FRAMES em linha.



   



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:



   Figura 7.8 - Exemplo de dois FRAMES em linha e dois FRAMES em coluna.



   



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



         



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



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:                                  



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:                             



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:                              



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: 



202



 Linguagens de Programação I



Podemos testar o exemplo a seguir utilizando o atributo FRAMEBORDER no FRAMESET:



                            



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: 



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: 



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



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: 



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: 



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: 



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: 



Unidade 7



207



 Universidade do Sul de Santa Catarina



Para dispor o frame sem a barra de rolagem:



   



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:







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



208



 Linguagens de Programação I



      


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



  



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 . 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><br />
<br />
210<br />
<br />
 Linguagens de Programação I<br />
<br />
Esta parte do código só irá aparecer no seu navegador caso o mesmo não suporte o uso de frames. </FONT>  



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:   



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



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



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



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 (
), 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:



.



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 
 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: [email protected]



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: 
 Cabeçalho Centralizado 
 Exemplo utilizando CSS:    
 Cabeçalho Centralizado 




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







„„







„„







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:  (Construção de páginas web: depuração e especificação de um ambiente de aprendizagem)  (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 
 ou 
 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 , 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 ) 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  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  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 
, 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  (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 
, 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 .



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



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:



  
 Isto é um parágrafo formatado com o atributo style
 
 este parágrafo não tem estilo  



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:   
 Neste parágrafo o tipo de letra é “sans-serif”
 
 Neste parágrafo o tipo de letra é “comic sans ms” 
  



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 



Observe o uso do atributo TYPE na tag  



O navegador lê as definições contidas na tag    
Este cabeçalho tem cor verde
  



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:      
 
   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 
, que são o alinhamento, a cor do texto e o tipo de letra:      
 O texto deste parágrafo tem tipo de letra “arial”, cor verde e está alinhado ao centro. 
  



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  



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 () uma tag  com uma referência para a folha de estilos que contém as definições, como se ilustra a seguir:



  



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, 
 ou , 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  ou , 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 
 até 
 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



    



 Este parágrafo está alinhado à direita.
 
 Este parágrafo está alinhado ao centro.
  



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



 Este parágrafo tem um erro causado pela utilização repetida do atributo class. 




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:      
 Cabeçalho alinhado ao centro 
 
 Este parágrafo também está alinhado ao centro. 
  



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 
 que tenha o valor “para1” no atributo ID:



258



 Linguagens de Programação I



     
 Este parágrafo está alinhado ao centro e tem cor vermelha. 
  



Visualize:



Figura 9.8 – Exemplo de tag de ID.



Se tentarmos aplicar esta regra a uma tag 
 usando id=”para1”, vemos que o navegador não a aceita, pois ele foi definido somente para a tag 
:



Unidade 9



259



 Universidade do Sul de Santa Catarina



 



 







  
 Este elemento não está alinhado ao centro e não tem cor vermelha porque não é um parágrafo. 
  



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 
: 
As músicas do Bonga são bué de fixes




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    
O texto dos elementos 
 tem cor azul. 
 Este parágrafo está dentro de um elemento 
. Ele herda a cor azul. 
 
 
 Este parágrafo não está dentro de nenhum elemento que lhe deixe uma “herança”. 
  



No exemplo acima, a folha de estilos expressa que o texto das tags 
 deve ter cor azul. O parágrafo que está dentro de uma tag 
 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:      
 Os elementos 
 recebem uma linha de contorno vermelha (border) e texto com cor azul. 
 Este parágrafo está dentro de um elemento 
. Ele herda a cor azul mas não herda a linha de contorno (border). 
 
 Tal como o elemento 
 principal este elemento 
 recebe a sua própria linha de contorno. 
 
  



Como você pode observar no seu navegador, a propriedade color propaga-se à tag 
 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