GOII 2002 - 1

Sumário

World-Wide-Web A linguagem HTML

Conceitos básicos Posicionamento Folhas de estilo Formulários

GOII 2002 - 2

Perguntas (respostas às 12H10)

Apresentação oral correspondente a uma página A4 (5 min) Qual o papel e funcionamento do W3C? Compare os navegadores IE e Opera. HTML: forma ou conteúdo?

GOII 2002 - 3

Serviços de navegação

São serviços que permitem varrer ou vasculhar documentos armazenados de forma distribuída obter texto, som e imagem de uma multiplicidade de fontes mostrar automaticamente a informação recuperada guardar uma cópia no disco local imprimir uma cópia em papel seguir referências para documentos relacionados, dispensando

o conhecimento exacto do nome do ficheiro e até da máquina as referências podem mudar de servidor diferentes dos serviços de recuperação (ftp) que se

limitam a transferir informação sem a mostrar

GOII 2002 - 4

Hipertexto

Misturar as referências (realçadas) com o texto têm a vantagem de lhes dar contexto e de facilitar uma sequência natural de consulta

estrutura não-linear 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

------

GOII 2002 - 5

World Wide Web Origem: vários grupos de físicos pretendiam gerir a

informação relativa à investigação que desenvolviam problema: manutenção de documentação sobre as experiências e acesso

à informação Requisitos

Acesso remoto• a partir da Internet

Acesso heterogéneo• plataformas diversas

Não centralizado• possibilitando a integação de sistemas existentes

Anotações privadas• ligações e anotações pessoais a informação pública

Possível ligação a aplicações externas solução: sistema de hipertexto distribuído: teia (web) de

documentos com ligações entre eles

GOII 2002 - 6

World Wide Web Objectivo fundamental

partilha da informação • questões de segurança não eram prioritárias

Em 1991, no CERN (Conseil Européen pour la Recherche Nucléaire)

Tim Berners-Lee desenvolveu a linguagem HTML Em 1993, no NCSA implementou-se o browser Mosaic

Marc Andreessen e Eric Bina Lynx (interface alfanumérico)

Em 1994, ficou disponível a primeira versão do Netscape Serviço mais importante: em 1995 o tráfego WWW ultrapassou

o de FTP Responsável pela actual expansão da Internet Em sentido estrito, WWW refere-se ao serviço de navegação

que usa o protocolo HTTP

GOII 2002 - 7

Comunicação Cliente-Servidor

URL Uniform Resource Locator

HTTP Hypertext Transfer Protocol

HTML Hypertext Markup Language

GOII 2002 - 8

Navegadores Quem controla as normas da Web é o W3C - World Wide

Web Consortium O W3C foi formalizado em Dezembro de 1994

Os navegadores mais comuns são o Netscape Navigator e Microsoft Internet Explorer

Aprofundar: Opera para além de funcionarem como clientes WWW, também incluem

clientes para os outros serviços (ftp, telnet, mail) transferem ficheiros ASCII ou HTML que mostram e ficheiros binários

que também mostram se a aplicação ajudante (helper) ou um software adicional (plug-in ou applet) estiverem definidos, caso contrário armazenam-nos em disco

interface universal, incluindo bases de dados http://www.statmarket.com http://www.browsers.com

GOII 2002 - 9

URL

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

se omisso, usa-se o http computador é a máquina onde corre o servidor ficheiro é o nome completo do ficheiro pretendido; se omisso,

usa-se habitualmente index.html ou welcome.html para facilitar a organização das áreas de trabalho

http://tom.fe.up.pt/~ei96023/casa.html corresponde de facto ao ficheiro ~ei96023/public_html/casa.html

os directórios ~ei96023 e public_html têm que ter permissão x para todos e o ficheiro casa.html tem que ter permissão r

GOII 2002 - 10

HTML HyperText Markup Language

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

é um caso particular da linguagem SGML (Standard General Markup Language) utilizada em processamento de texto

HTML é definida por um DTD (Document Type Definition) SGML http://www.w3c.org

A concorrência entre navegadores origina o aparecimento de extensões à norma podem amarrar a um navegador e dificultar o acesso através de

outros navegadores por vezes, as mais usadas acabam por ser incorporadas na versão

seguinte da norma

GOII 2002 - 11

HTML não é Não é uma ferramenta de processamento de texto é 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 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ão existe 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

GOII 2002 - 12

Ferramentas de desenvolvimento

Necessários um editor e um navegador Métodos de construção de páginas Web

primeiro escrever o texto e depois marcá-lo• 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 (Adobe PageMill)

GOII 2002 - 13

Primeiro documento

<html><head><title>Documento inicial</title></head><h2>Exemplo</h2><body>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 paragrafo.</i></body></html>

GOII 2002 - 14

Estrutura de um documento

Documento HTML = texto + marcas armazenado e transmitido como ficheiro de texto ASCII

partes : cabeçalho (título) + corpo<html><head><title>Titulo</title></head><body>Conteúdo anotado.</body></html>

GOII 2002 - 15

Marcas As anotações HTML são constituídas por marcas

<nome param1 param2=24 param3=“Valor entre aspas”> texto </nome> indiferentes a maiúsculas maior parte delimita uma região com um início e um fim

• há marcas sem fim (ex: <br>)• nas marcas encaixadas convém manter o escopo hierárquico

<html><head><title>Exemplo</title></head><body><i>Fica bold <b>a meio.</i>Deixa de estar</b> bold aqui.</body></html>

GOII 2002 - 16

Função das marcas

as marcas aconselham o navegador a mostrar o conteúdo segundo uma dada forma, mas não são imperativas não se trata de definir disposição de página mas de transmitir

conteúdos redimensionar a janela muda o aspecto mas ver CSS

os navegadores ignoram marcas desconhecidas e tentam ultrapassar erros respeitar a sintaxe para facilitar o trabalho de analisadores de

texto embora não exigida, é boa prática incluir a marca <html>

GOII 2002 - 17

Caracteres especiais

Só parte dos 256 caracteres ISO 8859-1 são representáveis e ainda menos são normalizados

entidade carácter com nome &nome;&lt; < &aacute; á&gt; > &ecirc; ê&amp; & &igrave; ì&ordm; º &otilde; õ&times; × &Uuml; Ü

entidade carácter numérica &#nnn;&#65; A &#149 •

GOII 2002 - 18

Comentários

tudo entre as marcas <!-- eis o comentário --> não visualizado mas passa no View Source não está normalizado o encaixe de comentários

(Netscape aceita) certos navegadores usam os comentários para

incluir comandos específicos para o seu servidor que outros navegadores não entenderiam CSS inclusão de ficheiros do lado do servidor geração dinâmica de conteúdo

GOII 2002 - 19

Cabeçalho <head> Descreve propriedades do documento, em marcas

inclusas específicas <title> - título do documento; topo da janela; nome de bookmark

• única “exigida” no cabeçalho• importante que descreva o conteúdo e eventualmente dê o contexto, pois

pode-se chegar lá directamente e os indexadores muitas vezes só olham para o título

<meta> - informação extra; pares nome/conteúdo (não normalizada)• <meta name=“keywords” content=“engineering, computer science”>• <meta http-equiv=“charset” content=“iso-8859-1”> faz com que o

servidor envie no cabeçalho do documento MIME que vai para o navegador

content/type: text/html (sempre)charset: iso-8859-1

• automatização: motores de pesquisa, navegadores

GOII 2002 - 20

Divisões e parágrafos Um texto pode estar estruturado em divisões

resumo, capítulos, secções, anexos, bibliografia, etc. marca <div> … </div> permite individualizar essas unidades e tratá-las

sistematicamente; por exemplo extrair automaticamente os resumos de todos os documentos

atributo align= left (omissão), center ou right, posiciona o texto atributo class= nome permite definir um estilo para a classe nome e usá-

lo sistematicamente as marcas <div> podem estar encaixadas, para subdivisões, prevalecendo

a mais interior o texto organiza-se em parágrafos

<p> - muda de linha e adiciona espaço <p align=center class=citacao> … </p> <br> limita-se a introduzir uma mudança de linha </p> é muitas vezes omitido; <p> omitido no primeiro parágrafo

GOII 2002 - 21

Texto estruturado<div align=right class=introducao>Introdução: O trabalho presente visa demonstrar anecessidade de os agricultores se actualizarem.</div><hr><div class=capitulo>Início do capítulo.<div class=resumocap align=center>Resumo: este é o primeiro capítulo <br>e trata da actualização tecnológica.</div>A utilização de … dimensão.<p align=right>Encostado à direita.<br>Este é um parágrafo fechado.</p>Encostado à esquerda por omissão.<p align=center> Novo parágrafo.</div>

GOII 2002 - 22

Títulos de divisões

Separação visual de partes do texto feita com títulos, linhas, espaçamentos, …

seis níveis de títulos <h1>, <h2>, …, <h6> <h4> tem o tamanho da fonte normal; escolher para a menor

subdivisão <h5> e <h6> muito pequenos; só para elementos extra existem os atributos align e class manter a consistência na escolha dos níveis repetir o conteúdo da marca <title> como primeiro título marcam conteúdo; podem ser mostrados de várias maneiras;

não devem ser usados só para mudar fontes; fim existe sempre podem incluir texto, imagens, âncoras e mudanças de linha não devem incluir parágrafos, listas e outros blocos

GOII 2002 - 23

Aparência do texto

Estilos baseados no conteúdo são marcas que anotam a função especial do elemento e devem

ser mostradas com aparência diferente do texto normal actualmente são pouco diferenciadas (convertidas para itálico

ou negrito) sensíveis ao atributo class e têm sempre fim exemplos mais usados

• <cite> - citação bibliográfica; incluir ligação, se existir; itálico• <code> - código para computador; monoespaçado• <dfn> - definição; útil para produzir índices;• <em> - enfatizar; itálico• <strong> - forte; negrito

GOII 2002 - 24

Aparência do texto

Estilos físicos são marcas que indicam directamente o aspecto pretendido,

mas não transportam significado redefiníveis na classe exemplos

• <b>, <i>, <s>, <u> - negrito, itálico, traçado, sublinhado• <big>, <small> - tamanho relativo; fonte seguinte; encaixável• <blink> - pisca; realça e aborrece• <sub>, <sup> - índice, expoente• <tt> - monoespaçado

GOII 2002 - 25

Exemplo de fontes

GOII 2002 - 26

Código do exemplo<h2 align=center>Fontes</h2><h3>Modelo</h3><div>O HTML usa um esquema de<dfn>fontes virtuais</dfn>com<em>7 tamanhos</em>.O tamanho por omissão é o <strong>3</strong>.A relação entre tamanhos adjacentes é de 20%. A especificação de tamanhos pode ser absoluta (1..7) ou relativa (<code>size=+1</code>).</div><h3>Uso</h3><div>Realçar uma expressão com<big>a marca<big>&lt;big&gt;</big>produz</big>

uma variação relativa encaixada.<br>Diminuir tamanho do texto normal com<basefont size=-1>&lt;basefont size=-1&gt; passa para 2.Aqui,<big>&lt;big&gt; fica com 3,</big>pois a variação é relativa.<br>Realçar texto com<font size=7>&lt;font size=7&gt;</font> indica tamanho absoluto.Este é o <small>mínimo e não adianta tentar <small>reduzir</small> mais</small>.<basefont size=+1>Os expoentes <b>x</b>² e índices <b>x</b>_{<small>2</small>} não mudam de tamanho automaticamente.</div>

GOII 2002 - 27

Fontes

Tamanho de uma fonte marca <basefont> (muitas vezes sem fim)

• <basefont size=+2><basefont size=+1> aumenta o tamanho 3 níveis marca <font> (sempre com fim)

• <font size=+2><font size=+1> ... </font></font> só aumenta 1 nível, porque é sempre relativo à fonte base

<big> e <small> são encaixáveis Escolha de fonte

<font face= "Times New Roman, ZapfDingbats, Courier New">• a fonte escolhida é a primeira que exista no sistema do navegador

Côr <font color=yellow>Sol</font> ou <font color=#FFFF00>Sol</font> #FFFF00 significa vermelho e verde no máximo (FF), sem azul (RGB)

GOII 2002 - 28

Côr

Nomes normalizadosaqua (#00FFFF) gray (#808080) navy (#000080) silver (#C0C0C0)black (#000000) green (#008000) olive (#808000) teal (#008080)blue (#0000FF) lime (#00FF00) purple (#800080) yellow (#FFFF00)fuchsia (#FF00FF) maroon (#800000) red (#FF0000) white (#FFFFFF)

Mapa de cores normalizado cada côr primária (vermelho, verde e azul) só pode tomar 6 valores de

brilho (00, 33, 66, 99, CC, FF) o mapa contém apenas 216 cores (6x6x6), mas que não precisam de ser

convertidas: convém usar só estas, para garantir consistência em navegadores diferentes

GOII 2002 - 29

Controlo de quebras <br clear=left>

muda de linha, mas só recomeça abaixo de qualquer imagem ou tabela que esteja encostada à esquerda

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

respeita os espaçamentos e quebras do texto preformatado útil para quadros e código; monoespaçado interpreta marcas que não impliquem quebras (fontes, ligações)

<center> ... </center> principal uso: centrar imagens e tabelas outros usos: usar atributo align=center noutras marcas

GOII 2002 - 30

Exemplo de quebras<h4 align=center>Quebras</h4><p>Este texto aparece antes da imagem, a qual vai

ser alinhada à esquerda.<br><img src="Gtd.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 width=30>Este bocado de texto temmuitos espaços

e mudanças de linha.</pre>

GOII 2002 - 31

RéguasUma régua (<b>&lt;hr&gt;</b>) temo efeito de uma quebra,não tem espaço antes nem depois,e funciona como um separador.<hr>Para retirar o efeito 3D, usa-se<b>noshade</b>.<hr noshade>Parâmetros interessantes:<br><b>size</b> -- espessura<br><b>width</b> -- largura em pixel ouem % da janela<br><b>align</b> -- alinhamento<hr align=right size=5 width=33%>Recomenda-se o uso da percentagem paratornar o aspecto relativo ao tamanho da janela.<hr align=center size=7 width=33%>Pode-se mudar a côr.<hr align=left size=9 width=33% noshade>

GOII 2002 - 32

Formatos de imagem GIF - graphical interchange format

256 cores comprime sem perda de informação ícones e desenhos visualização de imagem aproximada em 1/4 do tempo

• entrelaçamento de 4 em 4 linhas transparência

• pixels da côr do fundo são ignorados pelo navegador animação

• ficheiro GIF pode conter várias imagens mostradas em sequência JPEG - joint photographic experts group

milhares de cores maior compressão, com perdas fotografias

GOII 2002 - 33

Regras de uso Usar imagens que tenham conteúdo e não apenas

para “colorir” a página simplificar as imagens

reduzir tamanho, evitar dithering usando cores normalizadas reutilizar imagens

ícones podem ficar na cache dividir documentos grandes

manter cada documento abaixo dos 50KByte colocar índices com ligações para os documentos relacionados

isolar imagens grandes colocar uma versão reduzida no documento principal

especificar as dimensões

GOII 2002 - 34

Marca <img> Atributos

src - URL absoluto ou relativo da localização do ficheiro gráfico lowsrc - URL de uma imagem de carregamento mais rápido alt - texto a mostrar caso a imagem não o seja align - posiciona o texto relativamente à sua linha

• top, middle, bottom - acerta a linha com o topo da imagem, o meio ou o fundo (varia do Netscape para o IE)

• left, right - encosta a imagem e põe o texto a envolvê-la centrar - usa-se a marca <center> ou o atributo de <p> 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 hspace, vspace - número de pixels extra na horizontal e vertical

GOII 2002 - 35

Exemplos de imagens

<p align=center>Eis o <img src="Gtd.gif"> dono do carro.</p><img src="carro.jpg" align=left alt="Carro da esquerda" border=0 width="25%"><img src="carro.jpg" align=right alt="Carro da direita" border=5 width="25%"height=80 hspace=10 vspace=10>Especificar a largura ... a imagem.

GOII 2002 - 36

Mapas

<h4 align=center>Mapa</h4><p align=center><img src="mundo16.gif" width="35%” usemap="#mundo16"></p><map name="mundo16"><area coords="30,70,70,140" href="AmericaLatina.html"><area coords="90,30,150,130" href="Africa.html"></map>

GOII 2002 - 37

Mapa sensitivo

O atributo usemap faz com que uma imagem fique sensível à passagem do rato

definindo na marca <map> correspondente as coordenadas de certas áreas e respectivas ligações, pode usar-se a imagem como índice gráfico

este processamento é da responsabilidade do cliente

70,140

30,70

150,130

90,300,0

GOII 2002 - 38

A marca <body>

Cores fundo: bgcolor texto: text ligação: link ligação visitada: vlink ligação activa: alink Nota: mudar as cores pode confundir o leitor

Fundo no atributo background indicar um URL de uma imagem

pequena que é replicada automaticamente até preencher todo o fundo

GOII 2002 - 39

Atributos do corpo

<body bgcolor="yellow" text="red" background="mundo08.gif">Um mau exemplo de valores para os atributos do corpo, pois obscurece a leitura.

GOII 2002 - 40

Desenho do documento

Três marcas para controlar posicionamento geral definidas no navegador da Netscape

Espaçamento vertical, horizontal, rectangular <spacer>

Colunas <multicol>

Camadas (Netscape v4.0) localização precisa de páginas independentes sobrepostas <layer> - página completa <ilayer> - camada dentro da linha, relativa acrescenta nova dimensão ao HTML

GOII 2002 - 41

Abertura de espaçosPrimeiro, um exemplo de definição de um bloco de espaço.<p align=center>Norte<br>Oeste<spacer type=block width=50 heigth=50 align=absmiddle>Leste.<br>Sul</p>Agora, espaço vertical.<hr noshade><spacer type=vertical size=50><hr noshade>E termina com<spacer type=horizontal size=50>espaço horizontal.

GOII 2002 - 42

Colunas<h2 align=center>Texto em colunas</h2><multicol cols=3 gutter=15 width=90%><p>A marca &lt;multicol&gt; tem os atributos <i>gutter</i>- espaço entre colunas e <i>width</i>- dimensão total absoluta ou relativa à janela.<\p><p>O efeito de várias colunas pode ser simulado com recurso a tabelas.</p></multicol><hr align=left size=12 width=90% noshade>

GOII 2002 - 43

Camadas

Uma camada é um documento HTML <layer> … </layer> atributo src vai buscar conteúdo a URL sem <head> ou <body> sem posicionamento, é incluída no fluxo normal posicionamento (top, left) relativo ao canto superior esquerdo do

documento ou da camada que contenha uma camada inclusa as camadas são transparentes, a menos que se defina bgcolor ou

background atributo name se for necessário referir a camada camadas sucessivas, ao mesmo nível, são postas por cima das

anteriores; above, below, z-index controlam sobreposição pode-se controlar a visibilidade com JavaScript (camadas inclusas

herdam as propriedades da que as contém) <ilayer> - camada dentro da linha, cujo posicionamento é relativo ao

ponto do fluxo em que é definida

GOII 2002 - 44

Exemplo de camadas

<layer name=titulo2> <h2 align=center>Efeito de sombra</h2></layer><ilayer top=2 left=2 above=titulo2> <h2 align=center> <font color="gray"> Efeito de sombra </font></h2></ilayer><ilayer> <layer left=180, top=25> <img src="Gtd.gif" width=30> </layer> <img src="carro.jpg" width=300></ilayer><br>Uma camada &lt;layer&gt; não ocupa … para o seu sítio.

GOII 2002 - 45

Tipos de endereços Usa-se um URL para identificar um recurso

FTP- ftp://utilizador:senha@servidor:porta/caminho;type=tipo• tipo: i - binário, a - ascii, d- directório

notícias- nntp://servidor:porta/grupo/artigo correio- mailto:utilizador@servidor terminal remoto- telnet://utilizador:senha@servidor:porta gopher- gopher://servidor:porta/caminho ficheiro- file://servidor/caminho

• local: file:///C|/caminho ou file://localhost/caminho código- javascript:instruções Web- http://servidor:porta/caminho#fragmento

http://servidor:porta/caminho?pesquisa• usar apenas caracteres 0-9, A-Z, a-z, $-_.+!*’(),• codificar os outros em hexadecimal (US-ASCII)• exemplos: / - %2F, ? - %3F, (espaço) - %20, “ %22

GOII 2002 - 46

Âncoras e ligações

Uma âncora identifica um ponto do documento <h3><a name="capitulo2">Revisão bibliográfica</a></h3>

Uma ligação permite indicar ao navegador qual o documento a mostrar a seguir... após o que se apresenta uma <a href="http://alf.fe.up.pt/relatorios/rel29.html#capitulo2">revisão bibliográfica</a> sobre ... Neste formato indica-se, para além do documento, qual o

fragmento que se pretende visualizar O corpo da marca é a parte visível da ligação;

apresenta-se realçada; deve ser suficientemente explicativa para se compreender o conteúdo desse documento, mesmo sem se ler o contexto

GOII 2002 - 47

Atributos da marca <a> onClick, onMouseOver, onMouseOut

valor é sequência de instruções JavaScript... caiu do <a href=fotografia1.jpegonMouseOver= "window.inbox='Barco rabelo no Douro';return true"onMouseOut= "window.inbox=' ';return true"title="Barco rabelo">barco</a> e nadou ... mostra e apaga na barra de estado o conteúdo do link

atributo title pode ser usado pelo navegador para dar um título à janela que só mostra uma fotografia

atributos rel e rev definem significado das relações directa e inversa entre origem e destino da ligação meta-informação, apoio à automatização exemplos: next, prev, head, toc, parent, child, index,

glossary ...

GOII 2002 - 48

Endereços relativos Omitir partes de endereço completar com

as partes correspondentes do documento actual a parte de endereço contida na marca <base>

Exemplos: <!-- servidor: tom.fe.up.pt doc: /relatorios/rel29/capa.html --> <a href=#morada>

• refere-se ao fragmento com âncora morada no doc capa.html <a href=imagens/minhafoto.html>

• http://tom.fe.up.pt/relatorios/rel29/imagens/minhafoto.html• permite mover o relatório 29 para outro directório ou servidor sem

quebrar as ligações se tiver <head> <base href="/relatorios/capas"></head>

• <base> só se define no cabeçalho e altera os endereços relativos <a href= logotipo.html>

• http://tom.fe.up.pt/relatorios/capas/logotipo.html• abrindo um doc com file, todos os URL relativos ficam file

GOII 2002 - 49

Estilos de ligações Listas de ligações listas de descrições de itens contendo ligações ligações dispersas auto-descritivas evitar chamadas do tipo CARREGUE AQUI! usar imagens pode ser pouco descritivo

acrescentar mensagem explicativa na barra de estado imagens sensíveis

ismap - processamento do lado do servidor pelo programa indicado em href implica ter a imagem no corpo de <a>

usemap - processamento no cliente <area shape= circle coords="20,30,10" href=liga1.html>

• circle, polygon, rectangle; href e nohref

GOII 2002 - 50

Listas Tipos de listas

listas não ordenadas (<ul>)• atributo type controla o aspecto do símbolo (disc, circle, square)

listas ordenadas (<ol>)• atributos start e value para controlar a numeração• atributo type controla o aspecto do símbolo (1, A, a, I, i)

menus (<menu>) e directórios (<dir>)• habitualmente tratados como listas não ordenadas de itens curtos

definições (<dl>) item de uma lista

<li> <dt> … <dd> … (nas listas de definições)

as listas podem ser compactadas (compact) encaixadas start=n indica o número inicial; value=n altera o valor corrente

GOII 2002 - 51

Exemplo 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 chamaa um objecto na falta de melhor.<dt>Objecto <dd>O que se chamaa uma coisa quando não ocorre outra.</dl>

GOII 2002 - 52

Tabelas

<table> - delimita a definição da tabela <tr> - informação organizada por linhas <th> - cabeçalho de coluna ou de linha <td> - conteúdo de uma célula Limitações

não alinha conteúdos de células diferentes o controlo da espessura dos caixilhos é limitado não há a noção de cabeçalho de repetição

GOII 2002 - 53

Tabela simples<table><tr>

<th>Exame</th><th>Nota</th><th>Final</th>

</tr><tr>

<td>Ana</td><td>10</td> <td>11</td>

</tr><tr>

<td>Zé</td><td>12</td> <td>15</td>

</tr><tr>

<th>Média</th><td>11</td> <td>13</td>

</tr></table>

GOII 2002 - 54

Tabela mais elaborada

Como construir? Quantos elementos são definidos na 2ª linha? É possível incluir uma outra tabela num <td>?

GOII 2002 - 55

Código da tabela

<table align="center"bgcolor="#FFFF00" border cellspacing="2" cellpadding="5"width="50%"><caption align="bottom"><small>Tabela 1. Estatísticas.</small></caption><tr> <td rowspan="2" colspan="2"></td> <th colspan="3" align="center">

Demografia</th></tr><tr> <th>Homens</th> <th>Meninas</th> <th>Prof</th></tr>

<tr align="center"> <th rowspan="2">Turmas</th> <th>A</th> <td>20</td> <td>5</td> <td><img src="Gtd.gif"></td></tr><tr align="center"> <th>B</th> <td>21</td> <td>3</td> <td>idem</td></tr><tr align="center"> <th colspan="2">Total</th> <td>41</td> <td>8</td> <td>49</td></tr></table>

GOII 2002 - 56

Atributos das tabelas

<caption> ... </caption> define a legenda align= top ou bottom

align (center, left, right) em <table> controla a tabela; left e right dá texto a contornar em <tr>, <th>, <td> controla as células individuais

bgcolor - côr do fundo border - caixilho; cellspacing espaço intercelular;

cellpadding espaço intracelular width - largura, absoluta ou relativa

pode-se indicar a percentagem que cada coluna gasta do total heigth - altura colspan, rowspan - estende influência da célula

GOII 2002 - 57

Tabelas em HTML 4.0 <table>; <caption>; <tr>; <th>; <td> HTML 4.0:

<col>; <colgroup>; <thead>; <tfoot>; <tbody> as linhas e colunas podem ser agrupadas permitindo um maior

controlo da apresentação da tabela no ecrã Estrutura

<table><caption>…</caption><colgroup>…</colgroup><thead>…</thead><tbody>…</tbody><tfoot>…</tfoot> </table>

GOII 2002 - 58

Exemplo de tabela em HTML 4.0<TABLE BORDER="1" FRAME="BOX"

RULES="GROUPS"><CAPTION>Exemplo</CAPTION><COLGROUP><COL></COLGROUP><COLGROUP>

<COL ALIGN="CENTER"><COL ALIGN="CHAR" CHAR="$">

</COLGROUP><THEAD><TR>

<TH BGCOLOR="YELLOW">Fruta</TH><TH BGCOLOR="YELLOW">Cor</TH><TH BGCOLOR="YELLOW">Custo por quilo</TH>

</TR></THEAD>

<TBODY><TR>

<TD>Uvas<TD>Branco<TD>200$00</TR><TR>

<TD>Cerejas<TD>Vermelho<TD>350$00</TR><TR>

<TD>Kiwi<TD>Castanho<TD>400$00</TD></TR></TBODY><TFOOT><TR>

<TH COLSPAN=3>Exemplo de uma tabela</TH>

</TR></TFOOT></TABLE>

GOII 2002 - 59

Quadros Documento com a marca <frameset> divide a janela

em quadros, proporcionais ou absolutos podem encaixar-se outros conjuntos de quadros não existe a marca <body> * nas dimensões vale por resto (noresize para impedir distorção) framespacing e border definem espaçamento e moldura

marca <frame> só aparece num <frameset> define com <src> qual o documento a ser mostrado nesse quadro os quadros são preenchidos coluna a coluna e depois linha a linha quadro sem <src> fica vazio conflitos: o título da janela é o do último quadro noresize impede de modificar as dimensões scrolling=no impede o aparecimento de barras de deslocamento

GOII 2002 - 60

Controlo de quadros o atributo name num quadro ou janela permite a outro

quadro ou janela alterá-lo, incluindo esse nome no atributo target de uma ligação

se o quadro ou janela não existir, é criado alvos especiais

_blank : nova janela _self : o próprio quadro ou janela origem (valor por omissão) _parent : o conjunto de quadros ou a janela que contém o quadro

origem (igual a _self se a origem já for a janela) _top : substitui todo o conteúdo da janela que contém a origem

pode-se especificar um alvo comum na <base> <base target="docs"> <base target=_top> garante que todas as ligações para docs fora do sítio

ocupam toda a janela, em vez de aparecerem num quadro (indicar o quadro em cada referência local)

GOII 2002 - 61

Conjunto de quadros

<html><head><title>Quadros</title><base target="_top"></head><frameset rows="30%,*"> <frame name="cimo" src="e16cimo.html"

scrolling="no" frameborder="1" noresize> <frameset cols="50%,*"> <frame name="indice" src="e17indice.html"

frameborder="1"> <frame name="docs" src="dali-ovo.gif"> </frameset></frameset><noframes>Azar. Precisa de um navegador melhor!</noframes></html>

GOII 2002 - 62

Quadros

<html><head><title>Cimo</title></head><body><h2><img src="mundo08.gif"

align=middle> Documento com quadros</h2>

</body></html>

<html><head><title>Listas</title><base target="_top"></head><body><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="e00Teste.html">Fim</a></ul></body></html>

e16cimo.html e17indice.html

GOII 2002 - 63

Exemplo com quadros

GOII 2002 - 64

A evitar

Colocar <base target=_top>

GOII 2002 - 65

Atributos nucleares

Atributos que podem aparecer em todas as marcas Interesse em particular para suportar estilos

ID <P ID=“PrimeiroParagrafo”>Este é o início</P>

• Cria identificador <A href=“#PrimeiroParagrafo”>Salta para o início</A>

• Salta para lá• Substitui a função de âncora do A

#PrimeiroParagrafo {color: gray}• Numa folha de estilos

CLASS Permite a subdivisão de marcas por categorias <P CLASS=“definicao”>Ave é um animal que...</P>

GOII 2002 - 66

Atributos nucleares (cont.)

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>

TITLE Associa texto informativo a uma marca <P TITLE=“Autor = GTD”>Texto...</P>

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

GOII 2002 - 67

Folhas de estilo Forma está a tornar-se importante, a par do conteúdo Sistematizar o design de uma colecção de

documentos implica definições de estilo CSS - Cascading Style Sheets

âmbito das definições folha de estilo

• acessível a uma colecção inteira de documentos marca <style> no cabeçalho de um doc

• geral para todo o documento atributo style em marcas específicas

• activo dentro da marca mais específico prevalece (daí o cascading)

em caso de empate, o mais recente

GOII 2002 - 68

Acesso às definições Marca <link>

serve como meta-informação para documentar as ligações entre documentos: atributos href, rev, rel

usada para ligar folhas de estilo, com rel=stylesheet pode existir mais do que uma (Netscape)

Estilo ao nível do documento marca <style> para não perturbar navegadores sem estilos, as definições de

estilo são metidas dentro de comentários HTML convém documentar as definições, com comentários /* */

importar CSS previsto na norma CSS @import url(folha.css), mas não

funciona nos navegadores actuais

GOII 2002 - 69

Uso de estilos<html><head><title>Estilos</title><link rel=stylesheet href="estilogeral.css" type="text/css"><link rel=stylesheet href="estilotitulos.css" type="text/css"><style> <!-- /* pinta de vermelho */ H1 {color: red} --></style></head><body><h1 align=center>Título definido com CSS</h1><p align=center>Eis o<a href="e19Frames.html">dono</a>do carro.</p><h1 style="color:yellow; font-style:normal">Título definido localmente</h1><p>Parágrafo à esquerda.</p></body></html>

/* estilogeral.css */H1 {color: blue; font-style: normal}

/* estilotitulos.css */H1 {color: green; font-style: italic}

GOII 2002 - 70

Resultado

GOII 2002 - 71

Elementos de sintaxe Forma básica

marca {prop1:valor1; prop2:valor2 valor3; …} H1 {font-style : italic}

aplicar a várias marcas H1, H2, H3, H4, H5, H6 {font-style : italic}

aplicar só em contexto OL LI {list-style: upper-alpha} OL OL LI {list-style: upper-roman} OL OL OL LI {list-style: lower-alpha}

• item numa lista de nível 3 identificado com letras minúsculas H1 EM, P STRONG {color: red} P UL STRONG {color: blue}

• caso vários contextos sejam aplicáveis, usar o mais específico

GOII 2002 - 72

Classes Uma classe define um conjunto de propriedades para

uma marca permite vários estilos para a mesma marcaP.resumo {font-style: italic; left-margin: 0.5cm; right-margin: 0.5cm}P.equacao {font-family: Symbol; text-align: center} usam-se definindo o atributo class na marca<p class=resumo>Este texto destina-se…</p>

classes genéricas aplicam-se a várias marcas.corrigido {color: red} <em class=corrigido>nabissa</em>

as classes herdam as propriedades da marca base não há herança entre classes especificar bastante a marca, e definir classes que só alteram o

específico

GOII 2002 - 73

Uso de classes<html><head><title>Estilos</title><link rel=stylesheet href="estilogeral.css" type="text/css"></head><body><h1>Associações</h1><p class=resumo>Eis o<a href="e19Frames.html">dono</a>do carro. Ele pertence a várias associações profissionais sem que noentanto tire daí grandes benefícios.</p><p class=equacao>x + a/2 = 0</p>Há que repensar as respectivas funções e métodos de trabalho paraver se se consegue reverter a situação.<p class=corrigido>As associações desportivas são normalmente maisparticipadas e os sócios empenham-se mais nas suas actividades.</p></body></html>

GOII 2002 - 74

Resultado

EstiloH1 {color: blue; font-style: normal}P {font-weight:bold}P.resumo {font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm}P.equacao {font-family: Symbol; text-align: center}.corrigido {color: red}

GOII 2002 - 75

Propriedades nos estilos

Grupos de propriedades definíveis fontes, cores e fundos, texto, caixas e disposição, listas, marcas

Norma http://www.w3.org/TR/REC-CSS1

Referências HTML The Complete Reference, Thomas A. Powell (Osborne)

• http://www.htmlref.com Tutorial (CERN)

• http://alf.fe.up.pt/~lmr/mgi/css/ Tutorial (John Allsopp of Western Civilisation)

• http://www.westciv.com/style_master/academy/css_tutorial/

GOII 2002 - 76

Modelo de formatação

beira exterior esquerda

beira interior direita

beira interior

esquerda

margem esquerda

margem direita

enchimento à direita

topo interno

beira exterior direita

enchimento inferior

enchimento superior

margem inferiorfundo

conteúdofundo

interno

caixilho inferior

margem superiortopo

caixilho esquerdo

enchimento à esquerda

caixilho direito

caixilho superior