Ajustar tamanho da imagem
Na tag de imagem que é o (<img src=.....)
será preciso inserir o
width= Determina a largura
e o
height= Determina a altura
A tag seria assim:
<img src="URL aqui" width=100; height=100>
No exemplo acima está com altura e largura de 100,
Quanto maior,maior será a imagem.
Sem o width e o height nesta tag,
a imagem será visualizada no tamanho original.
-------------------------------
Método utilizando o <td>
<td> significa "table data" ,
em português é dados da tabela,
Entre os td são juntada dentro do td,
assim o que começa com td se torna um
pequeno espaço que pode ter quebra de linha,
parágrafos e alterações do conteúdo até fechar o td.
Esse método alinha cada conteúdo e pode ser utilizado nos textos ou imagens.
Exemplo:
<Center>
<td>
um link de imagem na esquerda
</td>
<center>
<font face="Comic Sans MS" color=#FE49A1 size=2>
<b> texto<b>
<td>
outro link de imagem na direita
</td>
No exemplo acima visualizará todo centralizado,
um texto cor de rosa com fonte específico no meio e
duas imagens nas laterais.
Obs:
Nesse código acima basta incluir o link da imagem sem
precisar incluir o codigo de imagem (<img src....)
No orkut é possível visualizar a
imagem apenas postando a url da imagem.
-----------------------------
Método utilizando o <tr>
<tr> significa "table row" em português é linha de tabela
Começa e termina e uma linha horizontal da tabela.
No orkut podemos utilizar o <tr> para posicionar um conteúdo abaixo.
Exemplo:
<br><center>
<td bgcolor=#9BCD9B>
<div style="border-width:15; border-color:#5F9F9F ;border-style:ridge">
<div style="border-width:10; border-color:#FFFFF0 ;border-style:solid">
Texto ou imagem
<p><br><td bgcolor=#9BCD9B>
<div style="border-width:15; border-color:#5F9F9F ;border-style:ridge">
<div style="border-width:10; border-color:#FFFFF0 ;border-style:solid">
Texto ou imagem
<p><br><tr><td bgcolor=#9BCD9B>
<div style="border-width:15; border-color:#5F9F9F ;border-style:ridge">
<div style="border-width:10; border-color:#FFFFF0 ;border-style:solid">
Texto ou imagem
<p><br>
Utilizei bordas neste exemplo para
posicionar cada bordas.
Duas bordas acima, entrou o <tr> para
separar e posicionar abaixo outra borda.
----------------------------
Bordas
No orkut é possível incluir bordas para enfeitar seus conteúdos.
Um exemplo de borda:
<center><div style="border-width:10; width: 400; border-color:green;border-style: outset">
Texto aqui
<p><br>
Detalhes do exemplo acima.
<center> para centralizar todo conteúdo.
<div style="começo da tag de bordas
border- width:10 Determina a espessura da borda
width: 400 Determina o comprimento da borda
No exemplo acima o border-width está como
10 e o width está como 400.
Espessura da borda10 e comprimento 400.
border-color:green Determina a cor da borda
O border-color está como verde(green)
border-style: outset Determina o estilo da borda
O border-style está como
estilo outset,sombra para baixo.
Também pode inverter esta
parte do border-style: outset para inset.
A sombra posicionará para cima.
Existe também o border-style:ridge,
a sombra posicionará dentro da borda.
E existe também o border-style:solid,
a borda ficará sem sombra e com a cor sólida.
Podemos criar um conjunto de bordas.
Exemplo:
<br><center>
<td bgcolor=#9BCD9B>
<div style="border-width:15;border-color:#5F9F9F ;border-style:ridge">
<div style="border-width:10;border-color:#FFFFF0 ;border-style:solid">
Texto
<p><br>
Detalhes do exemplo acima;
Incluímos duas bordas sequentes no exemplo acima.
<br> Pula uma linha
<center> Centraliza o conteúdo
<td bgcolor=#9BCD9B> Determina a cor interna do quadro
<div style=" Inicio da tag de borda
border-width:15; Determina a espessura da borda
border-color:#5F9F9F; Determina a cor da borda
border-style:ridge Determina o estilo da borda,
Está como ridge que terá um efeito de sombra interna da borda
"> Encerra a tag de borda
A próxima tag de borda são as mesmas
mas com a espessura,cor,estilo alterado.
Entra texto
<p> Define a área de um parágrafo.
<br> Pula uma linha
-----------
Note que não inclui o widht de comprimento nestas tag de borda.
Automaticamente o tamanho do texto inserido terá o ajuste do comprimento.
Podemos inserir o comprimento mas será do tamanho fixo e o texto
pode utrapassar a borda ou sobrar.
Basta ajustar o tamanho ideal caso for inserir o width do comprimento.
-----------
Para inserir imagens dentro da borda
basta incluir a url da imagem no local do texto.
Exemplo:
<center><div style="border-width:10; width: 400; height: 400;border-color:green;border-style: outset">
URL da imagem aqui
<p><br>
Caso a posição não estiver ajustado no meio e
estiver para cima ou para baixo sobrando um espaço no interno da borda,
insira o <p> ou <br> antes ou depois do texto ou url da imagem.
-----------------------
Dentro do orkut as tags básica como negrito sublinhado etc, são
utilizado os colchetes [].
Também pode ser utilizado a forma padrão de <>
Exemplo:
[b] de negrito é igual a <b> de negrito
Algumas alterações são aplicado em determinada tag.
A forma de transformar um texto em link no método do orkut é:
[link=URL Aqui] Texto aqui [/link]
No modo tag de html seria:
<a href=Link aqui> Texto aqui </a>
As duas formas tem o mesmo resultado.
Para linkar uma imagem ,ou seja,
a imagem ser clicável para uma url destino seria:
Método html tag
<a href=URL> <img src="URL"></a>
Método orkut
[link=URL]<img src="URL">[/link]
As duas formas tem os mesmos resultados.
Importante fechar as tags para que o referente link não
seja incluído nos seguintes conteúdos.
--------------
0 comentários:
Postar um comentário