Você está na página 1de 22

Curso EFA Tecnolgico

- Tcnico de Informtica e Sistemas -

UFCD:0793 | Scripts CGI e Folhas de Estilo Joo Leito


INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL I.E.F.P CENTRO DE FORMAO PROFISSIONAL DE VORA

0793

1. Scripts CGI

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 2

1. Scripts CGI
Tecnologia que permite criar pginas web dinmicas, permitindo a um browser passar determinados parmetros para um programa alojado num servidor Web.
Scripts CGI so pequenos programas que interpretam esses parmetros e geram a pgina depois de os processar. Common Gateway Interface
EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 3

1. Scripts CGI
Um script CGI um programa geralmente escrito em C ou PERL. Na maioria dos servidores, os scripts CGI ficam armazenados na pasta cgi-bin.

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 4

1. Scripts CGI
Os scripts tm uma forma geral comum:
1. leitura de dados introduzidos pelo utilizador (e/ou campos de informao de um pacote HTTP); 2. processamento dos dados (armazenamento dos dados numa base de dados, realizao de clculos, recuperao de dados etc.); 3. Criao de uma pgina Web ou criao de uma imagem com os resultados produzidos.
EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 5

1. Scripts CGI
DHTML, ou HTML Dinmico uma nova tecnologia da Web que torna os elementos da uma pgina muito mais dinmicos.
Com o HTML (simples), tudo esttico, mas com o DHTML pode dinamizar-se tudo o que se encontra na pgina como textos, imagens, estilos de pgina (cor das letras, tamanho etc.), posio de elemento, etc..
EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 6

HTML5!

0793

2. Folhas de Estilo

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 7

2. CSS
Cascading Style Sheets (CSS) so documentos com a extenso .css que guardam todas as caractersticas grficas de um site.
Podem estar separados, ou no prprio cdigo da pgina HTML.

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 8

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

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 9

2. CSS
Vantagens do uso de CSS?
Controlo do layout de vrios documentos a partir de uma simples folha de estilos; Maior preciso no controle do layout; Aplicao de diferentes layouts para servir diferentes medias (ecr, impressora, etc.);

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 10

2. CSS
Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantes quelas do HTML..
A sintaxe bsica das CSS Se desejamos uma cor de fundo vermelha para a pgina web:

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 11

2. CSS
Usando HTML:
<body bgcolor="#FF0000">

Usando CSS: body {background-color: #FF0000;}

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 12

2. CSS
Aplicando CSS a um documento HTML

Pode-se aplicar CSS a um documento de trs formas distintas. Recomenda-se o mtodo externo.

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 13

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

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 14

2. CSS
Mtodo 2: Interno (a tag style)
Uma outra forma de aplicar CSS atravs da utilizao da tag <style> do HTML. Exemplo:

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 15

2. CSS
Mtodo 3: Externo (link para uma folha de estilos) O mtodo recomendado o de ligar uma folha de estilos externa. Uma folha de estilos externa um simples arquivo de texto com a extenso .css que pode ser colocado em qualquer local (servidor, pasta, etc.)
EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 16

2. CSS
Mtodo 3: Externo (link para uma folha de estilos) Exemplo:
A folha de estilos foi nomeada de style.css e est localizada na pasta style.

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 17

2. CSS
Mtodo 3: Externo (link para uma folha de estilos) O "truque" criar um link no documento HTML (index.html) para a folha de estilos (style.css).O link criado numa simples linha de cdigo HTML:

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 18

2. CSS
Mtodo 3: Externo (link para uma folha de estilos) Notar que o caminho para a folha de estilos indicado no atributo href. Esta linha de cdigo deve ser inserida na seco header do documento HTML, isto , entre as tags <head> e </head>.
:
EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 19

2. CSS
Mtodo 3: Externo (link para uma folha de estilos)

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 20

2. CSS
Mtodo 3: Externo (link para uma folha de estilos) index.html

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 21

2. CSS
Mtodo 3: Externo (link para uma folha de estilos) style.css

EFA - Tcnico de Informtica e Sistemas | CFPvora | 2012 | Joo Leito 22