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
Â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
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 ...
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
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
Listas Tipos de listas item de uma lista as listas podem ser 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
Exemplo de listas <ol type=A> <li>Vertebrados <li>Mamíferos <ul> <li> Primatas. <li type="disc"> Cetáceos. </ul> <li> Aves </ol> <li value="3"> Invertebrados. <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>
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
Tabela simples <table> <tr> <th>Exame</th> <th>Nota</th> <th>Final</th> </tr> <td>Ana</td> <td>10</td> <td>11</td> <td>Zé</td> <td>12</td> <td>15</td> <th>Média</th> <td>11</td> <td>13</td> </table>
Tabela mais elaborada Como construir? Quantos elementos são definidos na 2ª linha? É possível incluir uma outra tabela num <td>?
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> <th>Homens</th> <th>Meninas</th> <th>Prof</th> <tr align="center"> <th rowspan="2">Turmas</th> <th>A</th> <td>20</td> <td>5</td> <td><img src="Gtd.gif"></td> </tr> <th>B</th> <td>21</td> <td>3</td> <td>idem</td> <th colspan="2">Total</th> <td>41</td> <td>8</td> <td>49</td> </table>
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
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
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)
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> <noframes>Azar. Precisa de um navegador melhor!</noframes> </html>
Quadros e16cimo.html e17indice.html <html> <head> <title>Listas</title> <base target="_top"> </head> <ul> <li>Algumas imagens <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> </html> e17indice.html <html> <head> <title>Cimo</title> </head> <h2><img src="mundo08.gif" align=middle> Documento com quadros</h2> </html>
Exemplo com quadros
A evitar Colocar <base target=_top>