Links

Elemento Âncora

Anatomia do link:
<a href="link vem aqui">"Conteúdo"</a>

Atributos: - Globais (title, di, class); - href; - Para onde iremos ao criar o link?; - URL completa; - Fragmento; - Email; - Telefone; - Entre outros; - download; - target; - _self (padrão); - _blank (nova guia)

Utilizando a Tag Âncora

Encontre-me

Fragmento

O fragmento serve por exemplo para irmos apra outro menu do site, utilizando id juntamente do destino do fragmento. Vejamos um exemplo à seguir:

<p> Saiba mais </p>
<ul>
<li><a href="#about"> Sobre mim </li>
<li><a href="#history"> História </li>
<li><a href="#works"> Trabalhos </li>
</ul>



<h1 id="about">Sobre mim</h1>

"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ipsum, sed eaque sapiente maxime nemo, quis sequi natus, aliquam reprehenderit nihil. Impedit sequi, suscipit hic modi tempore cum numquam aut!"

<h1 id="history">História</h1>

"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit distinctio alias exercitationem cum! Quibusdam sunt perspiciatis labore quidem incidunt quis harum obcaecati asperiores possimus, a ipsum? Corrupti dolor nulla excepturi."

<h1 id="works">Trabalhos</h1>

"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab officiis nostrum natus minus in nam accusantium molestiae non, vitae, fuga aut quaerat illo numquam voluptate autem nesciunt! Asperiores, earum repellat."

Saiba Mais

Sobre mim
História
Trabalhos

Sobre mim

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias repudiandae quas in aliquam ullam dolorum, sunt necessitatibus incidunt porro voluptatem temporibus dignissimos quidem ipsa nihil illo quaerat dolorem molestiae nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quisquam maxime eaque, ex illum impedit iure voluptatibus, aliquid rem laborum incidunt non sit quia quasi voluptatem alias! Ipsa, explicabo temporibus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum vero facere repudiandae laboriosam doloribus ipsam, consequatur tempora ex iure ipsum. Veritatis vitae est officiis libero dicta id, deleniti placeat aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime cupiditate, consequuntur rerum rem officiis aliquam dicta aspernatur necessitatibus. Amet deserunt dolor dicta delectus earum quas doloremque aut voluptates quis saepe? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt maiores labore unde harum recusandae totam rem sint fugit repudiandae quam iure, ab cupiditate cumque inventore ullam tempora dolor. Quasi, labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ipsum sequi, expedita soluta natus alias. Deleniti alias enim ipsum neque nostrum sequi doloribus iste doloremque, vel corrupti ipsam aliquam qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit repellendus eveniet in numquam sequi ut pariatur voluptatum provident molestiae illo doloremque necessitatibus fuga, earum suscipit nihil architecto. Blanditiis, fugiat eos?

História

Trabalhos

Conteúdo dos Hyperlinks

- Pode-se colocar qualquer conteúdo no hpyerlink, além de ser possível colocar mais de um elemento com o mesmo hyperlink.

Exemplo:

Tanto "Rocketseat" quanto "Acesse Aqui", levarão para o mesmo destino, a Rocketseat

<a href="https://www.google.com" title="Ir para Google">
    <h3>Rocketseat</h3><br>
    <p>Acesse Aqui</p>
    <img src="https://source.unsplash.com/random" alt="">
</a>

Na prática esse código resulta no que temos abaixo:

Google

Acesse Aqui

URLs e Caminhos dos Arquivos

URL: Uniform Resource Locator

https://www.google.com
Sequência de texto que define onde algo está localizado na Web

URLs usam caminhos para encontrar arquivos

Caminhos dos Arquivos:

Onde, no explorador de arquivos, um recurso está localizado

Abaixo teremos o passo a passo para abrir Hyperlinks de arquivos

<a href="index.html" target="_blank">Ir para Página Inicial </a><br>
<a href="semântica.html" target="_blank">Ir para Elementos HTML </a><br>

Onde o citado, na prática se torna:

Ir para Página Inicial
Ir para Elementos HTML

Acessando diferentes diretórios

Vimos acima como abrir Hyperlinks de arquivos, neste tópico iremos aprender como:

Mesmo diretório
Entrando em Outro Diretório
Saindo do diretório
Diretório Raiz (pai ou root)

Mesmo Diretório

Navegando no mesmo diretório será como criar um hyperlink para ir para outro arquivo. Conforme podemos ver no exemplo abaixo:

<a href="nome_do_arquivo"> Arquivo na Mesma Pasta</a>

Neste exemplo teremos um texto que nos levará para o arquivo, que se encontra no mesmo diretório que estamos

Entrando em Diretórios

Para criarmos um link que puxe um arquivo de outro diretório, precisaremos primeiro, indicar o nome desse diretório, conforme veremos no exemplo:

<a href="nome_do_diretório/nome_do_arquivo"> Arquivo de Outro Diretório</a>
OBS.: Não esqueça do tipo de arquivo, como: ".html"

Saindo de Diretórios

Se estivermos em um diretório e precisarmos sair dela e ir para outro diretório, como por exmeplo um diretório acima, utilizamos "../" para subirmos um diretório, podemos também usar para sair de um diretório e entrar em outro.

Como no exemplo:

<a href="../nome_do_arquivo>Arquivo na Pasta Anterior</a>
Ou podemos sair do diretório atual e entrar em outro, da seguinte forma:
<a href="../Projeto/nome_do_arquivo>Arquivo na Pasta Projeto</a>

Diretório Raiz

Para pegarmos um arquivo do diretório raiz, ao em vez de usarmos "../" usamos apenas 1 (um) ponto.

Exemplo:

<a href="./nome_do_arquivo>Arquivo ### na Pasta Raiz </a>

Vale Lembrar: Trabalhando com VSCode, ele mesmo vai sugerir nome das pastas para onde ir, e seus respectivos arquivos ao entrar nela.

URLs Absolutos VS Relativos

Absolutos: Inclui protocolo e nome de domínio; Sempre apontará para o mesmo local, pois é absoluto; Relativo á página aberta no momento; Apontará para lugares diferentes

No absoluto, deve-se colocar todo o caminho do arquivo, como por exemplo:

<a=href="https://google.com"> Absoluto para ir ao Google

No relativo, ele é ligado à pasta, logo, se não houver um arquivo com o nome, ao ir para a URL, não encontrar o site, exemplo:

<a=href="google.com"> Relativo ir para o Google.