Links e listas

Listas

As listas são utilizadas para agrupar e organizar itens relacionados. Existem três tipos principais de listas em HTML:

Tipos	Tags
Lista ordenada	`<ol>`, `<li>`
Lista não ordenada	`<ul>`, `<li>`
Lista de descrição	`<dl>`, `<dt>`, `<dd>`

Listas ordenadas

Listas em que cada item é numerado automaticamente. Muito usadas para representar etapas ou cláusulas.

<ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ol>

<ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ol>

É possível especificar o tipo de numeração com o atributo type:

<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
</ol>

<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
</ol>

Listas não ordenadas

Usam marcadores (como círculos ou quadrados) ao invés de números.

<ul>
  <li>Maçã</li>
  <li>Banana</li>
  <li>Laranja</li>
</ul>

<ul>
  <li>Maçã</li>
  <li>Banana</li>
  <li>Laranja</li>
</ul>

O atributo type também pode ser usado para definir o estilo do marcador (não suportado em HTML5):

<ul type="square">
  <li>Item com quadrado</li>
</ul>

<ul type="square">
  <li>Item com quadrado</li>
</ul>

Listas de definição

Utilizadas para listar termos e suas definições.

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação para a web.</dd>
 
  <dt>CSS</dt>
  <dd>Folhas de estilo em cascata.</dd>
</dl>

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação para a web.</dd>
 
  <dt>CSS</dt>
  <dd>Folhas de estilo em cascata.</dd>
</dl>

Listas aninhadas

Listas podem conter outras listas:

<ul>
  <li>Frutas
    <ol>
      <li>Maçã</li>
      <li>Banana</li>
    </ol>
  </li>
</ul>

<ul>
  <li>Frutas
    <ol>
      <li>Maçã</li>
      <li>Banana</li>
    </ol>
  </li>
</ul>

Prática: Criando uma página HTML com listas

<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo de Listas</title>
  </head>
  <body>
    <h1>Listas em HTML</h1>
 
    <h2>Lista Ordenada</h2>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
 
    <h2>Lista Não Ordenada</h2>
    <ul>
      <li>Item A</li>
      <li>Item B</li>
    </ul>
 
    <h2>Lista de Definição</h2>
    <dl>
      <dt>Termo</dt>
      <dd>Definição do termo.</dd>
    </dl>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo de Listas</title>
  </head>
  <body>
    <h1>Listas em HTML</h1>
 
    <h2>Lista Ordenada</h2>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
 
    <h2>Lista Não Ordenada</h2>
    <ul>
      <li>Item A</li>
      <li>Item B</li>
    </ul>
 
    <h2>Lista de Definição</h2>
    <dl>
      <dt>Termo</dt>
      <dd>Definição do termo.</dd>
    </dl>
  </body>
</html>

Links

Links facilitam a navegação na web. Podem apontar para:

Sites externos
Páginas internas
Seções da mesma página
Abrir em nova aba
Enviar e-mail

Sintaxe Básica

<a href="url">content</a>

Sintaxe Básica

<a href="url">content</a>

Link para site externo

<a href="https://www.exemplo.com">Visitar site externo</a>

<a href="https://www.exemplo.com">Visitar site externo</a>

Link externo:

hyperlink-external

Lista ifpb

<a href="http://www.ifpb.edu.br/">ifpb</a>

<a href="http://www.ifpb.edu.br/">ifpb</a>

Link para páginas internas

Estrutura da URL

                                                 query
 schema      domain   port        path           string   fragment
┌───┴──┐┌──────┴─────┐┌┴┐┌─────────┴──────────┐┌───┴────┐┌───┴────┐
https://ifpb.github.io:80/dw/html/introduction/?name=ifpb#hyperlink

Estrutura da URL

                                                 query
 schema      domain   port        path           string   fragment
┌───┴──┐┌──────┴─────┐┌┴┐┌─────────┴──────────┐┌───┴────┐┌───┴────┐
https://ifpb.github.io:80/dw/html/introduction/?name=ifpb#hyperlink

Com URLs relativas, você pode navegar dentro do seu site.

Mesma pasta:

<a href="pagina.html">Abrir página</a>

<a href="pagina.html">Abrir página</a>

Pasta filha:

<a href="subpasta/arquivo.html">Ir para subpasta</a>

<a href="subpasta/arquivo.html">Ir para subpasta</a>

Pasta mãe:

<a href="../index.html">Voltar</a>

<a href="../index.html">Voltar</a>

Pasta avó:

<a href="../../index.html">Voltar duas pastas</a>

<a href="../../index.html">Voltar duas pastas</a>

Exemplos

<a href="index.html">Rever</a>
<a href="musica/listings.html">Listagens</a>
<a href="filmes/dvd/reviews.html">Rever DVD</a>
<a href="../index.html">Página Inicial</a>
<a href="../../index.html">Página Inicial (2 níveis acima)</a>

<a href="index.html">Rever</a>
<a href="musica/listings.html">Listagens</a>
<a href="filmes/dvd/reviews.html">Rever DVD</a>
<a href="../index.html">Página Inicial</a>
<a href="../../index.html">Página Inicial (2 níveis acima)</a>

Arquivos

hyperlink-pages
├── index.html
└── pages
    └── page.html

Arquivos

hyperlink-pages
├── index.html
└── pages
    └── page.html

hyperlink-pages

<h1>Index</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="pages/page.html">Index 2 Page</a><br />
  <a href="./pages/page.html">Index 2 Page</a><br />
 
  <!-- Endereço absoluto (page.html) -->
  <a href="/pweb1/codes/html/introduction/hyperlink-pages/pages/page.html">
    Index 2 Page
  </a>
</p>

<h1>Index</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="pages/page.html">Index 2 Page</a><br />
  <a href="./pages/page.html">Index 2 Page</a><br />
 
  <!-- Endereço absoluto (page.html) -->
  <a href="/pweb1/codes/html/introduction/hyperlink-pages/pages/page.html">
    Index 2 Page
  </a>
</p>

pages

<h1>Page</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="../index.html">Page 2 Index</a><br />
 
  <!-- Endereço absoluto (index.html) -->
  <a href="/pweb1/codes/html/introduction/hyperlink-pages/index.html">
    Page 2 Index
  </a>
</p>

<h1>Page</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="../index.html">Page 2 Index</a><br />
 
  <!-- Endereço absoluto (index.html) -->
  <a href="/pweb1/codes/html/introduction/hyperlink-pages/index.html">
    Page 2 Index
  </a>
</p>

Link de email

<a href="mailto:contato@exemplo.com">Enviar e-mail</a>

<a href="mailto:contato@exemplo.com">Enviar e-mail</a>

Abrir link em nova aba

hyperlink-target

Lista ifpb

<a href="http://www.ifpb.edu.br/" target="_blank">ifpb</a>

<a href="http://www.ifpb.edu.br/" target="_blank">ifpb</a>

Link para parte específica da mesma página

<a href="#secao1">Ir para a Seção 1</a>
 
...
 
<h2 id="secao1">Seção 1</h2>

<a href="#secao1">Ir para a Seção 1</a>
 
...
 
<h2 id="secao1">Seção 1</h2>

hyperlink-fragment

<nav>
  <a href="#tags">Tags</a><br />
  <a href="#atributo-de-tag">Atributo de tag</a><br />
  <a href="#entidade-do-html">Entidade do HTML</a>
</nav>
 
<h3 id="tags">Tags</h3>
<p>...</p>
 
<h3 id="atributo-de-tag">Atributo de tag</h3>
<p>...</p>
 
<h3 id="entidade-do-html">Entidade do HTML</h3>
<p>...</p>

<nav>
  <a href="#tags">Tags</a><br />
  <a href="#atributo-de-tag">Atributo de tag</a><br />
  <a href="#entidade-do-html">Entidade do HTML</a>
</nav>
 
<h3 id="tags">Tags</h3>
<p>...</p>
 
<h3 id="atributo-de-tag">Atributo de tag</h3>
<p>...</p>
 
<h3 id="entidade-do-html">Entidade do HTML</h3>
<p>...</p>

Link para parte específica de outra página

<a href="outra-pagina.html#topo">Ir para o topo</a>

<a href="outra-pagina.html#topo">Ir para o topo</a>

Prática: Criando uma página HTML com links

<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo de Links</title>
  </head>
  <body>
    <h1>Página com Links</h1>
 
    <a href="sobre.html">Página Sobre</a><br>
    <a href="mailto:exemplo@email.com">Enviar e-mail</a><br>
    <a href="#fim">Ir para o fim da página</a>
 
    <p id="fim">Você chegou ao final!</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo de Links</title>
  </head>
  <body>
    <h1>Página com Links</h1>
 
    <a href="sobre.html">Página Sobre</a><br>
    <a href="mailto:exemplo@email.com">Enviar e-mail</a><br>
    <a href="#fim">Ir para o fim da página</a>
 
    <p id="fim">Você chegou ao final!</p>
  </body>
</html>

Juntando tudo:

list

<!-- Ordered List - OL -->
<h1>Developer Roles</h1>
<ol>
  <li>Web developer</li>
  <li>Desktop applications developer</li>
  <li>Mobile developer</li>
</ol>
 
<!-- Unordered List - UL -->
<h1>Browser Market Share</h1>
<ul>
  <li>Chrome</li>
  <li>Safari</li>
  <li>Edge</li>
  <li>Firefox</li>
</ul>
 
<p>
  Fonte: (<a
    href="https://en.wikipedia.org/wiki/Usage_share_of_web_browsers"
    >Wikipedia</a
  >)
</p>
 
<!-- Description List - DL -->
<h1>Web Terms</h1>
<dl>
  <dt>HTTP</dt>
  <dd>HyperText Transfer Protocol</dd>
  <dt>URL</dt>
  <dd>Uniform Resource Locator</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>JavaScript</dd>
</dl>

<!-- Ordered List - OL -->
<h1>Developer Roles</h1>
<ol>
  <li>Web developer</li>
  <li>Desktop applications developer</li>
  <li>Mobile developer</li>
</ol>
 
<!-- Unordered List - UL -->
<h1>Browser Market Share</h1>
<ul>
  <li>Chrome</li>
  <li>Safari</li>
  <li>Edge</li>
  <li>Firefox</li>
</ul>
 
<p>
  Fonte: (<a
    href="https://en.wikipedia.org/wiki/Usage_share_of_web_browsers"
    >Wikipedia</a
  >)
</p>
 
<!-- Description List - DL -->
<h1>Web Terms</h1>
<dl>
  <dt>HTTP</dt>
  <dd>HyperText Transfer Protocol</dd>
  <dt>URL</dt>
  <dd>Uniform Resource Locator</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>JavaScript</dd>
</dl>

Editar esta página