1 / 18

Tipos de endereços

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

quintessa-duran
Download Presentation

Tipos de endereços

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

  11. <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> Código da tabela

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

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

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

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

  16. <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="e00Teste.html">Fim</a> </ul> </html> Quadros e16cimo.html e17indice.html

  17. Exemplo com quadros

  18. A evitar • Colocar <base target=_top>

More Related