Imagens

Transcrição

Imagens

Exercícios XHTML
1.
Professor Rinaldo Demétrio
Digite a seguinte página e salve como imagem_01.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Uso de Imagem
</title>
<meta http-equiv="content-type" content="application/xhtml+xml;
charset=iso-8859-1" />
</head>
<body>
<div>
<img src="imagens/bigapple.gif" alt="" />
</div>
</body>
</html>
2. Digite a seguinte página e salve como imagem_02.html.
<head>
<title>
Uso de Imagem
</title>
<style type="text/css">
img.imagem1 {border: solid;}
img.imagem2 {border: none;}
</style>
</head>
<body>
<div>
<img src="imagens/bigapple.gif" class="imagem1" alt="" />
</div>
</body>
Exercícios XHTML
</html>
<head>
<title>
Uso de Imagem
</title>
img.imagem1 {border: dotted;}
img.imagem2 {border: dashed;}
img.imagem3 {border: double;}
img.imagem4 {border: groove;}
img.imagem5 {border: ridge;}
img.imagem6 {border: inset;}
img.imagem7 {border: outset;}
</style>
</head>
<body>
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Exercícios XHTML
</div>
</body>
</html>
<head>
<title>
Uso de Imagem
</title>
img.imagem1 {border: thin solid;}
img.imagem2 {border: medium solid;}
img.imagem3 {border: thick solid;}
img.imagem4 {border: 10pt solid;}
</style>
</head>
<body>
<div>
<br />
<br />
<br />
<br />
</div>
</body>
</html>
5.
Exercícios XHTML
<head>
<title>
Uso de Imagem
</title>
img {border: 7pt solid red;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
<head>
<title>
Uso de Imagem
</title>
</head>
<body>
<div>
<img src="imagens/bigapple.gif" width="5" height="10" alt="" />
<img src="imagens/bigapple.gif" height="250" alt="" />
</div>
</body>
</html>
Exercícios XHTML
7.
<strong></strong><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Uso de Imagem com Alinhamento e Texto Alternativo
</title>
img {border: 8pt groove blue;}
div {text-align: center;}
</style>
</head>
<body>
<div>
<img src="imagens/sky.gif"
alt="Azul Celeste"
title="Azul Celeste"
/>
</div>
</body>
</html>
<head>
<title>
Uso de Imagem com Texto
</title>
Exercícios XHTML
div {float: left;}
</style>
</head>
<body>
<div>
<img src="imagens/bigapple.gif" alt="Maca verde" title="Maca
verde" />
</div>
<p>
Esta imagem encontra-se alinhada na parte esquerda do documento
HTML. Este texto encontra-se apresentado ao lado direito da
imagem posicionada do lado esquerdo.
</p>
</body>
</html>
<head>
<title>
Uso de Imagem com Texto
</title>
div {float: left;}
p {clear: left;}
</style>
</head>
<body>
<div>
<img src="imagens/bigapple.gif" alt="Maca verde" title="Maca
verde" />
</div>
<p>
Exercícios XHTML
Esta imagem encontra-se alinhada na parte esquerda do documento
HTML. Este texto encontra-se apresentado ao lado direito da
imagem posicionada do lado esquerdo.
</p>
</body>
</html>
<head>
<title>
Uso de Imagem como Linha Horizontal
</title>
h2 {text-align: center;}
div {text-align: center;}
p {text-align: center;}
</style>
</head>
<body>
<h2>
Exemplo de Linhas Coloridas
</h2>
<div>
<img src="imagens/sky.gif" width="750" height="5" alt="" />
</div>
<p>
<br />
<br />
A linha apresentada acima foi criada a partir do uso do
arquivo de imagem <b><i>sky.gif</i></b>.
</p>
</body>
Exercícios XHTML
</html>
<head>
<title>
Uso de Imagem como Papel de Parede
</title>
body {background-image: url(imagens/marble.jpg);}
</style>
</head>
<body>
<h2>
Exemplo de Uso de Papel de Parede
</h2>
</body>
</html>
<head>
<title>
Uso de Imagem como Marcador de Lista
</title>
Exercícios XHTML
ul {list-style-image: url(imagens/poliball.gif);}
</style>
</head>
<body>
<h2>
Atente para os seguintes detalhes:
</h2>
<ul>
<li>Seja
<li>Seja
<li>Seja
<li>Seja
</ul>
bondoso;</li>
caridoso;</li>
honesto;</li>
fidedigno.</li>
</body>
</html>
<head>
<title>
Uso de Imagem como Hiperlink
</title>
</style>
</head>
<body>
<h2>
Acesse com o ponteiro do <i>mouse</i> a imagem seguinte:
</h2>
<div>
<a href="imagem_13_liga.html">
<img src="imagens/flower.gif"
Exercícios XHTML
alt="Clique aqui"
title="Clique aqui"
/>
</a>
</div>
</body>
</html>

Imagens

Transcrição

Documentos relacionados

www.rewe

errata

script src="js/owl.carousel.min.js" Script não encontrado1

ACDSee print job