Sistemas Computacionais e de Comunicaçãoci05015/disciplina de SCC/html...Sistemas Computacionais e de Comunicação Licenciatura em Ciência da Informação Tito Carlos S. Vieira

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]


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


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/


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.


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

------


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”.


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


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



Comunicação ClienteComunicação Cliente--ServidorServidor

URL Uniform Resource Locator

HTTP Hypertext Transfer Protocol

HTML Hypertext Markup Language


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


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


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


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)


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


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


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.


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)


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.


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>


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


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.


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>


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.


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.


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


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)


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”>


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.


Elemento <BODY>Elemento <BODY><BODY BACKGROUND="horiz.gif" BGCOLOR=“#FFFFFF” TEXT="#000000">

......

</BODY>


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>


CabeçalhosCabeçalhos


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">


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ó.


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).


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 são ignorados pelo navegador.<p><i>Introduzi um novo parágrafo.</i></p></body></html>


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>


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.


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.


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>


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>


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>


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>


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.


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.


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 © ©

® ®


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>


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.


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>


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


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>


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.


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>?


Tabela mais elaboradaTabela mais elaborada


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


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.


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>


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


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


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.


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>


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


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>


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


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


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>


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”>


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.


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>


Quadros (Quadros (framesframes))



n Colocar <base target=_top> - Permite ocupar toda a janela

A evitar


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>



<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


Exemplo com quadrosExemplo com quadros


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>


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)


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>


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>


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}


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}


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.


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>


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”></style></head><body>Conteúdo afectado pela folha de estilo.</body></html>


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>

Documents

Sistemas Computacionais e de Comunicaçãoci05015/disciplina de SCC/html...Sistemas Computacionais e de Comunicação Licenciatura em Ciência da Informação Tito Carlos S. Vieira