Sumário

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>² e índices <b>x</b>_{<small>2</small>} 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