Curso Web Design - Aula 19 - Trabalhando com Links no HTML
Fala pessoa blz?
Estava já há algum tempo ausente mas não esquecí de vocês, eu estava trabalhando duro na montagem do Sistema Zabum, gerenciador de sites que eu um dia desses apresento melhor pra vocês. Enfim, voltando ao assunto dessa vídeo aula, iremos falar hoje sobre Links no HTML e conhecer como e quando podemos utiliza-los.
Primeiramente falei na aula sobre a tag <a> e o href, com a tag <a>, inicio a marcação de uma âncora no meu documento html, e o href indico o destino do link, o significado de href é hyper referência ou link de referência, você pode utilizar a tag <a> e o href da seguinte forma.
<a href="http://www.google.com.br">Meu 1º Link</a>No exemplo acima, podemos reparar que assim como outras tags html, a tag <a> é fechada em pares, sendo o <a> a abertura da tag e o </a> o fechamento da tag. Em href, reparem que o destino que utilizamos foi o endereço da Google, você poderá utilizar qualquer outro endereço no lugar, assim como linkar arquivos e páginas web. Aonde está escrito "Meu 1º Link" é a palavra que irá aparecer para o usuário do seu site quando ver o link, portanto use palvras que tenha relação com o que você está linkando, por exemplo no caso do link acima, estamos indicando o site da Google, a âncora que a palavra possui fica entre o meio do link, ficaria melhor se nomeassemos ela para Google, ou seja a âncora tem relação com o que estou linkando.
Como dito acima, você pode utilizar os links para linkar além de páginas, arquivos também. Veja um exemplo de linkagem de arquivo.
<a href="downloads/arquivo.rar">Baixar arquivo</a>No exemplo acima, utilizamos um exemplo de download, no caso de arquivos ".rar", eles não são interpretados pelos Browsers portanto toda vez que você linkar arquivo não interpretados por Browsers, o Browser automaticamente irá oferecer pra você a opção de realizar o Download do arquivo, para que você possa utilizar um programa específico que consiga interpretar o arquivo baixado, no caso de extenções ".rar" um programa que interpreta sua extensão é o Winrar.
Outro exemplo que você pode utilizar é imagens, além de você poder colocar palavras âncoras você pode utilizar imagens. Veja um exemplo.
<a href="http://www.google.com.br"><img src="pasta/imagem.jpg" border="0"></a>No exemplo acima ao invés de aparecer uma palavra para o usuário clicar, aparecerá uma imagem. Vale lembrar que para tirar a borda de um link com imagem, basta utilizar o atributo border="0" como no exemplo acima.
Por padrão assim como nas imagens, caso você não definir border="0", toda vez que você adicionar um link, a formatação padrão desse link será sublinhado com a cor num tom azulado.
Você pode ainda linkar um e-mail como uma forma de contato em seu site. Veja um exemplo.
<a href="mailto:fabiogoodoy@gmail.com">Fale Comigo</a>Neste exemplo acima, utilizamos após o atributo href=" o mailto: + o endereço de destino do e-mail, dessa forma quando o visitante do seu site clicar em cima deste link, abrirá automaticamente o Software de e-mail padrão da máquina do usuário (Ex: Firebid e Outlook) e com seu e-mail já no destino marcado, bastando apenas o usuário informar o assunto e a mensagem.
Falando agora sobre atributos em um link, podemos utilizar além do href que já falamos, o title que você já conheceram, responsável por colocar um titulo no link ao passar o mouse em cima, o target com o valor "_blank" que você pode utilizar em ocasiões aonde você deseja que o usuário clique no seu link mais não saia do seu site, assim o link abrirá em uma nova aba do navegador. Veja um exemplo abaixo.
<a href="http://www.google.com" title="Google" target="_blank">Google</a>E pra fechar esse post sobre links, vou falar agora sobre os Links âncoras, utilizados para nevegação direta em um determinado ponto do site, suponhamos que você possui uma lista de tópicos sobre um assunto extenso em uma página, com as âncoras você pode direcionar o usuário diretamente ao ponto da página, referente ao tópico clicado, veja um exemplo.
<a href="#google">Vá para Google</a> Conteúdo extenso em página .... <a name="google">Tópico Google</a>No exemplo acima, criamos um link e após o href=" colocamos # (hashtag) e o nome da âncora, aonde mais abaixo em <a name="google" será o destino da âncora após o usuário clicar, se você for testar como utilizar os links âncoras, certifique que conteúdo da sua página esteja extenso o suficiente para gerar scrool no seu navegador, pois assim que o usuário clicar ele chegará no destino aonde estará o <a name="google">Google</a>.
Vejam a vídeo e entenda melhor como trabalhar com os Links no HTML.
Gostou? Então compartilhe! |
