<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>

Tamanho: px

Começar a partir da página:

Download "<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>"

Tomás Martini
4 Há anos
Visualizações:

1 1. Digite a seguinte página e salve como imagem_01.html. <img src="imagens/bigapple.gif" alt="" /> 2. Digite a seguinte página e salve como imagem_02.html. img.imagem1 {border: solid;} img.imagem2 {border: none;} <img src="imagens/bigapple.gif" class="imagem1" alt="" /> <img src="imagens/bigapple.gif" class="imagem2" alt="" />

2 3. Digite a seguinte página e salve como imagem_03.html. 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;} <img src="imagens/bigapple.gif" class="imagem1" alt="" /> <img src="imagens/bigapple.gif" class="imagem2" alt="" /> <img src="imagens/bigapple.gif" class="imagem3" alt="" /> <img src="imagens/bigapple.gif" class="imagem4" alt="" /> <img src="imagens/bigapple.gif" class="imagem5" alt="" /> <img src="imagens/bigapple.gif" class="imagem6" alt="" /> <img src="imagens/bigapple.gif" class="imagem7" alt="" />

3 4. Digite a seguinte página e salve como imagem_04.html. img.imagem1 {border: thin solid;} img.imagem2 {border: medium solid;} img.imagem3 {border: thick solid;} img.imagem4 {border: 10pt solid;} <img src="imagens/bigapple.gif" class="imagem1" alt="" /> <img src="imagens/bigapple.gif" class="imagem2" alt="" /> <img src="imagens/bigapple.gif" class="imagem3" alt="" /> <img src="imagens/bigapple.gif" class="imagem4" alt="" /> 5. Digite a seguinte página e salve como imagem_05.html.

4 img {border: 7pt solid red;} <img src="imagens/bigapple.gif" alt="" /> 6. Digite a seguinte página e salve como imagem_06.html. <img src="imagens/bigapple.gif" alt="" /> <img src="imagens/bigapple.gif" width="5" height="10" alt="" /> <img src="imagens/bigapple.gif" height="250" alt="" />

5 7. Digite a seguinte página e salve como imagem_07.html. <strong></strong> com Alinhamento e Texto Alternativo img {border: 8pt groove blue;} div {text-align: center;} <img src="imagens/sky.gif" alt="azul Celeste" title="azul Celeste" /> 8. Digite a seguinte página e salve como imagem_08.html. com Texto

6 div {float: left;} <img src="imagens/bigapple.gif" alt="maca verde" title="maca verde" /> <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> 9. Digite a seguinte página e salve como imagem_09.html. com Texto div {float: left;} p {clear: left;} <img src="imagens/bigapple.gif" alt="maca verde" title="maca verde" /> <p>

7 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> 10. Digite a seguinte página e salve como imagem_10.html. como Linha Horizontal h2 {text-align: center;} div {text-align: center;} p {text-align: center;} <h2> Exemplo de Linhas Coloridas </h2> <img src="imagens/sky.gif" width="750" height="5" alt="" /> <p> A linha apresentada acima foi criada a partir do uso do arquivo de imagem <b><i>sky.gif</i></b>. </p>

8 11. Digite a seguinte página e salve como imagem_11.html. como Papel de Parede body {background-image: url(imagens/marble.jpg);} h2 {text-align: center;} <h2> Exemplo de Uso de Papel de Parede </h2> 12. Digite a seguinte página e salve como imagem_12.html. como Marcador de Lista h2 {text-align: center;}

9 ul {list-style-image: url(imagens/poliball.gif);} <h2> Atente para os seguintes detalhes: </h2> <ul> <li>seja bondoso;</li> <li>seja caridoso;</li> <li>seja honesto;</li> <li>seja fidedigno.</li> </ul> 13. Digite a seguinte página e salve como imagem_13.html. como Hiperlink h2 {text-align: center;} <h2> Acesse com o ponteiro do <i>mouse</i> a imagem seguinte: </h2> <a href="imagem_13_liga.html"> <img src="imagens/flower.gif"

10 alt="clique aqui" title="clique aqui" /> </a>

Documentos relacionados

Cascading Style Sheets

Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,