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:
descrição
Obs.:
. "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 https://www.starmedia.com;
. "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:
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:
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 https://orbita.starmedia.com/~seunome/pagina.html. Basta apenas colocar o nome do arquivo e, pronto, ficaria assim:
Este é um link para uma página no seu site
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:
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:
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 https://www.starmedia.com. 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:
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.
É 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:
Descrição do link
Observações
Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas que os navegadores, em vez de fazer o download, abrem com programas que você já tenha instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou ".mpg", o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a compactação do arquivo faz com que ele fique menor e o download demore menos tempo para ser feito.
Link para color imagem gif, com link para site
HTML
Efeitos animados
É possível animar alguns textos com tipos especiais de formatação, sempre diretamente no código fonte.
É importante notar que recursos de animação devem ser utilizados com cuidado e parcimônia, pois em uma página que já apresenta vários motivos que chamam a atenção do leitor (figuras, cores, fontes) os efeitos animados são mais um deles, e seu uso pode ocasionar um resultado final cansativo e confuso.
Blink
A formatação Blink permite que um certo texto fique piscando em uma página, como no exemplo abaixo, centralizado e em amarelo. Pode-se aplicar outros formatos como cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente.
O código é:
Novo!
Exemplo 1: Acima foi utilizado:
Exemplo 2: Segue um código para a o texto aparecer em azul "Deep Sky Blue" e em negrito:
Novo!
É recomendável que o comando blink seja usado somente em pequenos detalhes (palavras ou setas), mas não em grande número na mesma página, pois gera muito cansaço visual.
Deve-se ressaltar que nem todos os navegadores mostram o efeito dessa formatação.
Marquee
Um texto pode entrar na página e percorrê-la da direita para a esquerda ou em sentido contrário, como um letreiro. Isso é obtido usando-se a formatação Marquee.
O código é: .
Esse comando admite atributos de direção e largura do efeito as quais possibilitam várias formas de apresentação.
Também pode-se aplicar cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente.
O deslocamento pode ser só da direita para a esquerda:
Exemplo 3: Acima foi utilizado:
Pode ser utilizada uma imagem:
Acima foi utilizado:
O atributo behavior="alternate" faz com que o elemento movimentado vá e volte.
Exemplo 4: Veja um exemplo de uso do tag Marquee com uma foto grande, clicando aqui.
Outros exemplos:
1. Interferindo na direção:
a. Da esquerda para a direita. O atributo slide direction="right" faz com que o elemento siga para a direita.
Exemplo 5: Acima foi utilizado:
b. Da direita para a esquerda. O atributo slide direction="left" faz com que o elemento siga para a esquerda.
Exemplo 6: Acima foi utilizado:
2. Interferindo na velocidade:
A especificação scrollDelay=um número indica a velocidade da rolagem: quanto menor for o número, mais rapidamente o texto corre. Exemplos:
Exemplo 7: Acima foi utilizado:
Exemplo 8: Acima foi utilizado:
Se o que vai se movimentar é um texto evidentemente ele pode ser formado: Cor, tipo e tamanhos de fonte etc.
Acima foi utilizado:
3. Interferindo no sentido:
A especificação direction=up faz com que o texto fique na vertical. Nesse caso foi também centralizado e aparece na cor lilás (MediumSlateBlue). Exemplo:
CRIA SLIDE
Podemos usar a diretiva "refresh" de HTTP-EQUIV da tag para carregar em sequencia diversas páginas web, criando assim um efeito de slideshow.
Se tivermos quatro documentos que desejamos que sejam exibidos em sequencia, chamados slide1.html, slide2.html, slide3.html e slide4.html, basta colocar, em cada um deles, o código:
slide1.html
slide2.html
slide3.html
Se quisermos que do arquivo slide4.html seja exibido novamente o primeiro slide, basta colocarmos em slide4.html uma referência ao arquivo slide1.html:
A diretiva CONTENT="3 indica o número de segundos que a página deve ser exibida antes de se direcionar para a página indicada pela diretiva URL.
Você pode usar quantas páginas quiser, é só se lembrar de fazer o encadeamento corretamente. O número de segundos varia conforme a sua necessidade. Eu uso com frequencia o valor zero, para direcionar imediatamente sem a exibição de uma página intermediária. As possibilidades são muitas, depende da sua criatividade :-)
OUTRO
ANIMAÇAO DE TEXTO
Este artigo serve para as pessoas que trabalham somente com HTML ao fazer páginas web e que querem incorporar um tipo simples de animação em seus sites. Uma soluçãofácil para fazer uma animação com HTML é fazer uso de Marquee. Há pouco tempo recebemos um e-mail de Carlos López Schmidt no qual nos sugeria um truque para animar imagens em páginas web utilizando marquee. Como não tínhamos nenhuma explicação sobre a etiqueta HTML
- Marquee não está compreendido nos padrões HTML.
- Utilizar Marquee pode ter problemas de acessibilidade, ou seja, pode ser difícil de ler para determinadas pessoas com deficiências.
- O fato de animar elementos de uma página favorece o dinamismo e ajuda a chamar atenção sobre determinadas mensagens ou imagens, porém, se utilizar marquee em muitos lugares pode provocar confusão e cansar o usuário.
Para utilizar marquee, simplesmente colocamos dentro da etiqueta os conteúdos que queremos que se movam, já sejam texto, imagens ou qualquer outro tipo de conteúdo. Algo como isto:
Porém, também poderíamos colocar algo como isto: