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
