Links<\/p>\n
Nesta li\u00e7\u00e3o voc\u00ea aprender\u00e1 como construir links entre p\u00e1ginas.<\/p>\n
O que eu preciso para construir um link?<\/p>\n
Para construir um link voc\u00ea usa o que tem usado at\u00e9 agora para codificar HTML: uma tag. Uma simples e pequenina tag com um elemento e um atributo \u00e9 suficiente para voc\u00ea construir links para onde quiser. A seguir um exemplo de link para o site HTML.net:<\/p>\n
Exemplo 1:<\/p>\n
<a href=\"http:\/\/www.html.net\/\">Aqui um link para HTML.net<\/a>\n<\/code><\/pre>\nSer\u00e1 renderizado no navegador assim:<\/p>\n
Aqui um link para HTML.net<\/a><\/p>\nO elemento a refere-se a “anchor” – \u00e2ncora . O atribuito href \u00e9 abrevia\u00e7\u00e3o para “hypertext reference” – refer\u00eancia a hypertexto – e especifica o destino do link – que normalmente \u00e9 um endere\u00e7o na Internet ou um arquivo.<\/p>\n
No exemplo acima o atributo href tem o valor “http:\/\/www.html.net”, que \u00e9 o endere\u00e7o completo do site HTML.net e \u00e9 chamado de URL (Uniform Resource Locator). Notar que “http:\/\/” deve sempre ser incluido nas URLs. A frase “Aqui um link para HTML.net” \u00e9 o texto mostrado no navegador como link. Lembre-se de fechar a tag com um .<\/p>\n
Como s\u00e3o os links entre minhas pr\u00f3prias p\u00e1ginas?<\/p>\n
Se voc\u00ea quer construir links entre p\u00e1ginas de um mesmo website voc\u00ea n\u00e3o precisa escrever o endere\u00e7o completo de cada p\u00e1gina (URL). Por exemplo, se voc\u00ea tem duas p\u00e1ginas (vamos cham\u00e1-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diret\u00f3rio voc\u00ea constr\u00f3i um link de uma para a outra usando somente o nome do arquivo no link. Nestas condi\u00e7\u00f5es, um link da p\u00e1gina1.htm para a pagina2.htm \u00e9 como mostrado abaixo:<\/p>\n
Exemplo 2:<\/p>\n
\n<a href=\"page2.htm\">Aqui um link para a pagina 2<\/a>\n<\/code>\n<\/pre>\nSe a pagina2 for colocada em um subdiret\u00f3rio (chamado de “subdiretorio”), o link \u00e9 como mostrado abaixo:<\/p>\n
Exemplo 3:<\/p>\n
\n<a href=\"subdiretorio\/pagina2.htm\">Aqui um link para a pagina 2<\/a>\n<\/code>\n<\/pre>\nPor outro lado, um link da pagina2 no “subdiretorio” para a pagina1 \u00e9 como mostrado a seguir:<\/p>\n
Exemplo 4:<\/p>\n
\n<a href=\"..\/pagina1.htm\">Aqui um link para a pagina 1<\/a>\n<\/code>\n<\/pre>\n“..\/” aponta para o diret\u00f3rio a um n\u00edvel acima do arquivo onde foi feito o link. Seguindo o mesmo princ\u00edpio voc\u00ea pode apontar para dois (ou mais) n\u00edveis acima, escrevendo “..\/..\/”.<\/p>\n
Voc\u00ea entendeu? Como alternativa voc\u00ea pode usar sempre o endere\u00e7o completo do arquivo (URL).<\/p>\n
Como s\u00e3o os links dentro de uma mesma p\u00e1gina?<\/p>\n
Voc\u00ea pode criar links internos, dentro da pr\u00f3pria p\u00e1gina – por exemplo, uma tabela de conte\u00fados ou \u00edndice com links para cada um dos cap\u00edtulos em uma p\u00e1gina. Tudo o que voc\u00ea precisa \u00e9 usar o atributo id e o s\u00edmbolo “#”.<\/p>\n
Use o atributo id para marcar o elemento que \u00e9 o destino do link. Por exemplo:<\/p>\n
\n<h1 id=\"heading1\">Cabe\u00e7alho 1<\/h1>\n<\/code>\n<\/pre>\nVoc\u00ea agora pode criar um link que leve \u00e0quele elemento usando o s\u00edmbolo “#” no atributo do link. O s\u00edmbolo “#” informa ao navegador para ficar na mesma p\u00e1gina que est\u00e1. O s\u00edmbolo “#” deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo:<\/p>\n
\n<a href=\"#heading1\">Link para o cabe\u00e7alho 1<\/a>\n<\/code>\n<\/pre>\nTudo fica claro com um exemplo:<\/p>\n
Exemplo 5:<\/p>\n
\n<html>\n \n <head>\n <\/head>\n \n <body>\n \n <p><a href=\"#heading1\">Link para cabe\u00e7alho 1<\/a><\/p>\n <p><a href=\"#heading2\">Link para cabe\u00e7alho 2<\/a><\/p>\n \n <h1 id=\"heading1\">Cabe\u00e7alho 1<\/h1>\n <p>Texto texto texto texto<\/p>\n \n <h1 id=\"heading2\">Cabe\u00e7alho 2<\/h1>\n <p>Texto texto texto texto<\/p>\n \n <\/body>\n \n<\/html>\n<\/code>\n<\/pre>\nSer\u00e1 renderizado no navegador assim (clique nos dois links):<\/p>\n
Link para cabe\u00e7alho 1<\/a><\/p>\nLink para cabe\u00e7alho 2 <\/a><\/p>\nCabe\u00e7alho 1<\/h1>\n
Texto texto texto texto<\/p>\n
Cabe\u00e7alho 2<\/h1>\n
Texto texto texto texto<\/p>\n
(Nota: O nome de um atributo id deve come\u00e7ar com uma letra)<\/p>\n
Posso criar link para mais alguma coisa?<\/p>\n
Voc\u00ea pode criar link para um endere\u00e7o de e-mail. Isto \u00e9 feito de modo semelhante aos links para documentos.<\/p>\n
Exemplo 6:<\/p>\n
\n<a href=\"mailto:nobody@html.net\">Enviar e-mail para nobody em HTML.net<\/a>\n<\/code>\n<\/pre>\nSer\u00e1 renderizado no navegador assim:<\/p>\n