Internet - 1 Serviços de navegação m São serviços que permitem varrer ou vasculhar documentos...
Transcript of Internet - 1 Serviços de navegação m São serviços que permitem varrer ou vasculhar documentos...
Internet - 1
Serviços de navegação
São serviços que permitem varrer ou vasculhar documentos em computadores remotos 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
Internet - 2
gopher
Serviço baseado em menús cada linha do menú está associada a outro menú a um ficheiro que é visualizado ou a um programa para executar
funcionamento do navegador contacta o servidor (um de cada vez) obtém uma página de informação fecha a ligação mostra a informação
as fronteiras do computador diluem-se e o conjunto dos servidores de gopher funcionam como um grande repositório integrado
Internet - 3
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
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
------
Internet - 4
World Wide Web
Origem: vários grupos de físicos pretendiam partilhar informação multimédia integrada, sem terem de a enviar para as várias equipas
acesso à informação por pedido (pull) em vez de por envio (push)
no CERN (1991) definiu-se a linguagem HTML e no NCSA implementou-se o browser Mosaic
serviço mais importante: em 1995 o tráfego WWW ultrapassou o de FTP
responsável pela actual expansão da Internet
Internet - 5
Navegadores
Quem controla as normas da Web é o W3C - World Wide Web Consortium
em sentido estrito, WWW refere-se ao serviço de navegação que usa o protocolo http
os navegadores mais comuns são o Netscape Navigator e Microsoft Internet Explorer (guerra!) para além de funcionarem como clientes WWW, também
incluem clientes para os outros serviços (ftp, telnet, e-mail, gopher)
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
Internet - 6
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,
gopher, ...); se omisso, usa-se o http da Web computador é a máquina onde corre o servidor ficheiro é o nome completo do ficheiro pretendido; se omisso,
usa-se habitualmente Welcome.html ou index.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
Internet - 7
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 gopher
é um caso particular da linguagem SGML (Standard General Markup Language) utilizada em processamento de texto
HTML é definida por um DTD (Document Type Definition) SGML está na versão 4.0
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
Internet - 8
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 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ã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
Internet - 9
Ferramentas de desenvolvimento
Necessários um editor e um navegador dois métodos de construção das páginas
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
• a ferramenta shareware HTML Author é útil para complementar o Word
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)
Internet - 10
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>
Internet - 11
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>
Internet - 12
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>
Internet - 13
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>
Internet - 14
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;< < á á
> > ê ê
& & ì ì
º º õ õ
× × Ü Ü
entidade carácter numérica &#nnn;A A • •
Internet - 15
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
Internet - 16
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
Internet - 17
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
Internet - 18
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>
Internet - 19
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
Internet - 20
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
Internet - 21
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
Internet - 22
Exemplo de fontes
Internet - 23
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><big></big>produz</big>
uma variação relativa encaixada.<br>Diminuir tamanho do texto normal com<basefont size=-1><basefont size=-1> passa para 2.Aqui,<big><big> fica com 3,</big>pois a variação é relativa.<br>Realçar texto com<font size=7><font size=7></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><sup>2</sup> e índices <b>x</b><sub><small>2</small></sub> não mudam de tamanho automaticamente.</div>
Internet - 24
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)
Internet - 25
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
Internet - 26
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
Internet - 27
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 tem
muitos espaços
e mudanças de linha.
</pre>
Internet - 28
RéguasUma régua (<b><hr></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>
Internet - 29
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
Internet - 30
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
Internet - 31
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
Internet - 32
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.
Internet - 33
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>
Internet - 34
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
Internet - 35
Mapa 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>
Indiferente a ordem?www.boutell.com/mapedit
Internet - 36
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
Internet - 37
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.
Internet - 38
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
Internet - 39
Abertura de espaços
Primeiro, 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.
Internet - 40
Colunas
<h2 align=center>Texto em colunas</h2><multicol cols=3 gutter=15 width=90%><p>A marca <multicol> 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>
Internet - 41
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
Internet - 42
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 <layer> não ocupa … para o seu sítio.
Internet - 43
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
Internet - 44
Â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 - 45
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 - 46
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 - 47
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 - 48
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
Internet - 49
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>
Internet - 50
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 - 51
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 - 52
Tabela mais elaborada
Como construir? Quantos elementos são definidos na 2ª linha? É possível incluir uma outra tabela num <td>?
Internet - 53
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 - 54
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
Internet - 55
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 - 56
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 - 57
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 - 58
Quadros
<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>
e16cimo.html e17indice.html
Internet - 59
Exemplo com quadros
Internet - 60
A evitar
Colocar <base target=_top>
Internet - 61
Exercício
Internet - 62
Código do Exercício
<html><head><title>Novas Metodologias da Programação</title><base target="_top"></head>
<frameset rows="30%,*"> <frame name="cimo" src="e22Cimo.html"> scrolling="no" frameborder="1" noresize> <frameset cols="30%,*"> <frame name="indice" src="e23Indice.html"> frameborder="1"> <frame name="docs" src="e24Ficha.html"> </frameset></frameset><noframes>Azar. Precisa de um navegador melhor!</noframes></html>
e21ExFrames.html
Internet - 63
Código do Exercício
<head><title>Cimo</title></head><body><table border="0" width="100%"><tr align="center"><td width=100><table bgcolor="yellow" cellpadding="3" border="1" bordercolor="yellow"><tr><td><img src="gtd.gif" width=60></td></tr></table></td><td><h2 align="center">Novas Metodologias da Programação</h2><basefont size="-1"><table align=center valign="bottom" cellpadding="2" bgcolor="yellow" border="1"><tr><td><a href="e23Indice.html" target="indice">Ficha</a></td><td><a href="e23Indice.html" target="indice">Exercícios</td><td><a href="e23Indice.html" target="indice">Acetatos</td><td><a href="e27Exames.html" target="indice">Exames</td><td><a href="e26Indnota.html" target="indice">Notas</td></tr></table></td></tr></table>
e22Cimo.html
Internet - 64
Código do Exercício
<html><head><title>Listas</title><base target="_top"></head><body><h4>Ficha</h4><ul><li><a href="e24Ficha.html#Objectivos" target="docs">Objectivos</a><li><a href="e24Ficha.html#Conteudo" target="docs">Conteúdo</a><li><a href="e24Ficha.html#Metodologia" target="docs">Metodologia</a><li><a href="e24Ficha.html#Bibliografia" target="docs">Bibliografia</a><li><a href="e24Ficha.html#Avaliacao" target=“docs”>Avaliação</a></ul></body></html>
e23Indice.html
Internet - 65
Exercício
<html><head><title>NMP - Ficha</title><base target="_top"></head><body><h4><a name="Objectivo">OBJECTIVOS DA DISCIPLINA</a></h4><basefont size=-1><multicol cols="2" gutter="1.5">Habilitar os alunos a desenvolver software segundo dois paradigmas…</multicol><h4><a name="Conteudo">CONTEÚDO DA DISCIPLINA</a></h4><ol><li>Progamação na Internet.<ul><li>Organização e funcionamento da Internet: história da rede; a família de protocolosTCP/IP; arquitectura cliente-servidor; servidor de nomes.<li>Navegação na rede: Gopher, Web.……</body></html>
e24Ficha.html
Internet - 66
O elemento <IFRAME>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
<TITLE>Quadros Flutuantes</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Quadros Flutuantes</H1>
<IFRAME NAME=”foto" SRC=”gtd.html" WIDTH=“50” HEIGHT=“50” ALIGN=“LEFT”>
O quadro com a foto apareceria aqui.
</IFRAME>
<P>Este é um exemplo de utilização de quadros flutuantes. Na generalidade dos casos os quadros flutuantes apresentam-se de forma análoga às imagens embebidas.</P>
</BODY>
</HTML>
Internet - 67
O elemento <IFRAME>
<html><head><title>GTD</title></head>
<body><table align="left" cellpadding="5"><tr bgcolor="yellow"> <td><img src="gtd.gif"> </td></tr></table></body></html>
gtd.html
<body> <iframe name="foto" src="gtd.html" align="left"></iframe><h2 align="center">NOVAS METODOLOGIAS DA PROGRAMAÇÃO</h2><table align="center" bgcolor="yellow" border="2" cellpadding="3"><tr><td><a href="ficha.html" target="menu">Ficha</a></td><td><a href="exercicios.html” target="menu">Exercícios</a></td><td><a href="acetatos.html" target="menu">Acetatos</a></td><td><a href="exames.html" target="menu">Exames</a></td><td><a href="notas.html" target="menu">Notas</a></td></tr></table></body></html>
cimo.html
Internet - 68
Problemas com quadros
Desenho Controlo da apresentação de elevadores
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 docs pode não ser apercebido).
Bookmarking da janela? do quadro?
Impressão do quadro; e da janela?
Referência: www.useit.com (Jakob Nielsen)