1 / 76

Sumário

Sumário. World-Wide-Web A linguagem HTML Conceitos básicos Posicionamento Folhas de estilo Formulários. 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.

kaspar
Download Presentation

Sumário

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. Sumário • World-Wide-Web • A linguagem HTML • Conceitos básicos • Posicionamento • Folhas de estilo • Formulários

  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?

  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

  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, ... NMP 1998/1999 ------ ------ Alunos ------ Alunos ------ Luis Rui ------ Luis ------ ------ Curso ------ LEIC Disciplinas ------ ------ NMP ------ Rui ------ ------ Curso ------

  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

  6. World Wide Web • Objectivo fundamental • partilha da informação • questões de segurança não eram prioritárias • Em 1991, noCERN (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

  7. Comunicação Cliente-Servidor URL Uniform Resource Locator HTTP Hypertext Transfer Protocol HTML Hypertext Markup Language

  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

  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

  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

  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

  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)

  13. Primeiro documento <html> <head> <title>Documento inicial</title> </head> <h2>Exemplo</h2> <body> Este documento mostra que os espaços no código fonte <!-- observação: esta observação não aparece no texto --> são ignorados pelo navegador. <p> <i>Introduzi um novo paragrafo.</i> </body> </html>

  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>

  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>

  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>

  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 •

  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

  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

  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

  21. Texto estruturado <div align=right class=introducao> Introdução: O trabalho presente visa demonstrar a necessidade 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>

  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

  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

  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

  25. Exemplo de fontes

  26. <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><sup>2</sup> e índices <b>x</b><sub><small>2</small></sub> não mudam de tamanho automaticamente. </div> Código do exemplo

  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)

  28. Côr • Nomes normalizados aqua (#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

  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

  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 tem muitos espaços e mudanças de linha. </pre>

  31. Réguas Uma régua (<b>&lt;hr&gt;</b>) tem o 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 ou em % da janela<br> <b>align</b> -- alinhamento <hr align=right size=5 width=33%> Recomenda-se o uso da percentagem para tornar 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>

  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

  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

  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

  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.

  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>

  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 0,0 90,30 30,70 150,130 70,140

  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

  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.

  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

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

  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>

  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

  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.

  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

  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

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

  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

  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

  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

More Related