06-05-2010

UFCD 0793 – Scripts CGI e Folhas de

Estilo
Formadora: Sónia Rodrigues

0793 – Scripts CGI e folhas de estilo

Objectivos da UFCD:
Desenvolver páginas para a Web, através de
scripts CGI e folhas de estilo.

UFCD 0793 - Scripts CGI e folhas de estilo 2

1
 06-05-2010

Conteúdos

Formulários
Estrutura e desenho
Campos de entrada
Botões submit e radio
CheckBoxes
Selecções
Área de textos
Campos não visíveis
Carregamento de ficheiros através de
formulários

UFCD 0793 - Scripts CGI e folhas de estilo 3

Conteúdos

CGI Script
Estrutura e variáveis CGI

HTML dinâmico
Posicionar objectos
Layers
Z-orders
Layers visíveis e invisíveis

Style sheets
Conceitos
Styles sheets em HTML

UFCD 0793 - Scripts CGI e folhas de estilo 4

2
 06-05-2010

Formulários

Os formulários interactivos permitem

enriquecer as páginas Web com elementos
interactivos que permitem por exemplo
um diálogo com utilizador da internet.

O leitor preenche campos ou clica sobre
botões e posteriormente clica num botão
de envio (submit) para enviar os seus
dados.

UFCD 0793 - Scripts CGI e folhas de estilo 5

Formulário

UFCD 0793 - Scripts CGI e folhas de estilo 6

3
 06-05-2010

Scripts CGI (Common Gateway Interface)

Tecnologia que permite criar páginas web

dinâmicas, permitindo a um browser
passar determinados parâmetros para um
programa alojado num servidor Web.

Scripts CGI são pequenos programas que

interpretam esses parâmetros e geram a
página depois de os processar.

UFCD 0793 - Scripts CGI e folhas de estilo 7

Scripts CGI (Common Gateway Interface)

Um script CGI é um programa geralmente escrito

em C ou PERL.

Na maioria dos servidores, os scripts CGI ficam
armazenados na pasta cgi-bin. O script é
executado quando o endereço do script é
requisitado pelo navegador.

Os dados são enviados para o script através de
um formulário HTML. A função ACTION especifica
o endereço do script.

Quando o script recebe os dados do formulário,
ele processa as informações e converte todos os
caracteres modificados.

UFCD 0793 - Scripts CGI e folhas de estilo 8

4
 06-05-2010

Scripts CGI (Common Gateway Interface)

Variáveis de CGI
Variáveis de Ambiente – são variáveis
estabelecidas no servidor HTTP no momento
de atender a requisições de documentos.

Variáveis mais usadas:
SERVER_SOFTWARE: nome e versão do
software do servidor
SERVER_NAME: nome do servidor
SERVER_PROTOCOL: versão do protocolo HTTP
usado pelo servidor

UFCD 0793 - Scripts CGI e folhas de estilo 9

Scripts CGI (Common Gateway Interface)

SERVER_PORT: porta TCP pela qual o servidor

atende às requisições
QUERY_STRING: cadeia de caracteres que
contém uma consulta ou entrada de formulário
REMOTE_HOST: máquina que solicita a
execução do script
CONTENT_TYPE: tipo de conteúdo da
mensagem enviada
CONTENT_LENGHT: Comprimento da
mensagem enviada
HTTP_USER_AGENT: nome e versão do
browser utilizado

UFCD 0793 - Scripts CGI e folhas de estilo 10

5
 06-05-2010

Scripts CGI (Common Gateway Interface)

Estrutura CGI
Os scripts têm uma forma geral comum:
1. leitura de dados entrados pelo utilizador
(e/ou campos de informação de um pacote
HTTP);
2. processamento dos dados
(armazenamento dos dados numa base de
dados, realização de cálculos, recuperação de
dados etc.);
3. Criação de uma página Web ou geração de
uma imagem com os resultados produzidos.

UFCD 0793 - Scripts CGI e folhas de estilo 11

HTML dinâmico ou DHTML

DHTML, ou HTML Dinâmico é uma nova
tecnologia da Web que torna os elementos
da uma página muito mais dinâmicos.

Com o HTML (simples), tudo é estático,

mas com o DHTML pode dinamizar-se
tudo o que se encontra na página como
textos, imagens, estilos de página (cor
das letras, tamanho etc.), posição de
elemento, etc..

UFCD 0793 - Scripts CGI e folhas de estilo 12

6
 06-05-2010

Style sheets

Cascading Style Sheets (CSS) são

documentos com a extensão .css que
guardam todas as características gráficas
de um site.

Podem estar separados, ou no próprio
código da página HTML.

UFCD 0793 - Scripts CGI e folhas de estilo 13

Style sheets

O CSS é uma linguagem para estilos que
define o layout de documentos HTML.
Por exemplo, CSS controla fontes, cores,
margens, linhas, alturas, larguras, imagens de
fundo, posicionamentos,…

O HTML pode ser (in)devidamente usado
para definir o layout de websites.

Contudo, o CSS proporciona mais opções
e é mais preciso e sofisticado. O CSS é
suportado por todos os navegadores
actuais.
UFCD 0793 - Scripts CGI e folhas de estilo 14

7
 06-05-2010

Style sheets

Vantagens do uso de CSS?

Controlo do layout de vários documentos a
partir de uma simples folha de estilos;
Maior precisão no controle do layout;
Aplicação de diferentes layouts para servir
diferentes medias (ecrã, impressora, etc.);
Emprego de variadas, sofisticadas e avançadas
técnicas de desenvolvimento.

UFCD 0793 - Scripts CGI e folhas de estilo 15

Style sheets

Muitas das propriedades usadas em
Cascading Style Sheets (CSS) são
semelhantes àquelas do HTML.

A sintaxe básica das CSS
Se desejamos uma cor de fundo vermelha para
a página web:
Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado será obtido
assim:
body {background-color: #FF0000;}
UFCD 0793 - Scripts CGI e folhas de estilo 16

8
 06-05-2010

Style sheets

Aplicando CSS a um documento HTML

Pode-se aplicar CSS a um documento de três
formas distintas.
Recomenda-se o método externo.

Método 1: In-line (o atributo style)
Uma forma de aplicar CSS é pelo uso do
atributo style do HTML.

UFCD 0793 - Scripts CGI e folhas de estilo 17

Style sheets

Método 2: Interno (a tag style)
Uma outra forma de aplicar CSS é através da
utilização da tag <style> do HTML. Como
mostrado a seguir:

UFCD 0793 - Scripts CGI e folhas de estilo 18

9
 06-05-2010

Style sheets

Método 3: Externo (link para uma

folha de estilos)
O método recomendado é o de lincar para uma
folha de estilos externa.
Uma folha de estilos externa é um simples
arquivo de texto com a extensão .css.
Tal como com qualquer outro tipo de arquivo
pode-se colocar uma folha de estilos tanto no
servidor como no disco rígido.

UFCD 0793 - Scripts CGI e folhas de estilo 19

Style sheets

Exemplo:

A folha de estilos foi nomeada de style.css e está
localizada no directório style.

O "truque" é criar um link no documento HTML

(default.html) para a folha de estilos (style.css). O link é
criado numa simples linha de código HTML como
mostrado a seguir:

UFCD 0793 - Scripts CGI e folhas de estilo 20

10
 06-05-2010

Style sheets

Notar que o caminho para a folha de

estilos é indicado no atributo href.

Esta linha de código deve ser inserida na
secção header do documento HTML, isto
é, entre as tags <head> e </head>.
Conforme mostrado abaixo:

UFCD 0793 - Scripts CGI e folhas de estilo 21

Style sheets

Criar o css.
No notepad criar o seguinte código e guardar
com extensão .css

UFCD 0793 - Scripts CGI e folhas de estilo 22

11