<html> <head>
<title>Exemplo</title> </head>
<body>
<h4>Uma lista ordenada:</h4> <ol> <li>Rum</li> <li>Água do Luso</li> <li>Bagaceira</li> </ol> </body> </html>
Diferentes tipos de listas ordenadas
<html> <head> <title>Exemplo</title> </head> <body>
<h4>Lista Ordenada com números:</h4> <ol> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol>
<h4>Lista Ordenada com letras maiúsculas:</h4> <ol type="A"> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol>
<h4>Lista Ordenada com letras minúsculas:</h4> <ol type="a">
<li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol>
<h4>Lista Ordenada com números romanos (maiúsculas):</h4> <ol type="I"> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol>
<h4>Lista Ordenada com números romanos (minúsculas):</h4> <ol type="i"> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol> </body> </html>
Diferentes tipos de listas não ordenadas
<html> <head>
<ul type="disc"> <li>Bagaceira</li>
<li>Aguardente de Medronho</li> <li>Cachaça</li>
<li>Ginja com Elas</li> </ul>
<h4>Lista com anéis como marca:</h4> <ul type="circle">
<li>Bagaceira</li>
<li>Aguardente de Medronho</li> <li>Cachaça</li>
<li>Ginja com Elas</li> </ul>
<h4>Lista com quadrados como marca:</h4> <ul type="square">
<li>Bagaceira</li>
<li>Aguardente de Medronho</li> <li>Cachaça</li>
<li>Ginja com Elas</li> </ul> </body> </html> Listas encaixadas <html> <head> <title>Exemplo</title> </head> <body> <h4>Listas encaixadas:</h4>
<li>Bagaço</li> <li>Bebidas de menina <ul> <li>Chazinho</li> <li>Leitinho</li> </ul> </li> <li>Rum</li> <li>Cachaça</li> </ul> </body> </html>
Uma lista de definições
<html> <head> <title>Exemplo</title> </head> <body>
<h4>Uma Lista de Definições:</h4> <dl>
<dt>Rum</dt>
<dd>Bebida com alto teor alcoólico. Revigorante poderoso para quem sofre de fraqueza física.</dd>
<dt>Água das pedras</dt>
<dd>Bebida para senhoras e meninos fracos.</dd> <dt>Bagaço</dt>
<dd>Bebida para Homens e Mulheres de barba.</dd> </dl>
</body> </html>
7. Imagens
O HTML torna muito fácil a tarefa de mostrar imagens dentro de um documento.
7.1 O elemento <img> e o atributo src
A inserção de imagens num documento se faz com o elemento <img>. Este elemento tem conteúdo vazio, o que significa que ele apenas possui atributos e não tem etiqueta de finalização.
A escolha da imagem para mostrar na página se faz através do atributo src (que é uma abreviação de "source", ou origem) o qual indica o nome e o local em que pode ser encontrado o arquivo que contém a imagem.
O exemplo seguinte ilustra o uso deste elemento: <html>
<body>
<img src="magoo.gif"> </body>
<img src="url">
A URL aponta para o local onde se encontra o arquivo que contém a imagem. Por exemplo, se quisermos mostrar o ícone que aparece no início de cada página do W3C devemos usar o URL: http://www.w3.org/Icons/WWW/w3c_home
A imagem será desenhada no local que corresponde ao elemento <img> dentro do documento HTML.
7.2 O atributo alt ou title
Os atributos alt e title usam-se para definir "texto alternativo" à imagem. Este texto será mostrado em vez da imagem no caso de o browser não conseguir apresentá-la, e usa-se assim:
<img src="http://www.w3.org/Icons/WWW/w3c_home" alt="Ícone do W3C"> <img src="http://www.w3.org/Icons/WWW/w3c_home" title="Ícone do W3C">
É importante ressaltar a diferença entre alt e tile. O atributo alt funciona somente no Internet Explorer, já o atributo title é usado no Mozilla. Para evitar problemas com a utilização desses atributos, utilize-os juntamente como no exemplo: <img src="http://www.w3.org/Icons/WWW/w3c_home" alt="Ícone do W3C"
title="Ícone do W3C">
Os atributos alt e title devem conter uma descrição daquilo que a imagem contém para que seja possível compreender o seu conteúdo mesmo sem a ver. A utilização dos atributos alt e title é recomendada porque melhora a acessibilidade das páginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que têm deficiências visuais. Nesses casos, sem os atributos alt e title o conteúdo das imagens seria sempre um mistério.
Nota: Ao utilizar imagens tenha em mente que elas podem aumentar
consideravelmente o tempo que é preciso esperar para ver os conteúdos das suas páginas: Por isso, use-as com cuidado!
7.3 Elementos relacionados com imagens
Elemento Descrição<img> Insere uma imagem
<map> Define um mapa sobre uma imagem ("image map")
<area> Define uma área clicável sobre um mapa de imagem