Curso de HTML 4.01 e Introdução ao XHTML 1.0
195 pág.

Curso de HTML 4.01 e Introdução ao XHTML 1.0


DisciplinaHtml143 materiais1.079 seguidores
Pré-visualização41 páginas
Ordenada com números romanos (maiúsculas):</h4> 
 
 <ol type=&quot;I&quot;> 
 <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=&quot;i&quot;> 
 <li>Espinafres</li> 
 <li>Ervilhas</li> 
 <li>Cenouras</li> 
 <li>Alfaces</li> 
 </ol> 
</body> 
</html> 
 
 
 
Diferentes tipos de listas não ordenadas 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h4>Lista com discos como marca:</h4> 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 39 
 <ul type=&quot;disc&quot;> 
 <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=&quot;circle&quot;> 
 <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=&quot;square&quot;> 
 <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> 
 
 <ul> 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 40 
 <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> 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 41 
 
 
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 &quot;source&quot;, 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=&quot;magoo.gif&quot;> 
</body> 
</html> 
 
 
 
A forma genérica mais simples deste elemento é a seguinte: 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 42 
 
<img src=&quot;url&quot;> 
 
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 &quot;texto alternativo&quot; à 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=&quot;http://www.w3.org/Icons/WWW/w3c_home&quot; alt=&quot;Ícone do W3C&quot;> 
<img src=&quot;http://www.w3.org/Icons/WWW/w3c_home&quot; title=&quot;Ícone do W3C&quot;> 
 
 É 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=&quot;http://www.w3.org/Icons/WWW/w3c_home&quot; alt=&quot;Ícone do W3C&quot; 
title=&quot;Ícone do W3C&quot;> 
 
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 (&quot;image map&quot;) 
<area> Define uma área clicável sobre um mapa de imagem 
 
Exemplos de Aplicação 
 
Como inserir imagens 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <p>Uma imagem em formato gif: <img alt=&quot;Senhor Magoo&quot; src= 
 &quot;magoo.gif&quot; width=&quot;90&quot; height=&quot;99&quot;></p> 
 
 <p>Uma imagem em formato jpg: <img alt=&quot;O Paraíso&quot; src= 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 43 
 &quot;praia.jpg&quot;></p> 
 
 <p>Repare que em ambos os casos a imagem é inserida do mesmo 
 modo.</p> 
</body> 
</html> 
 
 
 
Utilizando uma imagem de fundo 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body background=&quot;bg-pegadas.jpg&quot;> 
 <h3>Uma imagem de fundo</h3> 
 
 <p>Os fundos de imagem tanto podem ser criados com imagens do tipo 
 jpg como gif ou png.<br> 
 </p> 
 
 <p>Se a imagem de fundo tiver dimensões inferiores às 
 da janela do browser ela será repetida (formando um mosaico) 
 até preencher todo o fundo da página.</p> 
</body> 
</html> 
 
 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 44 
Como alinhar uma imagem com o texto 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <p>Uma imagem <img alt=&quot;O Paraíso&quot; src=&quot;praia.jpg&quot; align= 
 &quot;bottom&quot;> misturada com texto</p> 
 
 <p>Uma imagem <img alt=&quot;O Paraíso&quot; src=&quot;praia.jpg&quot; align= 
 &quot;middle&quot;> misturada com texto</p> 
 
 <p>Uma imagem <img alt=&quot;O Paraíso&quot; src=&quot;praia.jpg&quot; align= 
 &quot;top&quot;> misturada com texto</p> 
 
 <p><b>Nota:</b> O valor do alinhamento por omissão é 
 align=&quot;bottom&quot;</p> 
 
 <p>Uma imagem <img alt=&quot;O Paraíso&quot; src=&quot;praia.jpg&quot; align= 
 &quot;bottom&quot;> misturada com texto</p> 
 
 <p><img alt=&quot;O Paraíso&quot; src=&quot;praia.jpg&quot; align=&quot;bottom&quot;> 
 Uma imagem antes do texto</p> 
 
 <p>Uma imagem depois do texto <img alt=&quot;O Paraíso&quot; src= 
 &quot;praia.jpg&quot; align=&quot;bottom&quot;></p> 
</body> 
</html> 
 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 45 
Como fazer com que uma imagem flutue à esquerda ou à direita de um parágrafo 
 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <p><img alt=&quot;Magoo&quot; src=&quot;magoo.gif&quot; align=&quot;left&quot;> Aqui temos um 
 parágrafo