Curso de Webdesign

Exercício 7 – IMAGENS

Muito bem, você está evoluindo a cada exercício. Neste exemplo exercitaremos os tags que permitem a inserção de imagens em sua home page. Antes de iniciar o estudo sobre imagens, quero lembrar-lhe que uma imagem só poderá ser exibida no browser, se ela estiver na mesma pasta, ou então, você deverá apontar o caminho onde está, conforme o exemplo de número 6. Lembra?
Outro fato é que, você poderá escolher as imagens que desejar, basta substituir o nome da imagem que está no exemplo pela a que você escolheu. Tudo certinho agora? Vamos em frente!

Para entender isto, digite a listagem 1.11, e salve como exemplo10.html

Listagem 1.11

<html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos trabalhando com imagens</h1>
<h3> Esta é sua primeira imagem. Sorria?</h3>
<img src=fig.jpg align=left>Veja se consegue enxergar, as seguintes imagens?<br>
O rosto de um velho<br>
Uma moça<br>
Um cachorro<br>
Um outro velho<br>
Um pássaro<br>
E algo mais<br>
</body>
</html>

Fim da Listagem 1.11

Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:\Meus documentos\exemplo10.html. Veja figura 1.12

É isso aí, não se preocupe se você não conseguiu enxergar todas as imagens, o mais importante para mim é que você tenha entendido a aula. (risos!!!) Vamos para um exemplo? Desta vez, trabalharemos com o alinhamento da imagem e do texto.

Para entender isto, digite a listagem 1.12, e salve como exemplo11.html

Listagem 1.12

<html>
<head><title>Imagens</title>
</head>
<body>
Note neste exemplo que a imagem <img src=fig2.jpg> está entre o texto<br>
<img src=fig2.jpg align=top>Imagem está à esquerda e o texto no topo<br>
<img src=fig2.jpg align=middle>Imagem está à esquerda e o texto no centro<br>
<img src=fig2.jpg align=left>Neste exemplo a imagem ficou alinhada è esquerda, permitindo que o texto ficasse todo à direita ao redor da imagem. Utilize este recurso toda vez que desejar que o texto fique ao lado da imagem <br>
</body>
</html>

Fim da Listagem 1.12

Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:\Meus documentos\exemplo11.html. Veja figura 1.13

CONCEITO DOS TAGS USADOS NO EXERCÍCIO ANTERIOR

TAG O QUE FAZ
<img> Insere uma imagem
Atributos
src indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da imagem
align=left faz a imagem flutuar a esquerda enquanto o texto circunda
imagem à direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto circunda
imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegador não exibe a
imagem. Sendo que n é o título que identifique a imagem.
Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”>

112 comentários

  1. silvana dias

    OLHA ESTOU SURPRESA COM A RIQUEZA DE VARIEDADE DE OPÇÕES DE CURSOS GRATUITOS POR ISSO NÃO POSSO DEIXAR DE EXPRESSAR MINHA ALEGRIA. PARABENS AOS AUTORES DESTE SITE ,NUNCA SAIAM DA NET .ESTAREI COM VÕCES SEMPRE.

  2. nossa genial aprendi muito com o curso tinha lido o curso sobre Html (aqui mesmo) e percebi que sempre tinha que colocar aspas igual no blogger tipo e é mais complicado quando você faz um código muito grande você fica meio perdido, aqui nem precisa e da certo do mesmo jeito tipo gostei pra caramba vlw!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *