Licao 7a - Imagens Embutidas (Inline Graphics)

<1> <2> <3> <4> <5> <6> <7> <8> <9> <10> <11> <12> <13> <14> <15> <16>

<7a> <7b>

Li��o 7a - Imagens Embutidas
Inline Graphics

Matem�tica WWW:


          Texto + Imagens + Som + V�deo = Multim�dia 



          Multim�dia + WWW = HiperM�dia Global

Objetivos

	Identificar o formato HTML para gr�ficos ou figuras.
	Inserir uma imagem embutida em um documento HTML

Li��o

R�tulos HTML para Gr�ficos Embutidos

Uma imagem "inline" � aquela que aparece junto com o texto de uma p�gina WWW, tal como . O formato HTML para o r�tulo de uma imagem embutida �:


     <img src="nome_arq.gif">

onde nome_arq.gif � o nome de um arquivo GIF no mesmo diret�rio do seu documento HTML. Por "embutida" ou "inline" entende-se que o browser apresentar� a imagem juntamente com o texto.

Para for�ar uma imagem para aparecer em uma linha separada, simplesmente insira um r�tulo de par�grafo

antes do r�tulo de imagem:


     <p> <img src="nome_arq.gif">

Tamb�m � poss�vel controlar como o texto adjascente � imagem se alinha � figura, pela inclus�o do modificador aling.
Reduza e expanda a janela do seu browser para ver o que acontece com a linha de texto em rela��o � figura.

1. align=top

<img align=top src="nome_arq.gif">

Rua das Palmeiras. Ponto de visita��o dos turistas. Caminhando por entre as Palmeiras chega-se ao Pal�cio dos Pr�ncipes de Joinville.

2. align=middle

<img align=middle src="nome_arq.gif">

Turismo Rural - Casa Enxaimel. Apesar do grande incremento da industrializa��o por que passou Joinville, v�rios bols�es rurais permanecem praticamente inalterados, mantendo o panorama da antiga col�nia.

3. align=bottom (default)

<img align=bottom src="nome_arq.gif">

Pra�a Dario Salles. Cercada por v�rios jardins multicoloridos, esta bela pra�a apresenta ainda um chafariz e diversas �rvores, entre elas a Palmeira.

O Netscape permite, ainda, os seguintes alinhamentos do HTML 3.0:

4. align=right

<img align=right src="nome_arq.gif">

Alinha imagem � direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. � preciso testar o resultado para ver se surte o efeito desejado na tela.

5. align=left

<img align=left src="nome_arq.gif">

Alinha imagem � esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. � preciso testar o resultado para ver se surte o efeito desejado na tela.

Incluindo Imagens Inline em seu documento HTML

Neste exerc�cio, ser� adicionado a figura de uma orqu�dea (um dos s�mbolos da cidade) na p�gina Joinville I.

Re-abra sua �rea de trabalho.

Abra a p�gina jv1.html no editor de texto

Antes do cabe�alho principal Joinville I, inclua o seguinte:
```
 <img src="orq.gif">
```
Isto inserir� no alto da sua p�gina a figura da orqu�dea que foi carregada na li��o passada.
No cabe�alho Atra��es Tur�sticas, inclua o seguinte r�tulo <img src="mir.gif"> dentro do r�tulo de cabe�alho, da seguinte forma:
```
<h2><img src="mir.gif">Atra��es Tur�sticas</h2>
```
Para dar um toque visual agrad�vel � sua p�gina, acrescente nos cabe�alhos Apresenta��o, Localiza��o, Hist�ria, Eventos, Atrativos Naturais e Servi�os de Hotelaria e Divers�o, a bolinha vermelha (ou seria rosa?) salva com o nome bal_red.gif, na li��o passada:
```
<h2><img src="bal_red.gif">Apresenta��o</h2>
```

Salve o texto e recarrege em seu browser WWW.

Revis�o

Qual � o formato HTML para incluir uma imagem em um documento?
A imagem aparecer� na linha seguinte, anterior ou na linha atual do texto?
Podem ser inclu�das imagens que n�o fiquem junto com texto? Para qu�?
Por que a imagem da orqu�dea ficou em uma linha separada do cabe�alho Joinville I e a imagem do mirante ficou na mesma linha do cabelho Atra��es Tur�sticas?

Mais informa��o

Se os seus documentos HTML ser�o acessados por usu�rios que usam browser de modo texto (tal como lynx), eles n�o ser�o capazes de ver imagens embutidas. De modo geral, eles ver�o uma indica��o de que naquele ponto deveria estar uma figura. O in�cio da p�gina Joinville I dever� aparecer assim:


[IMAGE]

                         Joinville I

Nesta li��o aprenderemos a montar p�ginas WWW usando seus recursos b�sicos. 

Joinville, dos Pr�ncipes, das Flores e da Dan�a, ser� o tema central do nosso trabalho. 

 

 -----------------------------------------------------------------

Assim, o usu�rio saber� que est� perdendo alguma coisa. Voc� pode modificar o r�tulo <img> de modo que ao inv�s de usar o texto padr�o ([IMAGE]), o browser apresentar� um texto especificado. Por exemplo, no nosso contexto, poderia ser uma express�o como: "Constru��o da p�gina sobre:", como a seguir:

     <img alt=Constru��o da p�gina sobre:" src="orq.gif">

A palavra-chave alt= faz substituir o marcador padr�o pelo texto, ficando da seguinte forma o inicio da p�gina Joinville I para um usu�rio de browser modo texto:


Constru��o da p�gina sobre:

                         Joinville I

Nesta li��o aprenderemos a montar p�ginas WWW usando seus recursos b�sicos. 

Joinville, dos Pr�ncipes, das Flores e da Dan�a, ser� o tema central do nosso trabalho.

 -----------------------------------------------------------------

Pr�tica Independente

Acrescente uma imagem inline ao seu pr�prio documento WWW usando uma figura de um arquivo GIF que esteja armazenada em seu computador ou uma que foi carregada da Internet.

A seguir...

Criando p�ginas com imagens de fundo (backgrounds). Assim como o papel de parede do Windows.