Basicamente são necessário dois passos:
1) colocar a foto no espaço, ou seja, na net para que quando se acede à pagina da cache a mesma possa encontrar a imagem (devemos lembrarmo-nos que em casa temos a imagem no disco do PC mas quando a pagina da cache é publicada não pode, nem convém, aceder ao disco do nosso pc)
2) colocar instruções na pagina da cache de como procurar e incorporar essa imagem dentro do texto e não como anexo.
assim;
1-a) para o primeiro passo, faz-se como se faria para anexar uma imagem à pagina de cache
1-b) com o botão direito do rato, clica-se no link da imagem o regista-se o endereço (ex.
http://img.geocaching.com/cache/56bd06c3-dc4b-4580-ac41-2737a2ae1a60.jpg a seguir referido como image url ou endereço)
2-a) no texto da cache, insere-se o seguite código que incorpora a imagem no texto da cache;
2-b) depois dos alindamentos (*), pode-se apagar a referencia ao anexo da imagem no texto da cache que ela continua disponível no servidor da groundspeak mas deixa de aparecer duplicada na cache; uma como anexo e outra com imagem incorporada.
Alindamentos;
O código acima é o mais básico para incorporar imagens mas ele pode ter parâmetros opcionais que ajudam a controlar alguns aspectos:
src="endereço" width=
"largura" border="moldura">
onde,
align = center / left / right
height = nr. de pixels (pode ver-se nas propriedades do .jpg antes do upload - se não se colocar nada ele assume o default.
width = idem, idem, aspas, aspas
(se se variar estes nrs. convém fazê-lo de forma a não distorcer a imagem)
alt = (alternate) nome ou comentário a aparecer quando se passa com o rato por cima da imagem
border = espessura da moldura (valores entre 0 e 4 - o zero é invisível )
e hà mais parâmetros mas estes já dão um bom controlo da imagem.
Outra coisa que poderá ser necessário é incluir a imagem dentro de uma tabela para melhor se poder controlar a mesma em relação ao texto. Essa parte já é mais complexa mas aqui fica um exemplo de uma tabela com duas imagens incorporadas, e com tamanhos diferentes (a tabela está invisível, com border=0, porque serve mesmo só para controlar a posição das imagens):
src="image1 url" width= "211" align="middle" vspace="1" border="4">
|
"image2 url" width="495" height="278" alt="name or comment of the image" align= "left">
|
Começa-se por se definir um parágrafo com as tags
e
,
depois a tabela com as tags
,
segue-se as celulas da tabela, começando com a linha (row) usando as tags table row
e
e divide-se a linha (row) em divisões (...) com as tags table division
e | depois, dentro destas ultimas tags, já será possível identificar o código necessário para inserir a imagem conforme explicado acima.
Note-se que neste caso a indicação da imagem e das celulas é dada em percentagem e não em valor absoluto por ser mais facil quando se referenciam objectos dentro de outros (imagem dentro da celula dentro da tabela).
Para quem tiver curiosidade em aprofundar mais, existem muitos sites que ensinam html e têm exercícios e tutoriais para praticar. Basta digitar "learn html" num motor de busca e ter tempo para passar em frente ao PC.