Oficina HTML 5 – Aula 3
Aula html 3
Inscreva-se no canal!

Aula 3 – Link

Introdução

Tópicos falados na aula anterior:

-Listas

  • Ordenadas:

<ol> </ol>

  • Desordenadas:

<ul> </ul>

  • Definições:

<dl> </dl>

 Tag para definir item da lista Ordenada e Desordenada <li> </li>.

Tag para expor um item </dt> e para defini-lo <dd></dd> na lista Definições.

Estrutura básica de uma página HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>Título</title>
   </head>
   <body>
  
   </body>
</html>

Dica: Recomendamos fortemente o site a seguir como fonte de estudos:

https://www.w3schools.com/html/default.asp

Links

Links são utilizados para navegar de uma página para outra, sendo formado por no mínimo 2 páginas web. Está ligação entre páginas web pode ser do mesmo site (link interno) ou de sites diferentes.

Construindo um link

Para criarmos um link, devemos utilizar a tag <a> e adicionar seus respectivos atributos, dentre destes atributos, está o atributo href com o caminho de uma página.

<a href="https://pt-br.facebook.com/">Link para o facebook</a>

Utilizando Link para o mesmo site

Caso você queira criar links entre páginas de um mesmo site você não precisa escrever o endereço completo de cada página.

<a href="file:///D:/User/Area%20de%20Trabalho/Faculdade/2022/primeiro%20semestre/gestao%20de%20projeto/aula3/link2.html">
      Ir para próxima página</a>

Se você tem duas páginas e salvou as duas em uma mesma pasta, você pode criar um link de uma página para a outra usando somente o nome do arquivo no link.

Caso uma página seja colocada dentro de outra pasta da outra página que você está utilizando, é necessário especificar nela dentro do atributo href:

<a href="pasta/link3.html"> Ir para página 3</a>

E caso você queira fazer relação dessa página para página que está fora desta pasta é necessário:

<a href="../link2.html">Retornar para página anterior</a>

Outros Atributos: Title e Target

Title: atributo é utilizado para fornecer uma breve descrição do link.

<a href="link2.html" title="Página Secundária da sua principal">Ir para próxima página</a>

Target: serve para informar onde o link do novo documento deve ser aberto, sendo possíveis os seguintes valores:

_blank (em uma nova janela ou aba)

_self (na mesma janela do documento que contém o link)

_parent (em um frame que seja o “pai” do frame* no qual o link se encontra)

_top (na mesma janela do documento que contém o link)

Nota: O desenvolvimento de sites com frames é uma técnica não é muito utilizada atualmente devido sua restrição de acessibilidade então deve-se evitar a utilização do mesmo.

Âncoras

Além de criar links para outras páginas, podemos criar links para uma determinada seção dentro da própria página na qual o link se encontra. Esse recurso chama-se ancoragem, pois as seções para as quais queremos criar um link devem possuir uma âncora, e para criarmos este recurso precisaremos do atributo id e o símbolo “#”.

Exercícios

Crie um site (com pelo menos duas páginas) sobre algo de seu interesse e utilize os conceitos da aula, certificando que haja navegação de uma página para outra e também Âncoras para voltar para o título.

Exercícios extras: https://drive.google.com/drive/folders/194ffraZNRkf9BEC7hglY6KFTf8b1toFl?usp=sharing