Conectando páginas

Sabemos que nossos sites são um conjunto de páginas conectadas. Quando vamos construir um novo site, precisamos organizar bem nossos arquivos.

- E se quisermos incluir links dentro desse site?

- E se quisermos dividi-lo em mais páginas?

Estruturando pastas

Essa é a estrutura atual da nossa página

Malala

index.html

estilos.css

imagem.jpg

Malala

index.html

estilos.css

imagem.jpg

Estruturando pastas

Poderíamos divida-la em várias!

Malala

index.html

estilos.css

imagem.jpg

Malala

index.html

sobre.html

premiacoes.html

estilos.css

imagem.jpg

sobre.html

premiacoes.html

Vamos praticar?

Criando links

Qualquer coisa que aparece entre a abertura e fechamento de tags <a>
é a parte que será um link clicável na página.

<p>Esse é um exemplo de palavra <a href="www.exemplo.com"> clicável </a>.</p>

Esse é um exemplo de palavra clicável

.

endereço

tag de abertura

tag de fechamento

Adicionando imagens

<img src="http://www.vainaweb.com.br/img/vainaweb.svg" alt="logo">

uma descrição

endereço

tag somente

de abertura

Links e imagens

Podemos tornar uma imagem clicável!

<a href="http://www.vainaweb.com.br">
    <img src="http://www.vainaweb.com.br/img/vainaweb.svg" alt="logo"/>
</a>

imagem

link

Vamos praticar?

Listando coisas

Temos três tipos de listas.

- ordenadas

- não ordenadas

- de definições

Ordenadas

<ol>
    <li>Caneta</li>
    <li>Lápis</li>
    <li>Borracha</li>
    <li>Tesoura</li>
    <li>Papel</li>
</ol>

1.  Caneta

2.  Lápis

3.  Borracha

4.  Tesoura

​5.  Papel

Não ordenadas

<ul>
    <li>Caneta</li>
    <li>Lápis</li>
    <li>Borracha</li>
    <li>Tesoura</li>
    <li>Papel</li>
</ul>

• Caneta

• Lápis

• Borracha

• Tesoura

​• Papel

De definição

<dl>
    <dt>Caneta</dt>
        <dd>Azul, com tinta</dd>
    <dt>Lápis</dt>
        <dd>De madeira</dd>
</dl>

Caneta

            Azul, com tinta

Lápis

            De madeira

Vamos praticar?

Criando tabelas

<table>
  <tr>
    <th>Nome</th>
    <th>Sobre</th>
  </tr>
  <tr>
    <td>Maria</td>
    <td>Gosta de cachorros</td>
  </tr>
  <tr>
    <td>Rosa</td>
    <td>Solta pipa com os irmãos</td>
  </tr>
</table>

Mais prática!