HTML Básico

Alinhando as imagens

Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui parâmetros do alinhamento dentro da tag de imagem. Assim:

Veja como o texto fica na imagem. Este é um exemplo de alinhamento padrão; você não precisa incluir nenhuma tag.


Agora veja como o texto fica no topo da imagem.

Este é um exemplo de alinhamento de texto no topo da imagem. Para fazer este tipo de alinhamento, a tag de imagem deve ficar assim:

<img src="nome da imagem " align="top">
Repare que só incluímos o align="top" na tag de imagem.


Veja como o texto fica no meio da imagem.

Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim:

<img src="Endereço da Imagem" align="middle">
Repare que só incluímos o align="middle" na tag de imagem.


Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto.


A tag para este alinhamento é:
<img src="Endereço da Imagem" align="left">


Veja que agora a imagem está alinhada do lado direito

e o texto fica ao redor. É exatamente o oposto

do alinhamento à esquerda.


A tag para este alinhamento é:
<img src="Endereço da Imagem" align="right">

- Para se ter uma imagem centralizada:

<CENTER><img src="Endereço da Imagem"></CENTER>

O resultado é:

 

Criando links

Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento da sua página ou site na Internet. Podemos fazer links internos, para documentos no mesmo servidor, links externos para qualquer lugar na Web, ou até mesmo links para um mesmo ponto dentro de uma página. Ambos dependem da tag:

<a href="nome-do-lugar-a-ser-levado">descrição</a>

- "Nome-do-lugar-a-ser-levado" você coloca o arquivo html que você quer que seja visitado, por exemplo dados.htm ou por um URL como http://www.portalmogiano.br.vg .
- "Descrição" é o que vai aparecer sublinhado na home page indicando que pode ser clicado. Por exemplo, se a descrição fosse "Clique aqui para visitar a StarMedia", você colocaria este código:

<a href="http://www.portalmogiano.br.vg">Clique aqui para visitar a Portal Mogiano </a>

Resultado: Clique aqui para visitar o Portal Mogiano

Também existem os links para fazer com que as pessoas enviem um email. Se você quer um lugar para os usuários deixarem um email, faça assim:

<a href="mailto:seu email">Deixe um email o portalmogiano@portalmogiano.zzn.com </a>

Resultado: Deixe um email para portalmogiano@portalmogiano.zzn.com!

- Dica: Se você quiser colocar um link para uma outra página dentro da sua home page, você não precisa colocar todo o endereço como http://www.portalmogiano.br.vg/~seunome/pagina.html. Basta apenas colocar o nome do arquivo e, pronto, ficaria assim:

<a href="http://portalmogiano.br.vg">Este é um link para uma página no seu site </a> - Como fazer um link abrir em outra janela?
É possível que você queira colocar um link em sua página que abra em uma outra janela para que o visitante não saia do seu site, por exemplo, colocar um link para uma home page fora do site. Fazer isso é muito simples. Basta incluir um atributo "TARGET" (alvo), assim:

<a href="http://www.portalmogiano.br.vg" target="_blank" >Clique aqui para visitar o Portal Mogiano </a>

O resultado é: Clique aqui para visitar o Portal Mogiano

Se você clicar, será aberta uma nova janela. Há outras opções que podem ser colocadas como alvos, mas isso você verá mais adiante na seção de Frames, em HTML Avançado.

- Como fazer um link para um ponto na mesma página?
É possível fazer com que clicando em um link você vá diretamente para uma determinada pate da página. Este recuso é chamado de Âncoras. Você pode saber mais sobre este recursos na seção "Avançado" na barra de navegação.

- Como fazer uma imagem ter um link
Você pode fazer com que uma imagem possa ter um link. É bem simples. Na tag de link, em vez de colocar o texto com a descrição, coloque a tag de imagem. Veja:

<A HREF="nome-do-lugar-a-ser-levado"> <IMG SRC="nome do arquivo de imagem que vai aparecer"> </A>

Em "nome-do-lugar-a-ser-levado" você coloca o arquivo html que você quer que seja visitado, por exemplo, dados.htm ou um URL como http://www.portalmogiano.br.vg. Em "nome do arquivo de imagem que vai aparecer" você deve colocar o nome correto da imagem que vai estar na página, por exemplo, "foto.gif".

Veja um exemplo de imagem com link:
<A HREF="http://www.portalmogiano.br.vg"><img src="Endereço da Imagem" width="100" height="75" alt="Esta imagem tem um link para o Portal Mogiano" border="1"></a>

O resultado é:

 

Espero que tenha ajudado a todos e meio complexo para iniciantes.

Mas com força de vontade e se gostar é um bom começo.

Quando montar seu web site ou blog me mande o endereço irei visitar.

Um abraço e boa sorte a todos:

Mandrake