Neste Tutorial de CSS de nosso curso, vamos aprender um pouco mais como estilizar links através do CSS.
Botão criado estilizando links com CSS
Aprenderemos como retirar sublinhado, inserir, mudar cor do link, inserir uma cor de plano de fundo, bordas etc. Você verá como essas opções do CSS nos permitirão estilizar nossos links das mais diversas maneiras, ao gosto do webmaster / webdesigner.
Lembrando que links também podem ser vistos como textos, textos com características especiais, mas são textos. Ou seja, também podemos aplicar as propriedades do CSS que aplicamos nos textos.
E é basicamente isso que faremos neste tutorial.
Usar diversas propriedades do CSS nos links, e veremos as inúmeras possibilidades que temos de estilizar os hiperlinks.
Neste tutorial de nosso Curso de HTML & CSS, vamos aprender a trabalhar exclusivamente em cima dos links, e veremos uma gama de possibilidades de estilização dos hiperlinks através do CSS (especificamente, através das propriedades link, visited, hover e active.
Os dois principais pilares da internet são, sem dúvidas, a informação e a ligação desses dados.
De nada adianta um importante centro de pesquisas fazer estudos e descobertas, se não tiver como compartilhar essas informações com outras pessoas e instituições.
E quando falamos em compartilhar informações, estamos falando dos links.
Os links são os responsáveis por levar uma pessoa de um local da rede para outro.
Quando queremos mostrar algo para alguém, passamos o link.
Quando queremos mostrar pro leitor que ele pode se informar mais sobre um assunto em outra página, fazemos isso criando um link.
Ou seja, o link tem o efeito de ligar uma página na outra, e esse conceito é um dos mais importantes em termos de criação de sites.
Por links serem tão especiais, é natural que devamos destacar, mostrar para os leitores e deixar bem claro que aquilo é um link, é um elo, uma âncora que poderá levar ele para outro local, onde ele poderá obter mais informação.
E é isso que iremos fazer neste tutorial de CSS, que é destacar, tratar diferente os links.
Como sempre, com o CSS nós temos bem mais flexibilidade e recursos do que com o HTML puro.
Existem quatro tipos de comportamentos de links.
O primeiro é antes de de interagirmos com o link, quando não clicamos nem passamos o mouse e é a primeira vez que vemos aquele link.
O segundo comportamento é quando passamos o mouse em cima do link.
A terceira interação ocorre quando estamos clicando no link.
E por fim, a última possibilidade de interação com links é quando nos deparamos com um link cuja página de destino já foi visitada por nós.
A propriedade link do CSS
A primeira interação com os links é feita através do seletor pseudo-classe :link
Quando colocamos esse seletor em uma tag <a>, é porque vamos estilizar aquele link somente quando o usuário não tiver interagido com o link.
Assim, se quisermos que um link tenha a cor azul antes de ser clicado, fazemos:
a:link{color:#00F;}
A propriedade hover do CSS
Caso usemos o seletor :hover na tag <a>, a estilização feita nesse elemento terá efeito quando passarmos o mouse em cima dele.
Por exemplo, para que o link que antes era azul, se torne verde ao pousarmos o mouse em cima, o código CSS é:
a:hover{color:#0F0;}
A propriedade visited do CSS
Com certeza você já notou que ao entrar em alguns sites, os links que você já visitou a página de destino tinha um aspecto diferente.
Por exemplo, geralmente os links que você nunca visitou são azuis e os links que você já visitou são vermelhos.
Para definirmos a estilização de um link que já foi clicado, usamos a propriedade :visited
Assim, para o link visitado ser vermelho, usamos o código:
a:visited{color:#F00;}
A propriedade active do CSS
Por fim, uma ferramenta pouco conhecida e usada é o seletor :active, que irá atuar na estilização DURANTE o ato de clicar.
Como geralmente esse ato é bem rápido, essa propriedade é pouquíssimo usada.
Para ver ela funcionando, clique no link e segure, e verá que a estilização do CSS para :active foi realmente definida.
Por exemplo, para que um link se torne da cor preta durante o ato de clicar, usamos o código CSS:
Uma das coisas mais fantásticas do CSS, além de permitir que os webmaster estilizem zilhões de páginas com pouco código, foi a capacidade de se criar efeitos especiais que antes só eram possível através de uma linguagem de programação, como o JavaScript.
Neste Tutorial de CSS de nossa apostila, vamos aprender o que são e como usar as pseudo-classes e -elementos, que nos permitirão criar diversos efeitos com os mais variados elementos do HTML, como em menus, links, formulários etc.
No decorrer de nosso curso de HTML, sempre que aprendermos algo vamos colocar esses conhecimentos em prática para criar sites interessantes e realmente úteis, afinal, ninguém gosta só de teoria.
Vamos fazer, e ensinar você a fazer, e ver com seus próprios olhos os resultados de seus estudos em HTML.
Nessa aula, vamos usar o que aprendemos sobre links em HTML e sobre redirecionamento de sites, para criar duas páginas e fazer elas ficarem redirecionando uma para outra, indefinidamente.
Vamos ver que links não se resumem somente a endereços de internet e aprenderemos uma importante lição sobre arquivos que estão em um mesmo diretório.
Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:
Quando falamos em links, sempre associamos a sites existentes na internet.
Mas na verdade, os links tem um sentido mais geral, eles se referem a endereços. Como exemplo disto, neste tutorial de nosso curso, vamos usar endereços internos de seu computador na <meta> tag refresh, ao invés de endereços de internet, como havíamos feito na aula sobre essa meta tag.
Se você usa o Windows, o endereço de seu disco HD é C:\
E a o endereço da pasta principal é C:\Windows
Se você usa Linux, o endereço de sua pasta é: /home/nome
E o endereço de sua pasta de downloads é: /home/nome/Download
Vamos usar endereços internos, de seu computador, para fazer o exemplo deste tutorial de HTML.
No caso, vamos criar duas páginas de em HTML, e vamos deixar elas na mesma pasta, ou seja, no mesmo diretório.
Quando dois elementos (imagem, som, vídeo, página) estão em um mesmo diretório, não precisamos escrever toda a URL, só o nome do arquivo.
Por exemplo, vamos supor que as páginas HTML.html e Progressivo.html estejam na pasta C:\ de seu computador.
Uma pode ser referir a outra com os endereços "HTML.hml" e "Progressivo.html", ao invés de "C:\HTML.html" e "C:\Progressivo.html".
Suponha que existam duas páginas: www.htmlprogressivo.net/curso.html www.htmlprogressivo.net/tutorial.html
Se quisermos linkar uma página a outra, podemos usar somente os endereços "curso.html" e "tutorial.html", pois ambos arquivos de HTML estão no mesmo diretório (htprogressivo.net/).
Exemplos de sites em HTML
Tendo estudado essa teoria, vamos criar duas páginas para exercitar esses conceitos de links como endereços internos de sua máquina e sobre o uso de páginas de HTML em um mesmo diretório
Uma página se chamará "Ping.html" e a outra se chamará "Pong.html".
O conteúdo delas é bem simples, elas vão aguardar 1 segundo e vão, automaticamente, redirecionar para a outra página.
Vamos usar a meta tag refresh para isso.
Note que a url da meta tag refresh é somente o nome do arquivo .html, pois eles estão no mesmo diretório.
Rode qualquer um dos arquivos que você verá o resultado:
Um ping-pong, onde uma página fica jogando pra outra, infinitamente...
Exercício sobre páginas de um mesmo diretório:
Substitua "Ping.html" e "Pong.html" pelo seus endereços completos da localização deles em seu computador (por exemplo, C:\Curso_de_HTML\Basico\Ping.html)
Exercício 2 de HTML:
Dentro do diretório onde esses dois sites estão, crie um diretório chamado teste.
Agora cole o site Pong.html dentro desta pasta 'teste'.
Agora altere o código HTML de modo a continuar o Ping-Pong infinito. Você não precisa colocar o endereço completo dos arquivos, use "Ping.html" e "teste/Pong.html".
Embora seja simples e bem básica, essa aula sobre links é provavelmente a mais importante em nosso curso de HTML, pois toda a internet se baseia no conceito de links, de tão importantes e essenciais ao HTML que eles são.
Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:
Link, em inglês, significa ligação, elo ou conexão.
E é isso que os links fazem em HTML, eles conectam uma página da internet até outra, eles levam o usuário de um local a outro.
Um link pode ser um uma página HTML, uma imagem, um e-mail, um endereço de FTP etc.
Os links são, portanto, um endereço, uma referência de um 'local' para outro.
Para que serve um link
Com certeza já entrou em algum site de notícia, deu uma olhada e clicou naquilo que mais te interessa.
Esse local onde você clicou é um link, que pode estar em forma de texto (geralmente sublinhado) ou uma imagem.
Quando posicionamos o mouse em cima de link, a seta do mouse geralmente vira uma 'mãozinha', o que sinaliza ao usuário leigo que aquilo é um link.
Você usa um link quando procura algo no google, e clica no resultado desejado.
Quando abre seu e-mail, e clica em "Caixa de Entrada", está usando um link.
Também quando clica em 'curtir' no Facebook, está usando um link também.
Enfim, poderíamos criar um site somente para falar sobre o uso e importância dos links, mas com certeza você já deve ter certeza disso.
Portanto, durante todo nosso curso de HTML, vamos falar dos links, tags que envolvem links, atributos e várias outras coisas que envolvem links.
A tag âncora <a> </a> - Como criar um link em HTML
Sim, para criar um link vamos usar mais uma tag, chamada anchor tag: <a>
Porém, você não verá seu uso sozinha, sem atributos.
Como dissemos previamente, o uso dos links são inúmeros, bem como a quantidade de atributos dessa tag.
Por hora, nesse artigo de HTML, vamos aprender a maneira mais simples e usar de criar um link, com o atributo href.
A sintaxe é:
<a href="URL do site"> Texto visível </a>
Ou seja, se você estudou os outros tutoriais de nosso curso, não verá nenhum problema sobre o uso dessa tag.
Vamos criar o código de um link para o HTML Progressivo, o código seria: <a href="http://www.htmlprogressivo.net/"> HTML Progressivo </a>
É bem comum o seguinte código HTML para um link: <a href="http://www.htmlprogressivo.net/"> clique aqui </a>
O resultado seria:
E isso é bem comum em textos do tipo: "Se quiser acessar um curso de HTML gratuito e online, clique aqui."
Ou seja, não importa o que você escreve entre as tags <a> </a>, é apenas a parte visível ao usuário.
Exemplo de código HTML:
Vamos criar um site baseado nos conhecimentos ensinados até o momento, em nossa apostila online de HTML.
Nessa página, vamos descrever nosso curso de HTML, com vários links, vamos usar as meta tags keyword e description, <html>, <body>, título e, claro, as tags âncora de lin <a>:
<!DOCTYPE html><html><head><metaname="description"content="Curso de HTML, CSS, SEO e Monetização! Online completo e gratuito"><metaname="keywords"content="HTML, CSS, SEO, Monetização, Curso, Apostila, Online, Grátis"><title> HTML Progressivo - Curso de HTML completo, online e gratuito </title></head><body>
Conheça o site <ahref="http://www.htmlprogressivo.net/">HTML Progressivo</a>, um site que oferece um curso de HTML totalmente gratuito e online. <p>
No site HTML Progressivo, você não aprende somente a criar sites, mas também sobre <ahref="http://www.htmlprogressivo.net/p/seo-trabalhando-com-o-google.html">SEO</a> e <ahref="http://www.htmlprogressivo.net/p/monetizacao-de-sites_12.html">Monetização</a>.
</body></html>
Salvem o arquivo com a extensão .html e cliquem no arquivo, para ver os sites que criou.
O resultado visto será o seguinte:
Conheça o site HTML Progressivo, um site que oferece um curso de HTML totalmente gratuito e online.
No site HTML Progressivo, você não aprende somente a criar sites, mas também sobre SEO e Monetização.
Exercício sobre links em HTML:
Crie uma página completa, com as tags <html>, <head> e <body>, bem como as meta tags description e keywords, título e com 3 links.
No texto de seu site, descreve estes 3 links, e use-os como foi mostrado no exemplo passado.
Use a tag <br> para pular de linha, ou <p> para pular para o próximo parágrafo.
