bg cover

Hyperlinks e Tabelas

Prof. Me. Danilo Bueno

Hyperlinks

São o que fazem da Web uma “Web”
Usados para conectar diferentes recursos
Exemplos: links para outras páginas, para documentos, para imagens, vídeos etc.

Anatomia de um hyperlink

A tag <a> é usada para criar hyperlinks.
Atributo href: (Hypertext Reference) especifica o destino do link

<a href="https://www.ifsp.edu.br">IFSP</a>

Tipos de links

Links relativos: apontam para outras páginas dentro do mesmo site.
Links absolutos: apontam para páginas em outros sites.
Links de ancoragem (fragmentos): levam o usuário a uma seção específica da mesma página.

Caminhos e URLs

URL (Uniform Resource Locator): endereço que aponta para um recurso específico na Web.
Caminho: indicam a localização de um recurso dentro de um sistema de arquivos.
URLs usam caminhos para localizar recursos na Web.

Links relativos

Aponta para um local em relação ao arquivo do qual está vinculado
Um URL relativo apontará para diferentes lugares, dependendo da localização real do arquivo que você se refere

Links relativos

📁 meu-projeto/
├── 📄 index.html       # <-- Página principal
├── 📄 sobre-nos.html   # <-- Página secundária
├── 📁 pdf/
│   └── 📄 documento.pdf # <-- Documento PDF
└── 📂 projetos/
    └── 📄 projetos.html # <-- Página inicial da seção "projetos"

Mesmo diretório:

<!-- arquivo: index.html -->
<a href="sobre-nos.html">Sobre Nós</a>

Links relativos

📁 meu-projeto/
├── 📄 index.html       # <-- Página principal
├── 📄 sobre-nos.html   # <-- Página secundária
├── 📁 pdf/
│   └── 📄 documento.pdf # <-- Documento PDF
└── 📂 projetos/
    └── 📄 projetos.html # <-- Página inicial da seção "projetos"

Descendo para o subdiretório “pdf”:

<!-- arquivo: index.html -->
<a href="pdf/documento.pdf">Documento PDF</a>

Links relativos

📁 meu-projeto/
├── 📄 index.html       # <-- Página principal
├── 📄 sobre-nos.html   # <-- Página secundária
├── 📁 pdf/
│   └── 📄 documento.pdf # <-- Documento PDF
└── 📂 projetos/
    └── 📄 projetos.html # <-- Página inicial da seção "projetos"

Voltando para o diretório pai:

<!-- arquivo: projetos.html -->
<a href="../pdf/documento.pdf">Documento PDF</a>

Links absolutos

Aponta para um local definido por sua localização absoluta na Web, incluindo protocolo e nome de domínio.
Uma URL absoluta sempre apontará para o mesmo local, não importa onde seja usada.

<a href="https://www.ifsp.edu.br">Visite o site do IFSP</a>

Links de ancoragem

É possível vincular a uma parte específica de um documento, conhecido como fragmento de documento.
Para fazer isso, você primeiro deve criar um atributo de identificação (id) ao elemento ao qual deseja vincular.

<body>
  <h1 id="topo">Bem-vindo ao meu site</h1>
  <p>Algum conteúdo aqui...</p>
</body>

Links de ancoragem

Para criar um link que leva a esse elemento, você usa o atributo href com o valor #id-do-elemento.

<body>
  <h1 id="topo">Bem-vindo ao meu site</h1>
  <p>Algum conteúdo aqui...</p>
  <a href="#topo">Voltar ao topo</a>
</body>

Mais atributos

target="_blank": abre o link em uma nova aba do navegador.
download="nome-do-arquivo.ext": sugere que o link deve ser baixado como um arquivo com o nome especificado em vez de ser aberto no navegador.

<a href="documento.pdf" download="meu-documento.pdf">Baixar PDF</a>
<a href="https://www.ifsp.edu.br" target="_blank">Visite o IFSP</a>

bg right cover

Tabelas

Um conjunto estruturado de dados compostos de linhas e colunas

Tabelas

As informações são facilmente interpretadas pela criação de associações visuais entre linhas e colunas.
Uma tabela permite que você pesquise rapidamente e facilmente valores que indicam algum tipo de conexão entre diferentes tipos de dados
Exemplo: uma pessoa e sua idade, ou um dia ou a semana, ou o horário agendado para utilização da piscina da academia

Criando uma tabela

Tag	Descrição
`<table>`	Define a tabela
`<tr>`	Define uma linha da tabela
`<td>`	Define uma célula de dados

Observação:

O atributo border será utilizado para definir a espessura da borda da tabela - porém o correto é usar CSS para estilização.

bg right contain

<table border="1">
  <tr>
    <td>Nome</td>
    <td>Idade</td>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>25</td>
  </tr>
</table>

Cabeçalhos de tabela

<th>: células especiais que definem o tipo de dados que a linha ou coluna contém

<table border="1">
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
  ...
</table>

Mesclando células

É possível juntar várias células em uma única célula (mesclar)
Para isso, usamos os atributos:
- colspan: mesclar duas ou mais células adjacentes em uma única linha
- rowspan: mesclar células através das linhas, sendo colocadas na célula da linha superior

<table border="1">
  <tr>
    <th colspan="2">Dados Pessoais</th>
  </tr>
  <tr>
    <td>Nome</td>
    <td>Idade</td>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>25</td>
  </tr>
</table>

Mais atributos

<caption>: define um título para a tabela
<thead>: agrupa o cabeçalho da tabela
<tbody>: agrupa o corpo da tabela
<tfoot>: agrupa o rodapé da tabela

Obrigado!

[email protected] · website/docs · github