HTML códigos básicos Parte 3

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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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 é:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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 é:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

- Para se ter uma imagem centralizada:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

- "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 [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] .
- "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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Resultado: Clique aqui para visitar a StarMedia

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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Resultado: Deixe um email para mim!

- 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 [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] Basta apenas colocar o nome do arquivo e, pronto, ficaria assim:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - 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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

O resultado é: Clique aqui para visitar a StarMedia

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:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

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 [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] 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:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

O resultado é:



Repare que, além da tag "comum" de imagem, colocamos outros atributos como "border=1" (borda da imagem) , tamanho e o texto alternativo. Tudo isso você aprendeu na seção "Incluindo imagens".

- Como fazer links para download de arquivos
Para saber como fazer links para download de arquivos, você deve visitar a seção "Criar links para download" e descobrir todos os detalhes e dicas para criar os links.
Criar links para download

É provável que, depois de criar suas páginas, você queira colocar arquivos para que os visitantes façam download em sua home page. Este é um recurso bem fácil e simples. Vamos explicar.

Não existe um comando que faça o download. O que acontece é que, sempre que aparece um tipo de arquivo que o navegador não reconhece, ele automaticamente inicia o download. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele automaticamente inicia o download.

Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arquivo para download, tudo que você precisa fazer é direcionar o link para ele como se estivesse colocando um link para uma página. Exemplo: Para o download de um arquivo "exemplo.exe", o código de um link simples ficaria assim:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]