Tipos de endereços

Usa-se um URL para identificar um recurso

FTP- ftp://utilizador:[email protected]:porta/caminho;type=tipo
• tipo: i - binário, a - ascii, d- directório





notícias- nntp://servidor:porta/grupo/artigo
correio- mailto:[email protected]
terminal remoto- telnet://utilizador:[email protected]: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
Internet - 1
Â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
Internet - 2
Atributos da marca <a>

onClick, onMouseOver, onMouseOut

valor é sequência de instruções JavaScript
... caiu do <a href=fotografia1.jpeg
onMouseOver= "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 ...
Internet - 3
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
Internet - 4
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
Internet - 5
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


item de uma lista



definições (<dl>)
<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
Internet - 6
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 chama
a um objecto na falta de melhor.
<dt>Objecto <dd>O que se chama
a uma coisa quando não ocorre outra.
</dl>
Internet - 7
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
Internet - 8
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>
Internet - 9
Tabela mais elaborada



Como construir?
Quantos elementos são definidos na 2ª linha?
É possível incluir uma outra tabela num <td>?
Internet - 10
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>
Internet - 11
Atributos das tabelas

<caption> ... </caption> define a legenda


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


align= top ou bottom
pode-se indicar a percentagem que cada coluna gasta do total
heigth - altura
colspan, rowspan - estende influência da célula
Internet - 12
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
Internet - 13
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)
Internet - 14
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>
Internet - 15
Quadros
e16cimo.html
<html>
<head>
<title>Cimo</title>
</head>
<h2><img src="mundo08.gif"
align=middle> Documento
com quadros</h2>
</html>
<html>
e17indice.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="e00Teste.html">Fim</a>
</ul>
</html>
Internet - 16
Exemplo com quadros
Internet - 17
A evitar

Colocar <base target=_top>
Internet - 18
Download

HTML 3