Html Avançado
Março 25, 2007
Tabelas
A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa; a maior diferença entre tabelas em HTML e em editores como o MS Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer destas páginas.
As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção.
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 browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.
Frames
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: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte.
É 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.
Uma página com frames tem um texto fonte semelhante a:
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice1.html">
<FRAME SRC="apresenta.html" NAME="principal">
<NOFRAME>
<BODY>
<H2>Bem-vindo à página do assunto X!</h2>
<P>
Blá blá blá blá blá
blá blá blá blá blá
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
A parte FRAMESET define a divisão da página em “quadros”. Neste exemplo, a página será dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela.
Dentro da formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que serão mostradas nos frames definidos
Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela).
A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam sua apresentação.
Links com Frames
Sempre que se aciona um link dentro de uma página, o default (isto é, o comportamento padrão) é que a página referente a esse link seja carregada na mesma janela da página anterior.
No exemplo visto com frames, seguir um link dentro da janela à direita faz com que a página apontada seja mostrada ocupando a janela da direita (coluna de 80%):
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice1.html">
<FRAME SRC="apresenta.html" NAME=principal>
<NOFRAME>
<BODY>
<H2>Bem-vindo à página do assunto X!</h2>
<P>
Blá blá blá blá blá
blá blá blá blá blá
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Veja no código fonte acima que o frame associado a 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 exemplo visto, o arquivo indice1.html tem um link da seguinte forma:
<a href="apresenta2.html" target=principal>Exemplo nº.2</a>.
Isto indica que se está definindo (pelo atributo target) o frame em que a página de destino do link (apresenta2.html) será mostrada.
Composição com Frames
Como já foi possível observar, a formatação FRAMESET tem atributos que definem a divisão do espaço da janela do browser em colunas ou linhas. Podemos utilizar uma combinação de “framesets” para criar diversos modos de apresentação do conteúdo de um site.
Antes de ver algumas composições, lembre-se de que os pontos-chave para o mecanismo dos frames são estes, mostrados no item anterior:
- a nomeação dos frames e
- a declaração dos
targetsdos links, que definem o frame no qual as páginas de destino serão mostradas.
Embora quase todos os editores WYSIWYG de HTML dêem suporte à criação de frames, é necessário que o autor se preocupe com os detalhes de nomeação de frames e direcionamento de links.
Como montar dois frames em coluna:
<FRAMESET COLS="x, y">
<FRAME SRC="col1.html">
<FRAME SRC="col2.html">
</FRAMESET>
Dois frames em linha:
<FRAMESET ROWS="x, y">
<FRAME SRC="lin1.html">
<FRAME SRC="lin2.html">
</FRAMESET>
Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:
<FRAMESET COLS="x, y">
<FRAME SRC="col1.html">
<FRAMESET ROWS="x, y">
<FRAME SRC="lin1.html">
<FRAME SRC="lin2.html">
</FRAMESET>
</FRAMESET>
Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a segunda linha com dois frames em coluna:
<FRAMESET ROWS="x, y">
<FRAME SRC="lin1.html">
<FRAMESET COLS="x, y">
<FRAME SRC="col1.html">
<FRAME SRC="col2.html">
</FRAMESET>
</FRAMESET>
O exemplo simples visto até agora segue o modelo da primeira composição (em colunas). As composições com mais de um frameset precisam ser bem planejadas para funcionarem de maneira adequada.
Atributos de Frames
Até este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME).
Outros atributos permitem um maior controle sobre a apresentação:
Eliminação das bordas dos frames:
<FRAMESET COLS="20%, 80%" FRAMEBORDER="no">
<FRAME src="indice4.html">
<FRAME src="apresenta4.html" NAME="principal">
</FRAMESET>
Frame sem barra de rolagem:
<FRAMESET COLS="20%, 80%">
<FRAME src="indice4.html" SCROLLING="no">
<FRAME src="apresenta4.html" NAME="principal">
</FRAMESET>
[Veja o exemplo]
É bom lembrar que a barra de rolagem de um frame fica sempre à direita; não é possível, atualmente, mudar essa característica.
Aplicações de Frames e Cuidados
Frames são interessantes para apresentar conjuntos de páginas com um índice fixo para a navegação. Além disso, torna-se possível mostrar diversas páginas e/ou mídias em uma única janela do browser.
Um cuidado é procurar controlar bem a navegação, evitando que o acionamento de links não leve o leitor a ver seu browser criar frames dentro de frames, gerando uma grande confusão (veja item seguinte, sobre “limpar” a tela).
Interação
A interação é realizada de duas formas diferentes:
1. através de programas executados/interpretados pelo browser (isto é, do lado do cliente);
2. através de programas executados pelo servidor HTTP.
Conforme a aplicação, apenas um destes tipos de interação pode ou deve ser utilizado.
Mapas
Mapas clicáveis executados pelo servidor (´server-side imagemaps´)
Um primeiro método para criação de mapas é usando a comunicação com o servidor HTTP.
Os servidores WWW têm um programa que lida com a relação entre coordenadas de imagens e URLs. No servidor NCSA, esse programa é o imagemap, no CERN é o htimage. No servidor Apache, o módulo imagemap já vem embutido mas sua ativação deve ser configurada.
Escolhida a imagem que servirá de base de partida de diversos links para outros documentos, é preciso gerar um arquivo relacionando coordenadas da imagem a determinados links. Essas coordenadas são encontradas por meio de programas de manipulação de imagens ou pelo próprio editor de HTML.
Um arquivo .map (do servidor NCSA), tem o conteúdo organizado da seguinte forma:
|
forma |
URL associado |
coordenadas |
defaultrectcircle |
/nada.htmlhttp://www.usp.br/http://www.intermidia.icmc.usp.br/ |
15,8 135,39306,204 7 |
Um arquivo .conf (do servidor CERN), tem o conteúdo organizado da seguinte forma:
|
forma |
coordenadas |
URL associado |
|
|
|
|
Ambos arquivos significam a mesma coisa:
1. a região da figura, compreendida pelo retângulo (rect) de coordenadas (15,8) e (135,39), funciona como um link para o URL http://www.usp.br/;
2. a região da figura, compreendida pelo círculo (circle ou circ) de centro (306,204) e raio 7 é um link para o URL http://www.intermidia.icmc.usp.br/;
3. se o mouse não for acionado em nenhuma dessas duas regiões previstas, o link será dirigido para o arquivo default – neste exemplo, o nada.html
O formato desses arquivos para figuras clicáveis pode variar, mas basicamente contém esses mesmos elementos:
- default – indica um endereço padrão para quando o mouse for acionado em uma área da figura além das previstas pelo autor;
- circle ou circ – declara um círculo na figura; os pontos indicam o centro e um ponto de fronteira do círculo;
- poly – um polígono; cada coordenada declarada é um vértice;
- rect – um retângulo; as coordenadas declaradas são, respectivamente, do vértice esquerdo superior e vértice direito inferior.
Tão logo seu arquivo fazclic.map esteja pronto, seu mapa sensível deve ser declarado da seguinte maneira:
<A HREF="http://www.host.br/fazclic.map"><IMG SRC="mapa.gif" ISMAP></A>
onde
- http://www.host.br/fazclic.map – é o endereço para o arquivo
.mapque contém as diretivas que associam regiões da figura a referências WWW - mapa.gif – é a figura que irá “funcionar” como mapa clicável
O servidor HTTP deve estar configurado para reconhecer os arquivos .map como diretivas de execução de mapas clicáveis, para fazer a correspondência entre as coordenadas de um pixel e o caminho de um arquivo.
Se essa configuração não estiver ativa, ou faltarem arquivos que permitem esse recurso, o resultado de se acionar o mouse sobre um mapa clicável será apenas o de se obter o código fonte do arquivo .map; o URL desse resultado será o endereço do arquivo .map, seguido pela coordenada do pixel sobre o qual o mouse foi acionado.
Exemplo de um arquivo mapa.map, para a figura abaixo:
#Pagina da Graduacao
rect exemplos/grad.html 0,0 130,45
#Pagina do Mestrado
rect exemplos/mestr.html 133,0 230,45
#Pagina do Doutorado
rect exemplos/dout.html 234,0 364,45
Esta formatação declara a imagem acima como mapa clicável:
<A href="mapa.map"><IMG src="icones/cursos.gif" ISMAP BORDER=0></A>
Como nosso servidor não está configurado para executar mapas, somente abaixo temos um exemplo ativo, executado pelo cliente (o browser).
Mapas clicáveis executados pelo cliente (´client-side imagemaps´)
Com o client-side imagemap, os mapas sensíveis são rastreados pelo browser no momento em que o usuário escolhe um ponto na imagem. Dessa forma, o servidor já recebe uma requisição de um documento, pois as coordenadas do ponto escolhido e o arquivo correspondente já foram identificados pelo browser.
Na verdade, a relação coordenadas-documentos continua existindo, mas agora em vez de estar em um arquivo .map separado, está dentro do próprio documento. Preste atenção ao conjunto de atributos necessários para que o mapa funcione:
<MAP NAME="nomemapa">
<AREA SHAPE="forma1" HREF="arq1.html" COORDS="x1,y1,x2,y2">
<AREA SHAPE="forma2" HREF="arq2.html" COORDS="x3,y3,x4,y4">
</MAP>
<IMG SRC="imagem.gif" USEMAP="#nomemapa">
Formulários
Um formulário é um modelo para a entrada de um conjunto de dados. O primeiro passo para fazer formulários é aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois trabalharmos com os scripts, que são os programas que tratam esses dados, oferecendo os serviços desejados (acesso a banco de dados, envio de e-mail, etc.).
O elemento <FORM> delimita um formulário e contém uma seqüência de elementos de entrada e de formatação do documento.
<FORM ACTION="URL_de_script" METHOD=método>...</FORM>
Os atributos de FORM que nos interessam agora são:
ACTION
Especifica o URL do script ao qual serão enviados os dados do formulário.
METHOD
Seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do browser para o servidor, com a seguinte diferença básica:
· POST
- os dados entrados fazem parte do corpo da mensagem enviada para o servidor;
- transfere grande quantidade de dados.
· GET
- os dados entrados fazem parte do URL (endereço) associado à consulta enviada para o servidor;
- suporta até 128 caracteres.
Veremos maiores detalhes sobre métodos no item CGI.
FORM também pode apresentar o atributo:
ENCTYPE
Indica o tipo de codificação dos dados enviados através do formulário. O tipo default é application/x-www-form-urlencoded. Outro tipo aceito por alguns browsers é text/plain.
Os formulários podem conter qualquer formatação – parágrafos, listas, tabelas, imagens – exceto outros formulários. Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA>.
Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, que será utilizado posteriormente pelo script. São os scripts que organizam esses dados de entrada em um conjunto de informações significativas para determinado propósito.
Primeiro vamos ver os tipos de campos para montar um formulário, e depois passaremos aos scripts.
CGI Scripts
CGI, ou Common Gateway Interface, é uma interface definida de maneira a possibilitar a execução de programas – “gateways” – sob um servidor HTTP. Neste contexto, os “gateways” são programas ou scripts (também chamados “cgi-bin”) que recebem requisições de informação, retornando um documento com os resultados correspondentes. Esse documento retornado pode existir previamente, ou pode ser gerado pelo script especialmente para atender àquela requisição específica do usuário (diz-se que o documento é ´gerado “on the fly”´).
Exemplos de aplicação de CGI incluem:
- processamento de dados submetidos através de formulários: consulta a banco de dados, cadastramento em listas, livros de visita, pesquisas de opinião;
- criação de documentos personalizados on the fly;
- gerenciamento de contadores de acesso;
- processamento de mapas.
Tais scripts podem ser escritos em qualquer linguagem que possa ler variáveis, processar dados e retornar respostas – ou seja, qualquer linguagem de programação! A linguagem é determinada de acordo com a plataforma do servidor e da aplicação a ser implementada.
Visão Geral
Os scripts têm uma forma geral comum:
1. leitura de dados entrados pelo usuário (e/ou campos de informação de um pacote HTTP);
2. processamento dos dados (armazenamento dos dados em um banco de dados, realização de cálculos, recuperação de dados etc.);
3. montagem de uma página Web ou geração de uma imagem com os resultados produzidos.
Áudio e Vídeo
O uso de áudio e vídeo na Internet vem ganhando muito destaque nos últimos dois anos, e é bom saber como usar bem estas mídias.
Áudio e vídeo são classificados como “mídias contínuas”, pois são geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distorções. Quanto mais informações de uma seqüência de áudio ou vídeo digital são armazenados, melhor a qualidade do áudio ou vídeo reproduzido. Isso implica, logicamente, no fato de arquivos de áudio e vídeo serem geralmente muito grandes, o que torna inviável o uso mais freqüente dessas mídias em páginas Web.
Além de procurarmos lidar sempre com pequenos trechos de áudio e vídeo, podemos explorar tecnologias recentes que permitem a transmissão em tempo real.
Áudio
Há duas maneiras de inserir som em uma página:
<EMBED SRC="audio.som"> insere o arquivo de som como objeto.
<BGSOUND SRC="audio.som"> faz com que o som seja inserido como som de fundo ou ‘trilha sonora’ de uma página. Esta formatação só funciona no Internet Explorer.
Essas formatações, porém, não farão efeito algum quando o browser não estiver configurado para “executar” o arquivo de som por meio de um plug-in adequado, ou se o computador em que estiver carregada a página não tiver instalada uma placa de som.
Vídeo
A inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir em uma página. De maneira geral, esta formatação pode servir para a inserção de um arquivo QuickTime:
<EMBED SRC="arquivo.mov">
Uma formatação mais completa inclui a indicação do plug-in e controles da reprodução do vídeo. O vídeo abaixo foi inserido com parâmetros semelhantes a estes:
<EMBED SRC="vídeo.mov" PLUGINSPACE="http://www.apple.com/quicktime/download/" LOOP="false" CONTROLLER="true" AUTOPLAY="false" WIDTH="400" HEIGHT="150">
Folhas de Estilo
Um avanço interessante na linguagem HTML após a versão 3.2 foi a introdução das Style Sheets ou Cascading Style Sheets. Essas folhas de estilo permitem o uso de formatações uniformes em um site, de maneira bastante “econômica”.
Logo nas primeiras seções deste tutorial (Cores e fontes de textos), vimos que, para poder formatar um texto, era preciso escrever uma marcação parecida com:
<h3><font face="Arial" color="#4A7D7B">Um título genérico</font></h3>
<p><font face="Arial" size="2">Um texto genérico com algum </font><font face="Arial" size="2" color="red">destaque qualquer</font><font face="Arial" size="2"> junto, após um título genérico, etc.</font></p>
para ter o resultado:
Um título genérico
Um texto genérico com algum destaque qualquer junto, após um título genérico, etc.
Acontece que, de um documento para outro, pode acontecer de esquecermos o tamanho da fonte usada no texto, qual a fonte ou a cor dos títulos de determinada subseção, e a uniformidade de apresentação das páginas acaba ficando prejudicada.
Com as folhas de estilo, podemos declarar estilos apropriados para seções de texto, aplicando esses estilos sem nos preocuparmos com detalhes de fontes, cor e tamanhos.
E mais: se for necessário modificar algum dia as cores de todos os títulos ou dos destaques ao longo dos textos, simplesmente alteramos a folha de estilo, atualizando imediatamente a apresentação de todos os documentos que fazem referência a ela.
Para o exemplo acima, poderíamos criar a seguinte folha de estilo:
BODY { font: 10pt Arial }
H3 { color:#4A7D7B }
.destaque { color: red }
E assim, para ter o mesmo resultado do exemplo acima, a formatação seria muito mais simples que a primeira:
<h3>Um título genérico</h3>
<p>Um texto genérico com algum <span class="destaque">destaque qualquer</span> junto, após um título genérico, etc.</p>
A definição da folha de estilo deve ficar dentro de <HEAD>, da seguinte forma, se a folha for definida dentro do mesmo documento em que está sendo usada:
<HEAD>
...
<STYLE TYPE="text/css">
BODY { font: 10pt Arial }
H3 { color:#4A7D7B }
.destaque { color: red }
</STYLE>
...
</HEAD>
Ou então,quando a folha de estilo é definida externamente:
<HEAD>
...
<LINK REL="stylesheet" HREF="folha_de_estilo.css">
...
</HEAD>
Neste caso, uma mesma folha de estilo pode ser usada por vários documentos HTML, que também poderão ter suas próprias folhas de estilo internas.
Entry Filed under: Html Avançado. .
Trackback this post | Subscribe to the comments via RSS Feed