Quer descobrir qual foi o dia da semana de um ano que já passou?
Não, não precisa voltar o relógio do computador para fazer isto, existe um site que facilita este trabalho pra gente, e o link segue abaixo:
E esta foi a dica do dia!
xD
sanoj
Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!
ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!
Um link é um elemento que “te leva” da página que você está (origem) para uma outra página, um arquivo de áudio, um download, um vídeo, etc que é o destino. Sem os links uma página ficaria estacionada na página inicial, e todo seu conteúdo deveria ser montado na mesma.
A tag utilizada para inserir um link em um arquivo é <a>. Apartir dela podemos criar um link, mas somente esta tag não faz nada sozinha, precisamos dizer a ela qual será o destino, para isso podemos utilizar os seguintes atributos:
Segue abaixo um exemplo. Como de costume copie o código e cole no Bloco de Notas, salvando como teste6.html:
<html> <head> <title> Teste 6 </title> </head> <body> <p> <a href="http://www.uol.com.br"> Este é um link que leva para uma página externa, no nosso caso leva para o portal de notícias da uol. </a> </p> <p> <a href="home.html"> Para este link funcionar, crie um arquivo em branco e salve como home.html e salve no mesmo lugar que o exemplo 6 foi salvo. A diferença deste link para o link externo esta no caminho do link. Quando eu desejo criar um link externo eu devo utilizar todo o caminho do link, com http e tudo mais, já para criar um link para a mesma página, basta utilizar o nome do arquivo.extensão; </a> </p> <p> <b> Âncoras </b> </p> <p> A tag <a> em html é descrita em algumas fontes como âncora, porém eu acho que o termo cabe mais a um tipo específico de link, que é utilizado para apontar para uma outra parte de um texto dentro da minha própria página. Esta facilidade permite fazermos uma série de coisas, como por exemplo, dividir um tutorial em capítulos: </p> <p> <a name=topo> </a> <a href="#capitulo1"> Capítulo 1 </a> <br> <a href="#capitulo2"> Capítulo 2 </a> <br> <a href="#capitulo3"> Capítulo 3 </a> </p> <p> <a name=capitulo1> Conteúdo do capítulo 1 </a> </p> <p> Cole aqui um texto qualquer para o exemplo funcionar melhor! </p> <p> <a name=capitulo2> Conteúdo do capítulo 2 </a> </p> <p>Cole aqui um texto qualquer para o exemplo funcionar melhor!</p> <p> <a name=capitulo3> Conteúdo do capítulo 3 </a> </p> <p> <a href=#topo> Voltar para o topo </a> </p> </body> </html>
Os primeiros links são bem fáceis de entender, são links que apontam respectivamente para um outro site da internet e para uma outra página do nosso site, agora o link que aponta para um outro lugar da mesma página (o exemplo dos capítulo) merece uma atenção especial.
Note que a primeira parte <a href=”#capitulo1″>Capítulo 1</a> é um link normal, a única diferença dos demais é que o seu endereço deve ser precedido do caractere # (que indica que o link é uma “âncora”).
Para este link funcionar, devemos colocar uma outra tag que faz par com ele no destino da âncora, a tag <a> com o atributo name preenchida com o mesmo nome do link (no caso do exemplo capitulo1), que foi utilizada no exemplo. Deixando o link sem um destino, ou seja, declarar um <a href=”#”> sem colocar um <a name> é deixar um link quebrado, evite isto ao máximo porque tira a credibilidade das páginas!
Vale lembrar que se eu quisesse ter um link que voltasse para o menu de capítulos (para evitar usar a barra de rolagem do navegador) bastaria adicionar um outro “name” em cada capítulo e fazer um botão voltar no final do texto de cada um, assim como foi feito no exemplo.
Link para um endereço de email
Este é um link que vai abrir um gerenciador de email com o endereço do destinatário já preenchido, facilitando assim o trabalho do usuário, segue um trecho de exemplo:
<a href="mailto:teste@seuservidor.com.br">
Me mande um email!
</a>Para finalizar esta parte de links, vale lembrar um outro atributo que podemos usar dentro da tag <a> que é o target. O target decide o destino do link, ou seja, se ele vai abrir na mesma janela do navegador ou em uma nova janela ou frame, segue abaixo a lista de possibilidades, teste cada uma delas para entender melhor:
A sintaxe para utilizar o target é a seguinte:
<a href="destino.html" target="_blank">
Link
</a>Links para outros arquivos
Nós temos também a opção de fazer um link para um arquivo de áudio, de vídeo, planília do excel, documento word, etc. A única coisa que muda de um link normal é que devemos colocar sempre o nome do arquivo .extensão como no trecho abaixo:
<p>
<a href="http://www.meusite.com.br/documentoword.doc>
Link para meu documento word
</a>
</p>Se fosse um arquivo de áudio a diferença seria somente a extensão. Esta teoria serve para qualquer tipo de arquivo, mas é melhor testar antes porque os navegadores tratam este tipo de link de maneiras diferentes.
Com isto fechamos tutorial de links, até a próxima!
😉
Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!
Sanoj's devLab 