58
Interface Web - Programação Cliente

Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Embed Size (px)

Citation preview

Page 1: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Interface Web - Programação Cliente

Page 2: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Interface Web - Programação Cliente

HTMLHTML Applets Noções de DHTML

Folhas de estilo - Cascading Style Sheets Javascript

Page 3: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML

HTML – Hypertext Markup Language Especificação W3C Linguagem de formatação orientada para a

Internet Ficheiros de Texto com extensão html ou

htm

Page 4: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML

Linguagem baseada em etiquetas (tags) As etiquetas interagem sobre os

componentes da página web Sintaxe genérica

<etiqueta parametro=“valor” >

componente da página web

</etiqueta>

Page 5: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML

Estrutura base de um ficheiro HTML<HTML>

</HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

Page 6: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML Etiqueta <HEAD>

Zona de definições acessórias da página Contem normalmente os comandos

<TITLE> Exemplo: <TITLE>A primeira página</TITLE>

<SCRIPT> Bloco de código numa linguagem de script.

<STYLE> Definições de estilos que serão utilizados em toda a página

<META> Permite definir informações que serão colocadas no cabeçalho

HTTP. Exemplo:<META http-equiv="Refresh" content=“5">

Page 7: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML

Etiqueta <BODY> Engloba os elementos constituintes da

página Possui diversos parâmetros que definem

formatos gerais para toda a página. Destacam-se:

background=“URL da imagem de fundo” bgcolor=“formato ou nome da cor”

Page 8: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Exemplo<html>

<head><title>Um exemplo HTML</title>

<style type="text/css">body{background-color:navy;font-size:14pt;font-family:arial;color:lightBlue}h1{color:white;font 18pt verdana bold;text-align:center}.botao{width:140px;height:50px;font-family:comic sans MS;}

</style><script language="javascript">

function abrir(){

x=window.open("http://www.ipp.pt","PagIPP","width=99,height=80");}

</script></head>

<body><h1>Página de Exemplo</h1><p><hr>Esta é um exemplo de uma página em HTML, onde na zona do comando <b>&lt;HEAD&gt;</b> estão comandos auxiliares para a construção da página e na zona do comando <b>&lt;BODY&gt;</b> estão os objecto que compoêm a página.<p><hr><center><input type=button CLASS="botao" value="Página do IPP" onClick="abrir()"></center>

</body></html>

Page 9: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Mudanças de linha

<P> e <BR>Exemplo:

...Texto1<br>Texto2<P>Texto3Texto4...

...Texto1<br>Texto2<P>Texto3Texto4...

Page 10: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Imagens

<IMG> SRC = URL da imagem (jpeg | gif); ALT = Texto descritivo; NAME = nome do objecto para efeitos

de scripting.

Exemplo:<IMG SRC=“x.gif” ALT=“Exemplo” NAME=“foto”><IMG SRC=“x.gif” ALT=“Exemplo” NAME=“foto”>

Page 11: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Tabelas

<TABLE> <TR> - engloba o conteúdo de uma linha <TH> - define uma célula de cabeçalho <TD> - define uma célula de informação

COLSPAN = número de colunas ocupadas;

ROWSPAN = número de linhas ocupadas;

Page 12: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Exemplos de Tabelas

<table border=“1”><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr>

</table>

<table border=“1”><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr>

</table>

Page 13: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Exemplos de Tabelas

<table border=”1”><tr>

<td colspan=”2” rowspan=”2”>A</td>

<td>B</td></tr><tr><td >C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr>

</table>

<table border=”1”><tr>

<td colspan=”2” rowspan=”2”>A</td>

<td>B</td></tr><tr><td >C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr>

</table>

Page 14: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Hyperlinks

<A> NAME = nome do objecto; HREF = URL do objecto destino; TARGET = nome da janela/frame onde o link será

executado ou os nomes reservados “_self”, “_parent”, “_top” ou “_blank”.

Exemplos:<a href=”http://www.sapo.pt”>Sapo</a><a name=”cap1”></a><a href=”#cap1”>Capítulo 1</a><a href=”amd.htm#cap1”>Capítulo 1</a><a href=”http://www.ipp.pt” target=”_blank”>Novo</a>

<a href=”http://www.sapo.pt”>Sapo</a><a name=”cap1”></a><a href=”#cap1”>Capítulo 1</a><a href=”amd.htm#cap1”>Capítulo 1</a><a href=”http://www.ipp.pt” target=”_blank”>Novo</a>

Page 15: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – <DIV> e <SPAN>

Utilização quase exclusiva como contentores para definição de estilos (CSS)

<DIV> define um bloco de texto e comandos HTML e separando-o do restante por quebras de linha.

<SPAN> é um comando inline que define também um bloco de hipertexto mas que fica na sequência dos restantes conteúdos.

Page 16: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – <DIV> e <SPAN>Exemplo

<STYLE><!-

DIV{background-color:gray;color:red;font-weight:bold;}SPAN{background-color:navy;color:white;}

--></STYLE>

...<P>O texto seguinte está dentro do comando DIV<DIV>Isto está dentro de DIV</DIV>O texto seguinte é conteúdo de SPAN <SPAN>dentro do SPAN</SPAN>. Fim de exemplo...

<STYLE><!-

DIV{background-color:gray;color:red;font-weight:bold;}SPAN{background-color:navy;color:white;}

--></STYLE>

...<P>O texto seguinte está dentro do comando DIV<DIV>Isto está dentro de DIV</DIV>O texto seguinte é conteúdo de SPAN <SPAN>dentro do SPAN</SPAN>. Fim de exemplo...

Page 17: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Frames

Apresentação simultânea de várias páginas na janela do browser.

Page 18: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Frames

Etiqueta <FRAMESET> Este etiqueta especifica o layout da página

em termos de divisões do écran. O ficheiro HTML que contem esta etiqueta não possui a etiqueta <body>

Atributos: COLS = Lista divisão em colunas; ROWS = Lista divisão em linhas;

Page 19: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Frames

A lista de divisão fornecida aos atributos pode ser composta por:

Valores absolutos – representado uma dimensão em número de pixeis;

Valores percentuais – relativos à dimensão da janela “pai”;

* - simbolizando o restante.

Os elementos da lista separam-se por “,”

Page 20: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Frames Exemplos de listas de divisão

100,50%,*

3 divisões:

1ª de 100 pixeis fixos;

2ª com 50% da dimensão da janela do browser;

3ª ocupando o restante.

70%,30% 2 divisões:

1ª com 70% da dimensão da janela do browser;

2ª com 30% da dimensão da janela do browser.

100,*,*

3 divisões:

1ª de 100 pixeis fixos;

2ª e 3ª de dimensão igual ocupando em conjunto o restante.

2*,* 2 divisões:

1ª com o dobro da dimensão da 2ª.

Page 21: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Frames

Etiqueta <NOFRAME> Define um conteúdo alternativo para que os

browsers mais antigos possam exibir alguma informação.

Exemplo:...<noframe> O seu browser não suporta o uso de frames <p> Faça o <a href=”http://www.microsoft.com/ie”>dowload</a> da versão actual do Internet Explorer.</noframe>...

Page 22: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Frames

Etiqueta <FRAME> Afecta uma página web a uma zona do

écran Atributos:

SRC = URL da página web; SCROLLING = “yes”|”no”|”auto”; NORESIZE não permite

redimensionamento;

Em XHTML NORESIZE=“NORESIZE”

NAME = Nome da frame;

Page 23: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Exemplo Frames

<html><head></head><frameset rows=40%,*> <frame src=http://www.dei.isep.ipp.pt/ades> <frameset cols=*,*> <frame src=http://www.dei.isep.ipp.pt/~ncastro> <frame src=http://www.dei.isep.ipp.pt/projbach> </frameset></frameset><noframe> O seu browser não suposta a utilização de frames</noframe></html>

Page 24: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML - Forms

Permite ao utilizador fornecer informação à aplicação web.

Baseado em componentes HTML de interface gráfico.

Transfere informação para o servidor recorrendo aos métodos HTTP: Método GET Método POST

Page 25: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

Método GET Anexa a informação na URL após o símbolo “?” Limite da informação imposto pelo tamanho

máximo da URL (2083 caracteres no IE) . Idempotente Rápido Inseguro

Page 26: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

Método POST A informação é transferida no cabeçalho do

protocolo HTTP Não existe um limite máximo para o tamanho da

informação Todos os pedidos são obrigatoriamente tratados

pelo servidor Lento Seguro

Page 27: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

Etiqueta <FORM> Define o conjunto de informação que será

enviado para um processo a executar no servidor Web.

Atributos: ACTION = URL do processo que irá

processar a informação transmitida;

METHOD = “GET” | “POST” NAME = nome do objecto

Page 28: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – FORMS

Page 29: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

Etiqueta <TEXTAREA> Constrói uma caixa de texto Atributos:

NAME = nome do objecto COLS = número de colunas ROWS = número de linhas

Exemplo:

<textarea cols=”30” rows=”4” name=”xpto”> texto por defeito

</textarea>

<textarea cols=”30” rows=”4” name=”xpto”> texto por defeito

</textarea>

Page 30: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

Etiqueta <SELECT> Constrói uma Combo Box ou uma List Box Atributos:

NAME = nome do objecto SIZE = número itens visíveis MULTIPLIPLE permite selecção múltipla

Em XHTML MULTIPLIPLE=“MULTIPLIPLE ”

Page 31: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

Etiqueta <OPTION> Define um item da lista Atributos:

VALUE = valor identificativo da selecção SELECTED define o item como pré-seleccionado

Em XHTML SELECTED=“SELECTED ”

Exemplo:<select name=”cad”> <option value=”AD” selected>Ambientes de Desenvolvimento <option value=”BD”>Bases de Dados <option value=”PA”>Programação de Aplicações <option value=”LFA”>Ling. Formais e Autómatos</select>

Page 32: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

Etiqueta <INPUT> Constrói diversos tipos de interface consoante o

valor do atributo TYPE. Atributos généricos:

NAME = nome do objecto TYPE = “text” | “password” | “radio” |

“checkbox” | “image” | “file” | “submit” | “reset” | “button” | “hidden”;

Page 33: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

TYPE=“text” | TYPE=“password” Atributos específicos:

SIZE = largura da caixa em número de caracteres;

MAXLENGTH = número máximo de caracteres permitido;

VALUE = conteúdo por defeito

Exemplo:login:<input type=”text” name=”texto” size=”10”><br>password:<input type=”password” name=”pw” size=”15”>

Page 34: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

TYPE=“radio” | TYPE=“checkbox” Atributos específicos:

VALUE = valor atribuído à escolha; CHECKED elemento pré-seleccionado;

Em XHTML CHECKED=“CHECKED ”

Exemplo:

Sexo:<input type=”radio” name=”sex” value=”H” checked> Masculino <input type=”radio” name=”sex” value=”M”> Feminino <p>

Hobbys:<input type=”checkbox” name=”hob” value=”ler” > Ler <input type=”checkbox” name=”hob” value=”estud”> Estudar <input type=”checkbox” name=”hob” value=”cine” checked> Cinema <input type=”checkbox” name=”hob” value=”pesca”> Pescar

Page 35: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

TYPE=“SUBMIT” | TYPE=“RESET” | TYPE=“BUTTON” Atributos específicos:

VALUE = Texto no botão;

Exemplo:

<input type=”submit” value=”Carregue para ENVIAR”> <input type=”reset” value=”Carregue para LIMPAR”> <input type=”button” value=”Carregue para ...”>

Page 36: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

TYPE=“FILE” Atributos específicos:

SIZE = tamanho em caracteres da caixa de texto;

MAXLENGTH = tamanho máximo do nome do ficheiro;

Exemplo:Upload do ficheiro: <input type=”file” name=”fx” size=”30”>

Page 37: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Forms

TYPE=“IMAGE” Atributos específicos:

SRC = URL da imagem;

TYPE=“HIDDEN” Atributos específicos:

VALUE = Valor atribuído ao objecto;

Exemplo:

<input type=“hidden” name=“xpto” value=“xyz”><input type=”image” src=”abc.gif” name=”cores”>

<input type=“hidden” name=“xpto” value=“xyz”><input type=”image” src=”abc.gif” name=”cores”>

Page 38: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

HTML – Exemplo Forms<body> <form method=”post” action=”quest.cgi”> Nome:<input type=”text” name=”nome” size=”40”><p> Sexo:

<input type=”radio” name=”sexo” value=”fem”> Feminino <input type=”radio” name=”sexo” value=”masc”> Masculino <p>Ano de Nascimento: <select name=”nascim”>

<option value=”1984” selected>1984<option value=”1985”>1985<option value=”1986”>1986

</select><p>Cadeiras feitas:<br><input type=”checkbox” name=”cad” value=”ap”>Algoritmia<br><input type=”checkbox” name=”cad” value=”it”>Inglês Tecnico<br><input type=”checkbox” name=”cad” value=”alga”>Algebra <br><input type=”checkbox” name=”cad” value=”ad”> Amb. Desenv. <p>Observações:<textarea name=”obs” cols=”60” rows=”5”></textarea><p><center><input type=”submit” value=”Enviar”></center>

</form></body>

Page 39: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Amb. Desenv

Inglês TecnicoAlgebra

HTTP- Transferência de informação

Nome: Célia Olivença

Sexo: Feminino Masculino

Ano de Nascimento: 1984

1984

1985

1986

1985

1985

Cadeiras feitas:Algoritmia

Observações: R Pêro

234

ENVIAR

nome=C%E9lia+Oliven%E7a&sexo=fem&nascim=1985&cad=it&cad=ad&obs=R+P%EAro+%0D%0A234

Page 40: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Interface Web - Programação Cliente

HTML AppletsApplets Noções de DHTML

Folhas de estilo - Cascading Style Sheets Javascript

Page 41: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Applets Programa Java que é executado no contexto do

browser cliente. Etiqueta <APPLET>

Especifica para a inserção de applets numa página Web

Descontinuada a partir do HTML 4.0 Etiqueta <OBJECT>

Permite inserir objectos multimédia numa página Web (sons, videos, applets ...)

Etiqueta <PARAM> Utilizada em conjunto com <OBJECT> Parametriza um objecto

Page 42: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Applet – Exemplo 1/2

A applet

import java.applet.Applet;import java.awt.Graphics;public class testeADES extends Applet { public void paint (Graphics g) { g.drawString(getParameter("texto"), 50, 20); }}

Page 43: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Applet – Exemplo 2/2

A página web

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="440" height="40" >

<param name="code" value=" testeADES" /><param name= "texto" value= "ADES 2004/2005">

</object>

Page 44: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Interface Web - Programação Cliente

HTML Applets Noções de DHTMLNoções de DHTML

Folhas de estilo – Folhas de estilo – Cascading Style SheetsCascading Style Sheets JavascriptJavascript

Page 45: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

DHTML

DHTML – Dynamic HTML Não é uma norma do W3C Utilização conjunta de tecnologias para a

criação de sites dinâmicos HTML 4.0 Cascading Style Sheets (CSS) Document Object Model (DOM) Scripting (Javascript, VBScript, ...)

Page 46: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets CSS – Cascading Style Sheets Permite adicionar estilos (p.e. cores, tipos de letra,

espaçamentos) a páginas web Norma W3C (http://www.w3.org/Style/CSS) Especificações:

CSS 1.0 - (1996 -1999) especificação base (propriedades relativas a cores, espaçamento, e tipos de letra)

CSS 2.1 – entre outras, acrescenta ao CSS 1.0 propriedades de posicionamento absoluto, paginação e escrita de texto da direita para a esquerda

CSS 3.0 – (em desenvolvimento) irá suportar, entre outras coisas, interacção com o utilizador humano (discurso) e novos selectores

Page 47: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets

Consiste na definição de regras que descrevem o modo como os comandos HTML deverão ser apresentados pelo browser.

Estas regras são compostas por duas partes: selector e declaração.

H1 { : }

color lightgreen

Selector Declaração

Propriedade Valor

Page 48: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets

Níveis de utilização: Local – relativo a um comando especifico na

página Global – especificações para toda uma

página Web Externo – especificações para diversas

paginas Web (site)

Page 49: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets

Especificações locais

Especificações globais

<h2 style=”font-size:35pt;color:red;line-height:30px;”>teste</h2>

<head> <style type=”text/css”> <!--

h4 {font:17pt “arial”;font-weight:bold;color:blue;}h2 {font:15pt “courier”;font-weight:bold;color:yellow;}p {line-height:30pt; }

--> </style></head>

Page 50: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets

Especificações externasNas páginas Web

O ficheiro externo “ficheiro.css”

<head> <link type=”text/css”rel=”stylesheet” href=”ficheiro.css”></head>

<head> <style type=”text/css”> <!--

… --> </style></head>

Page 51: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets

Precedências

Declarações Locais

Declarações Globais

Declarações Externas

Page 52: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets Atributo CLASS

Permite definir vários estilos para uma mesma etiqueta.

O estilo definido na classe é utilizado em conjunção com o estilo base definido para a etiqueta.

A sua declaração é feita de forma global precedendo o nome do estilo por um “.”

Atributo ID Permite atribuir um identificador único a um elemento

específico do documento HTML O estilo declarado sobrepõe-se integralmente ao

estilo definido para a etiqueta A sua declaração é feita de forma global precedendo

o nome da estilo por um “#”

Page 53: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Cascading Style Sheets Exemplo:<style><!-- p{font-family:verdana;} .pergunta {color:green; font-style: italic;} .resposta {color:red;} #email {font-size: 8pt;}--></style><p CLASS=”pergunta”>O quer dizer ISEP?<p CLASS=”resposta”>Instituto Superior de Engenharia do Porto<p ID=”email”>[email protected]

A <p> faz-se utilizando o tipo de letra verdana

Estas classes não redefinem o tipo de letra

Logo estes <p CLASS=“...”> fazem-se utilizando o tipo de

letra verdana

Define-se um estilo identificador único

Logo neste <p ID=“...”> o tipo de letra utilizado não é o

verdana

Page 54: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Algumas propriedades de formatação CSS

color Cor do texto

background-color Cor de fundo de um objecto

background-image URL de uma imagem que será espalhada pelo fundo do objecto

font-family Tipo de letra

font-size Tamanho da letra

font-weight normal | bold | bolder | lighter

font-style normal | italic | oblique

text-align left | right | center | justify

text-variant normal | small-caps

width Largura de um objecto

height Altura de um objecto

line-height Valor para a altura de linha

margin-top Valor para a margem superior

margin-left Valor para a margem esquerda

margin-right Valor para a margem direita

margin-bottom Valor para a margem inferior

Page 55: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

Propriedades de posicionamento CSS

position absolute | relative

left Valor numérico da abcissa

top Valor numérico da ordenada

width Largura de um objecto

height Altura de um objecto

z-index Valor numérico da profundidade

visibility visible | hidden

Page 56: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

CSS – Exemplos 1/3

<style type="text/css"> body { color: lightyellow; background:navy; margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;font-size:400%} h2,h3,h4,h5,h6 { margin-left: -4%; } strong { text-transform: uppercase; font-weight: bold; } </style>

<body> <h1>ADES 2004/2005</h1> Desenvolvimento de aplicações para a web. <h3><strong>html</strong></h3> <h3><strong>asp .net</strong></h3> <h3><strong>xml</strong></h3></body>

Page 57: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

CSS – Exemplos 2/3<style type="text/css"> #xpto{position:absolute;top:50px;left:100px; width:40%;height:150px} #abcd{position:relative;top:250px;left:100px; width:40%;height:150px} .cor { background:#45DF3A;color:red; border:none; padding: 0.5em; } .box { border: solid; border-width: thin; } </style>

<body> <div ID ="xpto" class="box"> O conteúdo desta DIV está emoldurado </div> <div ID ="abcd" class="cor"> Esta DIV tem uma cor de fundo </div> </body>

Page 58: Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

CSS – Exemplos 3/3<style type="text/css"> :link { color: #000035 } :visited { color: #990099 } :active { color: #FF0066 } :hover { color: red } .plain { text-decoration: none;font:16pt "Comic Sans Ms" bold} </style>

<body> <a href="http://www.dei.isep.ipp.pt/ades"> Link normal </a> <p> <a class ="plain" href="http://www.ipp.pt/"> Link estilizado </a></body>