Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
1Março 2006Tito Carlos S. Vieira [email protected]
Sistemas Computacionais e de Comunicação
Licenciatura em Ciência da Informação
Tito Carlos S. VieiraE-mail: [email protected]
2Março 2006Tito Carlos S. Vieira [email protected]
n World Wide web
n Modelo cliente-servidor
n Linguagem HTML
n Design de páginas: modelos de organização de páginas; folhas de estilo.
AgendaAgenda
3Março 2006Tito Carlos S. Vieira [email protected]
BibliografiaBibliografia• Quercia V., Internet in a Nutshell, O’Reilly & Associates.
• Comer D. The Internet Book, Prentice Hall Inc, 1997.
• Stevens R., TCP/IP Illustrated, Vol.1, Addison-Wesley
• Chuck Musciano, Bill Kennedy, HTML The Definitive Guide, 2nd ed., O’Reilly & Associates, 1997
• Danny Goodman, Dynamic HTML, O’Reilly, 1998
• S. Spainhour, V. Quercia, Webmaster in a Nutshell, O’Reilly
• Thomas A. Powell, HTML: The complete reference, 2nd ed., Osborne/McGraw-Hill, 1999
• HTML 4.0 Specification, W3C Recommendation, 1998 -http://www.w3.org/
• Cascading Style Sheets, level 2 CSS2 Specification, W3C Recomendation , 1998 - http://www.w3.org/
4Março 2006Tito Carlos S. Vieira [email protected]
WorldWorld WideWide WebWebn Origem: surge da necessidade de vários grupos de físicos precisarem
partilhar informação multimédia integrada, sem terem de a enviar para as várias equipas.
n Acesso à informação por pedido (pull) em vez de por envio (push).
n Cria-se então uma aplicação cliente e uma servidor.
n Cria-se o protocolo de comunicação entre cliente e servidor (http).
n Define-se a linguagem HTML para a elaboração dos documentos que seriam apresentados pela aplicação cliente.
n Tornou-se no serviço mais importante da Internet: em 1995 o tráfego WWW ultrapassou o de FTP.
n Responsável pela actual expansão da Internet.
5Março 2006Tito Carlos S. Vieira [email protected]
HipertextoHipertexto
n Misturar as referências (realçadas) com o texto tem a vantagem de lhes dar contexto e de facilitar uma sequência natural de consulta.
n Estes documentos designam-se de hipertexto ou hipermédia.• texto, áudio, imagem parada ou vídeo
LEIC Disciplinas
------
------
NMP
------
NMP 1998/1999
------
------
Alunos
------
Alunos
------
Luis
Rui
------
Luis
------
------
Curso
------
Rui
------
------
Curso
------
6Março 2006Tito Carlos S. Vieira [email protected]
WorldWorld WideWide WebWeb
n WWW ou Web são as designações mais curtas de World WideWeb.
n Em sentido estrito, WWW refere-se ao serviço de navegação que usa o protocolo HTTP.
n A World Wide Web é uma colecção de documentos hipertexto/hipermédia localizados em servidores Web da Internet. Estes documentos contêm apontadores que os interligam.
n A colecção de todos estes documentos constitui o chamado “espaço Web”.
7Março 2006Tito Carlos S. Vieira [email protected]
n Objectivo fundamental• partilha da informação
- questões de segurança não eram prioritárias
n Requisitos• Acesso à Internet
- acesso remoto (através de um modem)- Rede local (LAN)
• Cliente WEB- Disponível para várias plataformas diversas (Internet Explorer ou
Mozzila, Firefox, Opera, etc…)
WorldWorld WideWide WebWeb
8Março 2006Tito Carlos S. Vieira [email protected]
Arquitectura ClienteArquitectura Cliente--ServidorServidor
n WWW• Navegador (browser)
• Dados não estruturados- HTML
• Possibilidade de ligação a aplicações externas
- BD
n Os servidores e clientes WWW trocam informação utilizando o protocolo HTTP
B D H T M L
c lie n t e W e b
s e r v i d o r W e b
N o m e U R LC a t e g o r ia
C u r s o D o c e n t eD is c ip lin a
< T I T L E >P á g i n a P e s s o a l< /T IT L E >< B O D Y >sk d flk d s fsfdo r u r m d k ly k f d d ff d k d fk d f< /B O D Y >
P á g ina da d i s c ip l i na
9Março 2006Tito Carlos S. Vieira [email protected]
10Março 2006Tito Carlos S. Vieira [email protected]
Comunicação ClienteComunicação Cliente--ServidorServidor
URL Uniform Resource Locator
HTTP Hypertext Transfer Protocol
HTML Hypertext Markup Language
11Março 2006Tito Carlos S. Vieira [email protected]
URLURL
n A localização de um qualquer recurso é definida num URL - Uniform Resource Locator
serviço://computador/ficheiro• serviço indica o protocolo do servidor pretendido (http, ftp,
gopher, ...); se omisso, usa o HTTP
• computador é a máquina onde “corre” o servidor
• ficheiro é o nome completo do ficheiro pretendido; se omisso, usa-se habitualmente default.html ou index.html
12Março 2006Tito Carlos S. Vieira [email protected]
Servidores WWWServidores WWW
n Disponíveis para diversas plataformas• Unix, Windows, Linux, Mac, FreeBSD
• Existem servidores do domínio público, shareware e comerciais
n Servidores do domínio público• gratuitos
• código fonte disponível
n Desenvolvidos inicialmente para UNIX• Para correr um servidor WEB não é necessário uma máquina de
elevado desempenho
• Um PC com Linux ou FreeBSD suporta vários milhares de acessos diários
13Março 2006Tito Carlos S. Vieira [email protected]
Alguns servidores WWWAlguns servidores WWW
n IIS – Internet Information Server• gratuito com Windows NT 4 e Windows 2000
• http://www.microsoft.com/iis
n PWS – Personal Web Server• gratuito com Windows 98
n Apache• UNIX /Linux / NT
• http://www.apache.org
14Março 2006Tito Carlos S. Vieira [email protected]
BrowsersBrowsers (Navegadores)(Navegadores)n Os browsers mais comuns actualmente são o Firefox e
Microsoft Internet Explorer - http://www.microsoft.com/ie- http://www.mozilla.com/firefox/
• para além de funcionarem como clientes WWW, também incluem clientes para os outros serviços (ftp, telnet, e-mail, etc…)
• transferem e mostram ficheiros ASCII ou HTML
• transferem e mostram ficheiros binários se a aplicação ajudante (helper) ou um software adicional (plug-in ou applet) estiverem instalados, caso contrário armazenam-nos em disco (download)
15Março 2006Tito Carlos S. Vieira [email protected]
HTMLHTML
n HyperText Markup Language• É constituído por um conjunto de elementos (em inglês Tag’s) que
são utilizados para indicar a estrutura e formato do documento. Estes elementos têm um significado que é interpretado por um programa (browser), que faz a apresentação do documento.
• É uma linguagem de estruturação de documentos, incluindo recursos multimédia, e de especificação de ligações, com suporte para outros serviços, como o ftp e o gopher.
• É um caso particular da linguagem SGML (Standard General MarkupLanguage)
• HTML é definido por um DTD (Document Type Definition) SGML
16Março 2006Tito Carlos S. Vieira [email protected]
HTML (HTML (contcont))
n A concorrência entre navegadores (browsers) origina o aparecimento de extensões à norma
• Podem amarrar a um navegador e dificultar o acesso através de outros navegadores.
• Por vezes, as extensões mais usadas acabam por ser incorporadas na versão seguinte da norma.
n Quem controla as normas da Web é o W3C - WorldWide Web Consortium
17Março 2006Tito Carlos S. Vieira [email protected]
HTML não éHTML não én Não é uma ferramenta de processamento de texto.
n É uma linguagem de anotação de documentos, para evidenciar a sua estrutura e conteúdo, mais do que a forma, que pode variar entre navegadores:• inclui contudo comandos que afectam a forma, tais como a fonte, os
títulos e as mudanças de linha
• não se devem usar os comandos de estrutura só pelo efeito gráfico que produzem
n não existe (ao contrário de um processador de texto)
• Notas de rodapé, sumários e índices automáticos;
• Cabeçalhos e rodapés;
• Tabuladores;
• Listas com sublistas numeradas;
• Tratamento gráfico de equações matemáticas.
18Março 2006Tito Carlos S. Vieira [email protected]
Ferramentas de desenvolvimentoFerramentas de desenvolvimento
n Necessários um editor e um navegador.
n Dois métodos de construção das páginas:• Primeiro escrever o texto e depois colocar as marcas
- Pode usar-se um processador de texto normal e respectivas ferramentas de correcção ortográfica, etc., e em seguida acrescentar as marcas sistematicamente (gravar em texto);
- Pode recorrer-se à gravação em formato HTML de documentos MS Office, embora muitas vezes seja necessário afinar o resultado;
• Escrita simultânea do conteúdo e das marcas- Editores que facilitam a geração de código HTML com visualização num
navegador (HomeSite)- Editores WYSIWYG só interessam se for possível chegar facilmente ao
código gerado (ex: FrontPage)
19Março 2006Tito Carlos S. Vieira [email protected]
Estrutura de um documentoEstrutura de um documento
n Um documento HTML é composto por:• Uma linha contendo informação sobre a versão de
HTML utilizada;
• Uma secção declarativa (cabeçalho), delimitada pelo elemento HEAD;
• Um corpo contendo o conteúdo do documento, o qual pode ser delimitado pelo elemento BODY ou FRAMESET.
20Março 2006Tito Carlos S. Vieira [email protected]
Estrutura de um documentoEstrutura de um documento
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE>Título do Documento</TITLE>
…Outra informação suplementar ….
</HEAD>
<BODY>
Conteúdo do documento...
</BODY>
</HTML>
21Março 2006Tito Carlos S. Vieira [email protected]
Elementos HTMLElementos HTML<Marca de início>Conteúdo marcado</Marca de fim>
<H1 ALIGN=“LEFT”>Exemplo de um cabeçalho</H1>
• H1 = nome da marca
• ALIGN=“LEFT” Atributo - ALIGN = Nome do atributo- LEFT = Valor do atributo- Texto afectado → “Exemplo de um cabeçalho”
• Uma marca pode ter vários atributos
22Março 2006Tito Carlos S. Vieira [email protected]
Elementos HTMLElementos HTML
• Os nomes das marcas e dos atributos podem ser escritos em maiúsculas e/ou minúsculas (case insensitive).
- <h1 aLiGn=LeFt>Texto exemplo</H1>- <H1 ALIGN=“left”>Texto exemplo</h1>
• Os nomes das marcas e dos atributos não podem conter espaços.
- < H 1 AL IGN =LEFT>Texto exemplo</H1> (ERRADO)
• Os navegadores (browsers) ignoram os elementos e os atributos desconhecidos e tentam ultrapassar erros.
23Março 2006Tito Carlos S. Vieira [email protected]
Elementos HTMLElementos HTML
• Os valores dos atributos podem conter espaços, se colocados entre aspas.
- <img src=“logo.gif” alt=”Imagem da FEUP”>
• Nas marcas encaixadas deve manter-se a hierarquia.- <B><I>Isto é importante</B></I> (ERRADO)- <B><I>Isto é importante</I></B>
• Uso da marca de fim:- Obrigatório <TITLE></TITLE>- Opcional <P></P>- Não existe <BR>
24Março 2006Tito Carlos S. Vieira [email protected]
Elemento <!DOCTYPE>Elemento <!DOCTYPE>n Permite identificar o “dialecto” HTML utilizado no documento,
através da referência de um DDT (document type defenition) que define os elementos, atributos e relações entre os elementos validas no referido documento.
n Exemplos:• <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
• Informa que o documento está de acordo com as definições do HTML 4, definido pelo W3C.
• <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
• Informa que o documento está de acordo com as definições do HTML 3.2, definido pelo W3C.
25Março 2006Tito Carlos S. Vieira [email protected]
Elemento <HTML>Elemento <HTML>
n Sintaxe <HTML> </HTML>
n Delimita o início e o fim de um documento HTML
n Contem apenas os elementos <HEAD> e {<BODY> ou <FRAMESET>}.
n Na actual versão esse elemento é redundante, no caso de se utilizar o elemento <!DOCTYPE>, contudo, a sua utilização torna o documento mais legível.
26Março 2006Tito Carlos S. Vieira [email protected]
Elemento <HEAD>Elemento <HEAD>
n Sintaxe <HEAD> </HEAD>
n Contem informação sobre o documento actual, como o título e palavras chave que podem ser utilizadas por motores de busca, a qual não é apresentada pelo navegador (browser).
n Principais marcas contidas pelo elemento HEAD:• Title
• Meta
• Link
• Script
• Style
27Março 2006Tito Carlos S. Vieira [email protected]
Elemento <TITLE>Elemento <TITLE>
n Sintaxe <TITLE> </TITLE>• Ao contrário dos elementos <HTML>, <HEAD> e <BODY>, este
elemento é obrigatório.
• É utilizado para atribuir um título ao documento HTML, o qual é apresentado no topo da janela navegador.
• É utilizado para dar nome ao endereço quando se guarda nos “Favoritos”/“bookmark”.
• É importante que descreva o conteúdo e eventualmente dê o contexto, pois pode-se chegar lá directamente e os indexadoresmuitas vezes só olham para o título.
- <TITLE>A Minha Página Pessoal</TITLE> (ERRADO)- <TITLE>Página Pessoal de António Viana</TITLE> (CERTO)
28Março 2006Tito Carlos S. Vieira [email protected]
Elemento <META>Elemento <META>
n Sintaxe <META>• Permite especificar informação extra sobre o documento, como por
exemplo especificar palavras chave que ajudam os motores de busca (pares nome/conteúdo).
• Especificar o autor do documento.- <meta name=“author” content=“Tito Vieira”>
• Especificar palavras chave.- <meta name=“keywords” content=“Férias, Portugal, Sol”>
• Informa que deve ser feito um “refresh” do documento após 350 segundos, com a opção de o substituir por outro URL.
- <meta http-equiv=“refresh” content=“350, http://www.fe.up.pt”>
• Informa que o URL expira em determinada data.- <meta http-equiv=“refresh” content=“Tue, 20 Out 2009”>
29Março 2006Tito Carlos S. Vieira [email protected]
Elemento <BODY>Elemento <BODY>n Sintaxe <BODY> </BODY>
n Contém o conteúdo do documento; é opcional mas deve ser sempre utilizado.
n Deve existir apenas um <BODY> em cada documento.
n Permite entre outros, controlar o fundo do documento (colocar cor ou imagem).• <body bgcolor=“Gray” text=“Blue” leftmargin=“2” topmargin=“2”>
n Elementos utilizados dentro do elemento BODY• Elementos de Bloco
- Cabeçalhos, Réguas, Parágrafos, Quebras de linha, Listas, etc.- Na sua generalidade, estes elementos introduzem uma linha em branco antes e
depois do texto marcado.
• Elementos de texto- Negrito, Itálico, Sublinhado, Sobrescrito, Subscrito, etc.
30Março 2006Tito Carlos S. Vieira [email protected]
Elemento <BODY>Elemento <BODY><BODY BACKGROUND="horiz.gif" BGCOLOR=“#FFFFFF” TEXT="#000000">
......
</BODY>
31Março 2006Tito Carlos S. Vieira [email protected]
CabeçalhosCabeçalhosn Existem 6 níveis de cabeçalhos, desde o mais
importante H1 até ao menos importante H6.• Sintaxe <H1></H1>, <H2></H2>, …, <H6></H6>
• <h4> tem o tamanho da fonte normal.
• Deve-se manter consistência na escolha dos níveis.
• Estes podem incluir texto, imagens, âncoras e mudanças de linha.
• Não devem incluir parágrafos, listas e outros elementos de bloco.
• Pode ser definido o alinhamento:- <H3 ALIGN=“LEFT”> Esquerda </H3>- <H3 ALIGN=“CENTER”> Centrar </H3>- <H3 ALIGN=“RIGHT”> Direita </H3>
32Março 2006Tito Carlos S. Vieira [email protected]
CabeçalhosCabeçalhos
33Março 2006Tito Carlos S. Vieira [email protected]
RéguasRéguasSintaxe: <HR>
Para retirar o efeito 3D, usa-se
<HR noshade>
Uso dos parâmetros align, size e width.
<HR align=right size=5 width=33%>
<HR align=center size=7 width=33%>
Alteração da cor.
<HR align=left noshade color="Blue">
34Março 2006Tito Carlos S. Vieira [email protected]
ParágrafosParágrafosn O elemento P representa um parágrafo. Não
pode conter outros elementos de bloco.
n Sintaxe <P> </P>• Efeito: introduz uma mudança de linha e adiciona
um espaço na vertical.• Permite escolher o alinhamento através do atributo
align <P ALIGN=“JUSTIFY”> … </P>outra forma <DIV ALIGN=“justify”> …</DIV>
• A marca </P> é facultativa• Não é possível utilizar múltiplos elementos <p>
vazios para criar linhas em branco, uma vez que são colapsados num só. Neste caso deve-se utilizar múltiplos elementos de quebra de linha. <BR> <BR> <BR>
n O HTML ignora espaços, tabulações e mudanças de linha.
n Múltiplos espaços são colapsados num só.
35Março 2006Tito Carlos S. Vieira [email protected]
Mudanças de linhaMudanças de linhan Sintaxe: <BR>
n <br clear=left>• muda de linha, mas só recomeça abaixo de qualquer
imagem ou tabela que esteja encostada à esquerda.
• clear={left, right, all, none}
n Sintaxe: <nobr>• não muda de linha, mesmo que ultrapasse a margem.
• <wbr>, dentro de um <nobr> dá a oportunidade de quebrar, se já se tiver ultrapassado a margem.
n Sintaxe: <pre> </pre>• respeita os espaçamentos e quebras do texto pré-
formatado.
• útil para quadros e código; monoespaçado.
• interpreta marcas que não impliquem quebras (fontes, ligações).
36Março 2006Tito Carlos S. Vieira [email protected]
Exemplo 1Exemplo 1<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”><html><head><title>Documento inicial</title></head><body><h2>Exemplo</h2>Este documento mostraque
os espaços no código fonte <!-- observação: esta observaçãonão aparece no texto -->são ignorados pelo navegador.<p><i>Introduzi um novo parágrafo.</i></p></body></html>
37Março 2006Tito Carlos S. Vieira [email protected]
Exemplo 2Exemplo 2<h4 align=“center”>Quebras</h4>
<p>Este texto aparece antes da imagem, a qual vai ser alinhada à esquerda.
<br>
<img src=”query.gif” align=“left”>
Esta frase está na mesma linha da imagem<br>
pelo que fica à sua direita.
<br clear=“left”>
O parâmetro de limpeza faz ultrapassar a imagem.
</p><pre>
Este bocado de texto tem
muitos espaços
e mudanças de linha.
</pre>
38Março 2006Tito Carlos S. Vieira [email protected]
Outros elementos de blocoOutros elementos de blocon Citações
• Sintaxe: <blockquote></blockquote>- Utilizado quando se pretende apresentar
uma citação.- O texto apresenta-se avançado
relativamente à margem esquerda.- pode conter outros elementos de texto.
n Endereços• Sintaxe: <address></address>
- Geralmente é utilizado pelos autores para fornecerem informações de contacto.
- Pode conter elementos de texto, mas não deve incluir outros elementos de bloco.
39Março 2006Tito Carlos S. Vieira [email protected]
ListasListas
n O HTML oferece mecanismos para especificar listas de informação.
n As listas podem conter:• Informação ordenada;• Informação não ordenada;• Definições.
n Uma lista pode conter várias sub-listas.
n As listas podem ser misturadas, isto é, uma lista ordenada pode conter uma lista não ordenada, etc.
40Março 2006Tito Carlos S. Vieira [email protected]
Listas ordenadasListas ordenadasn Sintaxe:
<OL> (Início da lista)<LI> (Item da lista)
</OL> (Fim da lista)
n Atributos:• Type – Controla o estilo da lista (1, A, a, I, i).• Start – Especifíca o número de início do primeiro item da lista (Apenas no
OL). • Value – Especifica o número do item corrente (Apenas no LI).• Compact – Sugere uma apresentação compactada.
n Ex:<OL TYPE=“i” START=“3” COMPACT>
<LI>Primeiro<LI VALUE=“4”>Segundo<LI>Terceiro
</OL>
41Março 2006Tito Carlos S. Vieira [email protected]
Listas não ordenadasListas não ordenadasn Sintaxe:
<UL> (Início da lista)<LI> (Item da lista)<LI> (Item da lista)
</UL> (Fim da lista)
n Atributos:• Type – Controla o estilo da lista (disc, circle, square).• Compact – Sugere uma apresentação compactada.
n Ex:<UL TYPE=“circle” COMPACT>
<LI>Primeiro<LI TYPE=“disc” >Segundo<LI TYPE=“square” >Terceiro
</UL>
42Março 2006Tito Carlos S. Vieira [email protected]
Listas de definiçõesListas de definiçõesn Sintaxe:
<DL> (Início da lista)<DT> (Termo da lista)
<DD> (Descrição)</DL> (Fim da lista)
n Atributos:• Compact – Sugere uma apresentação compactada.
n Ex:<DL COMPACT>
<DT>Monitor<DD>Dispositivo de output
<DT>Rato<DD>Dispositivo de input
</DL>
43Março 2006Tito Carlos S. Vieira [email protected]
Exemplo de listasExemplo de listas<OL TYPE=“A”><LI>Vertebrados
<OL TYPE=“1”><LI>Mamíferos
<UL><LI> Primatas.<LI TYPE=“disc”> Cetáceos.</UL>
<LI> Aves</OL>
<LI VALUE=“3”> Invertebrados.</OL><DL>
<DT>Coisa <DD>O que se chama a um objecto na falta de melhor.
<DT>Objecto <DD>O que se chama a uma coisa quando não ocorre outra.
</DL>
44Março 2006Tito Carlos S. Vieira [email protected]
Elementos de textoElementos de texto
n Elementos lógicos / elementos físicos
n Elementos lógicos: baseados no conteúdo • São elementos que atribuem um significado especial ao conteúdo,
que deve ser mostrado com aparência diferente do texto normal.
• Actualmente são pouco diferenciados (convertidos para itálico ounegrito)
• Exemplos mais utilizados:- <EM></EM> - Ênfase; itálico.- <STRONG></STRONG> - Ênfase mais forte; negrito. - <CITE></CITE> - Citação bibliográfica; itálico.- <CODE></CODE> - Código para computador; monoespaçado.
45Março 2006Tito Carlos S. Vieira [email protected]
Elementos de textoElementos de texto
n Elementos físicos• São elementos que indicam directamente o aspecto pretendido,
mas não transportam significado.
• Exemplos:- <B></B>, <I></I>, <U></U> - negrito, itálico, sublinhado.- <BIG></BIG> - Aumenta o tamanho da fonte. - <SMALL></SMALL> - Diminui o tamanho da fonte.- <BLINK></BLINK> - pisca; realça e “aborrece”.- <SUB></SUB>, <SUP></SUP> - Índice, expoente.- <TT></TT> - Monoespaçado.- <S> </S> ou <STRIKE></STRIKE> - Traçado.
46Março 2006Tito Carlos S. Vieira [email protected]
CaracteresCaracteresn O protocolo HTTP especifica que, por omissão, é usado o
padrão ISO-8859-1.
n Para que os caracteres especiais sejam correctamente interpretados, estes devem ser especificados da seguinte forma:• &code;
- code – Pode ser um nome ou código numérico.
n Exemplos:< < á á
> > ê ê
& & ì ì
º º õ õ
" “ Ü Ü
espaço © ©
 ® ®
47Março 2006Tito Carlos S. Vieira [email protected]
FontesFontes
n <font> </font> - delimita a definição da fonte• Permite especificar:
- o tipo de fonte a utilizar (pode-se especificar mais do que uma fonte);- o tamanho (varia entre 1 e 7);- a cor.
• Exemplo- <font face="Arial,'Comic Sans MS','Times New Roman'" size="3"
color="Green"> </font>
• Tamanho relativo- <font size=”+3"> </font>
48Março 2006Tito Carlos S. Vieira [email protected]
TabelasTabelasn Sintaxe:
• <TABLE></TABLE> - Delimita a tabela.- Atributos
- Border, Bgcolor, Whidth, Align, Cellspacing, Cellpadding
• <CAPTION></CAPTION> - Título da tabela, o qual tem que ser colocado imediatamente a seguir à marca <TABLE>
- Atributos- Align
• <TR></TR> - Introduz uma linha que vai conter células.
• <TH></TH> - Introduz uma célula do tipo “cabeçalho” (o conteúdo aparece a negrito).
• <TD></TD> - Introduz uma célula que vai conter dados.- Atributos
- Rowspan, Colspan, Align
• Atributo Align- Em <TABLE> controla o alinhamento da tabela.- Em <TR>, <TH> e <TD> controla o alinhamento do texto nas células.
49Março 2006Tito Carlos S. Vieira [email protected]
TabelasTabelasExemplo
<table>
<tr>
<th>Exame
<th>Nota
<th>Final
<tr>
<td>Ana
<td>10<td>11
<tr>
<td>Zé
<td>12<td>15
<tr>
<th>Média
<td>11<td>13
</table>
50Março 2006Tito Carlos S. Vieira [email protected]
TabelasTabelasn Agrupamento de linhas – As linhas podem ser agrupadas
em três níveis: cabeçalho, rodapé e corpo.
n Sintaxe:• <THEAD>
• <TFOOT>
• <TBODY>
• Estas marcas tornam possível o “scrolling” de tabelas grandes, assim como ao imprimir, o cabeçalho e o rodapé podem ser repetidos em cada página impressa com dados da tabela.
• Cada uma destas marcas deve conter pelo menos uma linha (<TR>) com o mesmo número de células (<TH> ou <TD>).
• É obrigatório que a marca <TFOOT> apareça antes da marca <TBODY>.
51Março 2006Tito Carlos S. Vieira [email protected]
TabelasTabelas
n Exemplo de agrupamento de linhas
<TABLE>
<THEAD>
<TR>Informação de cabeçalho
<TFOOT>
<TR> Informação de rodapé
<TBODY>
<TR>Dados...
<TR>Dados...
</TABLE>
52Março 2006Tito Carlos S. Vieira [email protected]
TabelasTabelasn Agrupamento de colunas – As colunas podem ser
agrupadas por forma a criar divisões estruturadas ou não. Este agrupamento permite partilhar atributos entre colunas.
n Sintaxe:• <COLGROUP> - Cria um grupo de colunas explicito, podendo conter
vários elementos <COL>• <COL> - Não agrupa as colunas numa forma estrutural, servindo
apenas como suporte para os atributos. Podem aparecer dentro ou fora de um grupo explicito (<COLGROUP>).
• Atributos:- Span – nº de colunas afectadas.- Width – largura das colunas.- Align – Alinhamento horizontal do texto dentro da célula.- Valign – Alinhamento vertical do texto dentro de célula.
53Março 2006Tito Carlos S. Vieira [email protected]
Tabela mais elaboradaTabela mais elaborada
n Como construir?
n Quantas células são definidas na 2ª linha?
n É possível incluir uma outra tabela num <TD>?
54Março 2006Tito Carlos S. Vieira [email protected]
Tabela mais elaboradaTabela mais elaborada
55Março 2006Tito Carlos S. Vieira [email protected]
Links e ancorasLinks e ancoras
n Uma das maiores diferenças entre o HTML e outras linguagens de marcas (markup languages) é a característica para hipertexto e documentos interactivos.
n O construtor básico do hipertexto é o link (ou Hiperlink, ou Web link).
n Um link é uma ligação que permite “saltar” de um recurso Web para outro através de um comando dado com o rato, teclado, etc... Esta característica foi um dos maiores factores de sucesso da Web.
n Os links criam-se utilizando o elemento <A>.
56Março 2006Tito Carlos S. Vieira [email protected]
Links e ancorasLinks e ancorasn Sintaxe:
• <A></A>
• Atributos- Name – Atribui um nome à ancora, para que esta seja o destino de
outro link.- Href – Especifica a localização do recurso Web.- Title – Permite apresentar informação quando se passa com o rato
sobre o link.- Target – Especifica a janela onde vai ser apresentado o documento.
- Tipo:• _bank – Abre o documento numa nova janela.• _self – Abre o documento na mesma janela onde se encontra o
documento actual. • _parent – Abre o documento na janela imediatamente anterior.• _top – Abre o documento ocupando toda a janela original.
57Março 2006Tito Carlos S. Vieira [email protected]
Links e ancorasLinks e ancorasn Criar um link para uma página exterior:
• <A HREF="http://www.fe.up.pt/rel29.html">Link</A>
n Criar uma âncora num documento:• <A NAME="capitulo2">Revisão bibliográfica</A>
n Criar um link para uma âncora na própria página:• <A HREF="#capitulo2”>link</A>
n Criar um link para uma âncora de uma página exterior:• <A HREF="http://www.fe.up.pt/rel29.html#capitulo2">link</A>
58Março 2006Tito Carlos S. Vieira [email protected]
Endereço absoluto/relativoEndereço absoluto/relativon Endereço absoluto:
• http://www.fe.up.pt/relatorios/1999.html
n Endereço relativo• ../../relatorios/1999.html
n Podemos omitir partes do endereço e completar com:• As partes correspondentes do documento actual.• A parte de endereço contida na marca <BASE>, que se define no
cabeçalho.
n Exemplos:• <A href=logotipo.html>link</A>
- ligação para a página que está no mesmo directório da página que a referencia.• Se tiver <head><base href=“http://www.fe.up.pt/relatorios/capas.html”></head>
- <A href=../img/logotipo.html>link</A>- ligação para a página que está em http://www.fe.up.pt/img/logotipo.html
59Março 2006Tito Carlos S. Vieira [email protected]
Formatos ImagemFormatos Imagemn Formatos de imagens utilizados na Web
n GIF Graphics Interchange Format (.gif)• 256 cores; LZW (Lempel-Ziv-Wech); compressão: lossless
• GIF87 e GIF89a (transparência; animação; interlacing)
• Usado preferencialmente para ilustrações
n JPEG Joint Photographic Experts Group (.jpg.jpeg)• Milhões de cores; adequada para fotografia
• Não: transparência e animação; sim: progressive JPEG
60Março 2006Tito Carlos S. Vieira [email protected]
ImagensImagensn Sintaxe:
• <IMG>
n Atributos• src – URL absoluto ou relativo da localização da imagem.
• alt – Texto a mostrar se a imagem não aparecer ou, no caso desta aparecer, quando se passa o ponteiro do rato sobre ela.
• align – Posiciona a imagem relativamente ao texto.- top, middle, bottom - acerta o topo, meio ou fundo da imagem com o a
linha de texto.- left, right – Desloca a imagem para a esquerda ou direita e põe o texto a
envolvê-la.
• <P align=“center”> ou <DIV align=“center”>
• border – espessura do caixilho; 0 elimina, o que pode prejudicar a identificação dos que possuem ligações.
• height e width – dimensão em pixel, acelera o carregamento; é usada para reservar espaço e para escalar as imagens.
61Março 2006Tito Carlos S. Vieira [email protected]
Imagens como Imagens como linkslinks
<BODY> <B>Button with a border<B><BR> <A HREF="about.htm"><IMG SRC="about.gif" ALT="AboutButton" HEIGHT="55" WIDTH="55"> </A><BR><BR> <B>Same button without a border</B><BR> <A HREF="about.htm"> <IMG SRC="about.gif"
ALT="About Button" BORDER="0" HEIGHT="55" WIDTH="55"></A>
</BODY>
62Março 2006Tito Carlos S. Vieira [email protected]
Mapa sensitivoMapa sensitivon Os mapas sensitivos permitem que se atribuam acções a
determinadas regiões de uma imagem. Quando a região é activada a acção é executada.
n Os elemento <MAP> e <AREA> permitem criar o mapa sensitivo, indicando as coordenadas e as respectivas acções.
n As áreas podem ser:• Default- especifica toda a região.• Rect – especifica uma região rectangular.• Circle - especifica uma região circular.• Poly - especifica uma região poligonal.
n Utilizando em <IMG> o atributo USEMAPE=“#nome do mapa” associa-se o mapa à imagem,tornando-a sensitiva.
0,0
70,140
30,70
150,130
90,30
63Março 2006Tito Carlos S. Vieira [email protected]
Mapa sensitivoMapa sensitivo
<H1 ALIGN="CENTER">Client-side Image Map Test</H1><DIV ALIGN="CENTER"> <IMG SRC="shapes.gif" USEMAP="#shapes" BORDER="0" WIDTH="400" HEIGHT="200"> </DIV> <MAP NAME="shapes"> <AREA SHAPE="RECT" COORDS="6,50,140,143" HREF="rectangle.htm" ALT="Rectangle"> <AREA SHAPE="CIRCLE" COORDS="195,100,50" HREF="circle.htm" ALT="Circle"> <AREA SHAPE="POLY" COORDS="255,122,306,53,334,62,338,0,388,77,374,116,323,171,255,122”HREF="polygon.htm" ALT="Polygon"> <AREA SHAPE="default" HREF="defaultreg.htm"> </MAP>
64Março 2006Tito Carlos S. Vieira [email protected]
Mapa sensitivoMapa sensitivo
<IMG SRC="donut.gif" WIDTH="300" HEIGHT="300" BORDER="0" ALT="Donut Widget"
usemap="#donut">
<MAP NAME="donut">
<AREA SHAPE="circle" COORDS="147,149,72" ALT="Donut Hole" NOHREF>
<AREA SHAPE="circle" ALT="Donut Widget”COORDS="149,150,143”HREF="donutspec.htm">
<AREA SHAPE="default" NOHREF> </MAP>
Http://www.boutell.com/mapedit
65Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))n As frames permitem dividir a janela principal em várias sub-janelas, permitindo
apresentar documentos diferentes na mesma janela principal.
n O documento HTML que descreve o layout das frames é designado por framesetdocument, no qual o elemento <BODY> é substituído pelo elemento <FRAMESET>
n Sintaxe: <FRAMESET></FRAMESET>
n Atributos:• Rows – especifica o nº de sub-espaços horizontais num FRAMESET.• Cols – especifica o nº de sub-espaços verticais num FRAMESET.
• Se o atributo rows não for especificado, será considerado como se existisse apenas uma linha ocupando todo o seu sub-espaço.
• Se o atributo cols não for especificado, será considerado como se existisse apenas uma coluna ocupando todo o seu sub-espaço.
• As frames são criadas da esquerda para a direita no caso das colunas e de cima para baixo no caso das linhas.
• Se ambos os atributos forem utilizados, as sub-janelas são criadas da esquerda para a direita na primeira linha, da esquerda para a direita na segunda linha, etc...
66Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))n Definição do espaço ocupado por cada sub-janela:
• Tamanho fixo <FRAMESET rows=“200,600”></FRAMESET>• Tamanho em percentagem (a sua soma deve ser igual a100%)
<FRAMESET rows=“30%,70%”></FRAMESET>• Tamanho relativo <FRAMESET rows=“3*,*,2*”></FRAMESET>
n Exemplo:<FRAMESET rows=“*,5*” cols=“30%,300,*> ... </FRAMESET> - Cria uma janela
com 2 linhas e 3 colunas
n Mistura de frames• Um espaço pode ser dividido em 3 colunas e a coluna do meio pode ser
dividida em 2 linhas<FRAMESET cols=“30%,40%,*>
Conteudo da 1ª frame... <FRAMESET rows=“*,*” >
Conteudo da 2ª frame, 1ª linhaConteudo da 2ª frame, 2ª linha
</FRAMESET>Conteudo da 3ª frame
</FRAMESET>
67Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))n O elemento <FRAME> define o conteúdo e a aparência de cada
frame individual, o qual é contido pelo elemento <FRAMESET>.• Sintaxe:
- <FRAME>
• Atributos:- Name – Atribui um nome à frame.- Src – Localização do documento inicial que deve conter a frame.- Frameborder (1|0) – Permite activar ou não os contornos da frame.- Marginwidth – Permite especificar a margem entre a frame esquerda e a
direita.- Marginheigth - Permite especificar a margem entre a frame superior e a
inferior.- Noresize – Não permite fazer o redimensionamento da frame.- Scrolling – Permite controlar o aparecimento das barras de scrooll.
n Exemplo:<FRAME src=“inicio.html” scrolling=“no” name=“menu”>
68Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Simple Frame Example</TITLE></HEAD><FRAMESET COLS="250, *">
<FRAME SRC="file_one.htm" NAME="Controls"><FRAME SRC="file_two.htm" NAME="Display">
<NOFRAMES>Este documento utiliza frames. Por favor sigaeste <A HREF="noframes.htm">link</A>para uma versão sem frames.</NOFRAMES></FRAMESET></HTML>
n O elemento <NOFRAMES> permite especificar conteúdos que são apenas apresentados quando os browsers não suportam frames.
69Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))<BODY>
<H1>File 1</H1>
<HR>
<H2 ALIGN="CENTER">Testar os Links</H2>
<UL>
<LI><A HREF="http://www.yahoo.com" TARGET="Display">
Yahoo na frame Display</A>
<LI><A HREF="http://www.hotbot.com" TARGET="new">
HotBot em nova janela</A>
<LI><A HREF="http://www.infoseek.com" TARGET="_self">
Infoseek neste frame</A>
<LI><A HREF="http://www.excite.com" TARGET="_top">
Excite sobre a janela</A>
</UL>
</BODY>
70Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))
71Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))
n Colocar <base target=_top> - Permite ocupar toda a janela
A evitar
72Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))<html><head><title>Quadros</title><base target="_top"></head><frameset rows="30%,*">
<frame name="cimo" src=”qcimo.html"scrolling="no" frameborder="1" noresize>
<frameset cols="50%,*"><frame name="indice" src="qindice.html"
frameborder="1"><frame name="docs" src="dali-ovo.gif">
</frameset></frameset><noframes>Opss... É necessário um navegador melhor !!!</noframes></html>
73Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))
<html>
<head>
<title>Cimo</title>
</head>
<h2><img src="mundo08.gif" align=middle> Documento com quadros</h2>
</html>
<html><head><title>Listas</title><base target="_top"></head><ul><li>Algumas imagens
<ul><li><a href="dali-ovo.gif" target="docs">Ovo</a>
<li><a href="dali-última ceia.jpg" target="docs">Ceia</a><li><a href="garrafa.gif"
target="docs">Garrafa</a></ul>
<li><a href="mundo16.gif" target="docs">Mundo</a><li><a href="Teste.html">Fim</a></ul></html>
qcimo.html qindice.html
74Março 2006Tito Carlos S. Vieira [email protected]
Exemplo com quadrosExemplo com quadros
75Março 2006Tito Carlos S. Vieira [email protected]
Quadros (Quadros (framesframes))n O elemento <IFRAME>, designado de Inline Frame, permite
embeber uma frame directamente num documento HTML.• Sintaxe:
- <IFRAME> </IFRAME>
• Atributos:- Name – Atribui um nome à frame.- Src – Localização do documento apresentado na frame.- Width – Largura da frame.- Height – Altura da frame.- Align – Permite especificar o alinhamento da frame.- Frameborder (1|0), Marginwidth, Marginheigth e Scrolling – Atributos iguais aos
do elemento <FRAME>.
n Exemplo:<IFRAME src="menucica.html" name="ola" id="ola" width="100"
height="400“ marginwidth="0" marginheight="0" align="left" scrolling="no" frameborder="0">texto visível quando não suporta frames</IFRAME>
76Março 2006Tito Carlos S. Vieira [email protected]
Problemas com quadrosProblemas com quadrosn Desenho
• Controlo da apresentação de elevadores
n Navegação• Comportamento do botão back; comportamento ao activar uma
ligação (ex: alteração simultânea de múltiplos quadros); perda de contexto (URL dos documentos pode não ser apercebido).
n Bookmarking• da janela? do quadro?
n Impressão• do quadro; e da janela?
n Referência: www.useit.com (Jakob Nielsen)
77Março 2006Tito Carlos S. Vieira [email protected]
Atributos nuclearesAtributos nuclearesn Atributos que podem aparecer em todas as marcas
• Interesse em particular para suportar estilos
n ID• <P ID=“PrimeiroParagrafo”>Este é o início</P>
- Cria identificador- Deve ser único no documento e deve começar com uma letra (A-Z, a-z)- Não deve ser igual ao valor dos atributos NAME que por ventura existam
• <A href=“#PrimeiroParagrafo”>Salta para o início</A>- Salta para lá- Substitui a função de âncora do A, o qual seria:
<A name=PrimeiroParagrafo>Este é o início</A>
• #PrimeiroParagrafo {color: gray}- Numa folha de estilos
n CLASS• Permite a subdivisão de marcas por categorias
• <P CLASS=“definicao”>Ave é um animal que...</P>
78Março 2006Tito Carlos S. Vieira [email protected]
Atributos nucleares (Atributos nucleares (contcont.).)n STYLE
• Contém informação sobre a forma de apresentação, separadamente da informação sobre a estrutura do documento
• <P STYLE=“font-size: 18pt”>Grande</P>
n TITLE• Associa texto informativo a uma marca, é visível quando se passa o cursor do
rato por cima (IE 4 ou superior).• <P TITLE=“Autor = TCSV”>Texto...</P>
n Marca <div></div>• deve ser utilizada quando se pretende limitar uma zona do documento e serve
para associar atributos.
n Marca <span></span>• Limita-se a marcar uma zona do documento e serve para associar atributos• <P>No zoo há uma <SPAN CLASS=definicao>ave</SPAN>.</P>
79Março 2006Tito Carlos S. Vieira [email protected]
Folhas de estiloFolhas de estilo
n As folhas de estilo (CSS – Cascading Style Sheets) permitem separar a estrutura de um documento da sua apresentação, sendo desta forma possível manipular a apresentação dos documentos através da criação de estilos próprios para os elementos HTML.
n A especificação é definida pelo W3C (http://www.w3.org/Style/CSS/)
n Forma de definir um estilo para um elemento HTML
n Elemento {estilo especifico}Ex:
H1 {color: red}
80Março 2006Tito Carlos S. Vieira [email protected]
Folhas de estiloFolhas de estilon Forma básica
• Elemento {prop1:valor1; prop2:valor2, valor3; …}
• H1 {font-style: italic}
n Aplicar a várias marcas• H1, H2, H3, H4, H5, H6 {font-style: italic}
n Listas• UL {list-style-image: url(ball.gif)}
• OL {list-style-type: upper-alpha}
• OL OL {list-style-type: upper-roman}
• OL OL OL {list-style-type: lower-alpha}- item numa lista de nível 3 identificado com letras minúsculas
n Aplicar em contexto• H1 EM, P STRONG {color: red}
81Março 2006Tito Carlos S. Vieira [email protected]
Folhas de estiloFolhas de estilon Como inserir um estilo num documento ?
• Usar um ficheiro externo ao documento HTML;- <link href=“estilos.css” type=“text/css”> (colocar no cabeçalho do documento)- Acessível a uma colecção inteira de documentos.- Ponto fraco: possível atraso no carregamento da página.
• Embeber um documento de estilos no cabeçalho de um documento HTML;- <style type=“text/css”></style> - É geral para todo o documento.- Ponto fraco: não é possível a reutilização noutros documentos.
• Aplicar o estilo directamente no código HTML onde é necessário (inlinestyle).
- Através do atributo style existente nas marcas HTML.- Activo dentro da marca.- Ponto fraco: reutilização ao nível do documento e do conjunto de
documentos; difícil actualização.
82Março 2006Tito Carlos S. Vieira [email protected]
Folhas de estiloFolhas de estilon Usar um ficheiro externo ao documento HTML
n Nota: podemos utilizar mais do que um ficheiro ao mesmo tempo.
webstyle.css
BODY {font: 10pt;font-family: Sans-Serif;color: black;background: white}
H1 {font: 24pt;font-family: Sans-serif;color: black}
P {text-indent: 0.5in;margin-left: 50px:margin-right: 50px}
m Ligação à folha de estilos<html><head>
<title>Exemplo CSS2</title><link href=“webstyle.css”type=“text/css”>
</head><body>
Conteúdo afectado pela folha de estilo.
</body></html>
83Março 2006Tito Carlos S. Vieira [email protected]
Folhas de estiloFolhas de estilon Embeber um documento de estilos no cabeçalho de um
documento HTML;
<html><head><title>Exemplo CSS2</title><style type=“text/css”><!--BODY {font: 10pt;
font-family: Sans-Serif;color: black;background: white}
H1 {font: 24pt;font-family: Sans-serif;color: black}
--></style></head><body>Conteúdo afectado pela folha de estilo.</body></html>
84Março 2006Tito Carlos S. Vieira [email protected]
Folhas de estiloFolhas de estilon Aplicar o estilo directamente no código HTML onde é
necessário (inline style).
n A marca <div></div> deve ser utilizada quando se pretende aplicar um estilo a um bloco de texto.
n A marca <span></span> deve ser utilizada para aplicar estilos apenas a algumas palavras.
<html><head><title>Exemplo CSS2</title></head><body><div style=“font-size:48pt font-family:Arial; color:green”>
Conteúdo afectado pela folha de estilo.</div><P>Mais <span style=“color: red”>texto afectado</span><H1 style=“font-weight: bold; background: yellow”> CSS2</H1></body></html>