Skip to content

Latest commit

 

History

History

html3

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

HTML parte 3

Tabelas, Tesouros 👑 e Piratas

Na última aula... (1/4)

  • Tags de importância: <strong>, <em>, <mark>, <del> e <ins>
  • Listas numeradas (<ol>) e não-numeradas (<ul>)
  • Podemos criar hiperlinks com o elemento <a href="caminho-do-recurso">nome</a>
    • Link interno da página referenciando o id do elemento: 
      <a href="#banda-calypso">Ir para banda Calypso</a>
...
<h2 id="banda-calypso">Calypso</a>

Na última aula... (2/4)

  • Mais sobre hiperlinks:

    • Link para email: <a href="mailto:hasan@cefetmg.br">Me mande emails</a>
    • O atributo target para abrir uma página em outra aba 
      <a href="http://www.pudim.com.br" target="_blank">Site legal</a>

  • Alguns elementos são inline e outros são block

    block ~ fazem quebra de linha (e.g., <blockquote>, <p> etc.)

    inline ~ não fazem quebra de linha (e.g, <q>, <strong> etc.)

Na última aula... (3/4)

  • Regra e seletor CSS Formato de uma regra CSS
    • Regra: conjunto de declarações aplicadas em alguém
    • Seletor: a quem se aplica uma regra
    • Declaração: um par de <propriedade, valor>
  • Estilizando elementos um a um utilizando o seu id e o seletor iniciando com #

Na última aula... (4/4)

  • Colocação de bordas por meio da propriedade border, ou então border-width, border-style e border-color
  • Para centralizar imagens: 
    img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Hoje veremos

  1. Tabelas simples
  2. Tabelas completas
  3. Estilizando tabelas
  4. Piratas e seus tesouros 👑

Tabelas

<iframe width="470" height="270" src="https://jsfiddle.net/danielhasan/nmrbhqkb/7/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0" class="flex-align-center"></iframe>
  • Nesta aula iremos:
    • fazer a estrutura desta tabela via HTML
    • estilizar esta tabela via CSS

O que uma tabela possui?

<iframe width="470" height="270" src="https://jsfiddle.net/danielhasan/nmrbhqkb/7/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  • Que partes compõem uma tabela?
    • Linhas e colunas, sendo:
      • uma linha com o cabeçalho
      • última linha com o rodapé
    • Legenda
  • Em HTML, utilizamos tags para indicar os elementos de uma tabela

Tabelas simples

Linhas e células

  • Elementos:
    • <table></table>
    • <tr></tr>
    • <td></td> e <th></th>

Tags básicas de uma Tabela

  • Exemplo de Tabela Exibindo suas Tags Tabelas são criadas com as tags:
    • <table>...</table>
    • <tr>...</tr>, linha da tabela
    • <td></td>, célula de dados
    • <th></th>, célula do cabeçalho
  • A tabela inicia-se com <table> e finaliza com </table>
  • Cada linha possui a tag <tr> correspondente, finalizada com </tr>
  • A tag <td>...</td> armazena os dados de uma célula da tabela
    • Para o cabeçalho, ao invés de <td>, utiliza-se a tag <th>
  • As tags <td> e <th> devem estar dentro de uma linha (<tr>)

Repare que, por padrão, as células <th> ficam em negrito

Mesclando células horizontais e verticais

<table>
  <tr>
    <th colspan="2">Pessoas</th>
  </tr>
  <tr>
    <td>2005046102</td>
    <td>Epaminondas</td>
  </tr>
</table>
  • colspan="X" faz com que aquela célula ocupe X colunas
    • Para mesclar células "para baixo", usamos rowspan="Y", onde Y é o número de linhas que a célula vai ocupar
  • Exemplos: de colspan e de rowspan (clique para ver)

A tabela do nosso exemplo

<iframe width="65%" height="375" src="//jsfiddle.net/danielhasan/nmrbhqkb/17/embedded/result,html/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0" class="flex-align-center"></iframe>

OBS: Como ainda não alteramos o estilo, ainda não há borda

Tabelas completas

Cabeçalho, Corpo e Rodapé

  • Elementos:
    • <caption>...</caption>
    • <thead>...</thead>
    • <tbody>...</tbody>
    • <tfoot>...</tfoot>

Tag caption para colocar legenda

  • Coloca uma legenda na tabela: 
    <table>
  <caption>Quadro 01: Alunos Matriculados</caption> <!-- aqui -->
  <tr>
    <th>Matrícula</th><th>Nome</th>
  </tr>
  <tr>
    <td>201792829293</td><td>Alice Fernandez</td>
  </tr>
</table>

Tabela do nosso exemplo (com caption)

<iframe width="65%" height="375px" src="https://jsfiddle.net/danielhasan/nmrbhqkb/19/embedded/result,html/" allowfullscreen="allowfullscreen" frameborder="0" class="flex-align-center"></iframe>

OBS: Como ainda não alteramos o estilo, ainda não há borda

Tags de cabeçalho, corpo e rodapé da tabela

<table>
  <caption>Gastos em janeiro</caption>
  <thead> <!-- cabeçalho -->
    <tr>
      <th>Descrição</th><th>Valor</th>
    </tr>
  </thead>
  <tbody> <!-- corpo -->
    <tr>
      <td>Alimentação</td><td>300,00</td>
    </tr>
    <tr>
      <td>Transporte</td><td>100,00</td>
    </tr>
  </tbody>
  <tfoot> <!-- rodapé -->
      <tr>
        <td>Total</td><td>400,00</td>
      </tr>
  </tfoot>
</table>
  • Exemplo no jsfiddle
  • <thead>, <tbody> e <tfoot> devem marcar as linhas que compõem o corpo, o cabeçalho e o rodapé
    • Útil para:
      • aplicarmos estilos diferentes no corpo, cabeçalho e rodapé
      • impressão: se a tabela for maior que a página, o cabeçalho aparecerá em todas as páginas

Tabela do nosso exemplo (completa)

<iframe width="65%" height="375px" src="https://jsfiddle.net/danielhasan/nmrbhqkb/10/embedded/result,html/" allowfullscreen="allowfullscreen" frameborder="0" class="flex-align-center"></iframe>

OBS: chegou a hora de estilizar!

Estilizando tabelas

Deixando-as mais atrativas

  • Colocando bordas
  • Propriedade de largura: width
  • Margem e padding
  • A propriedade border-collapse em tabelas
  • Fontes: font-size, font-style, font-weight e text-decoration

Colocando bordas

  • A propriedade border é um atalho: border-width, border-style e border-color
    • Exemplo (os dois são equivalentes): 
      p {
  border-width: 1px;    /* largura de 1 pixel */
  border-style: solid;  /* borda toda colorida */
  border-color: red;    /* cor vermelha */
}
      p {  /* preferimos esta forma, que é mais sucinta */
  border: 1px solid red;
}

Bordas

  • De forma similar, podemos exibir apenas a borda do topo, direita, abaixo ou esquerda
  • Para isso, usamos: border-top, border-right, border-bottom e border-left 
    • p {
  border-top: 1px solid red;
  border-bottom: 2px dotted blue;
}
    • ::: result

      Sou o mestre das bordas!

      :::
  • Também podemos usar a forma mais extensa. Por exemplo, border-top-width, border-top-style e border-top-color definem, respectivamente, a largura, o estilo e a cor da borda do topo

Colocando bordas na tabela

  • <iframe width="39%" height="165" src="https://jsfiddle.net/danielhasan/nmrbhqkb/23/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0" class="push-right" style="margin-top: -1em"></iframe> Ao adicionar a borda nas células de uma tabela o resultado ficaria assim ➡️: 
    td {
  border: 1px solid black;
}
  • <iframe width="39%" height="200px" src="https://jsfiddle.net/danielhasan/nmrbhqkb/24/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0" class="push-right" style="clear: right; margin-top: 2em"></iframe>

    Para mudarmos isso, adicionamos border-collapse: collapse à regra CSS da tabela: 

    td {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
}
    • Este é o comportamento desejado praticamente sempre para as bordas

Margem e Padding

Desenho de máscara de festa a fantasia

padding ~ Espaçamento interno, da borda para dentro

border ~ Tamanho da borda

margin ~ Espaçamento externo, da borda para fora

Margem e Padding - Exemplo

<iframe width="100%" height="450" src="https://jsfiddle.net/fegemo/ovt08qcb/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  • Todo elemento pode ter:
    1. padding (esp. interno)
    2. uma borda
    3. margin (esp. externo)
  • Versão sem atalho ou com: 
    margin-top: 12px;
margin-right: 3px;
margin-bottom: 6px;
margin-left: 9px;

margin: 12px 3px 6px 9px;
/*
 ordem: ⬆️  ➡️  ⬇️  ⬅️
 (tipo um relojinho)
*/
    • Mesmo vale para padding
  • Na vertical, as margens colapsam:
    • Margem: max(cima, baixo)

Largura dos elementos

  • Podemos especificar a largura dos elementos block por meio da propriedade width

Observação: não é possível definir largura de elementos inline. Esses elementos possuem exatamente a largura necessária para apresentar seu conteúdo

Outras propriedades CSS para texto

font-size ~ <iframe width="280px" height="400px" src="https://jsfiddle.net/fegemo/x2m8fnL6/3/embedded/result,css/" allowfullscreen="allowfullscreen" frameborder="0" class="push-right"></iframe> Define o tamanho da fonte, ex: 18px

font-weight ~ Define a espessura da fonte ~ Valores: normal , lighter , bold , bolder ou um número representando sua espessura

font-style ~ Define o estilo da fonte ~ Valores: normal e italic

text-decoration ~ Sublinha, risca ou coloca um risco acima do texto: ~ Valores: none (nenhum), underline (sublinhado), overline (acima do texto), line-through (riscado)

Estilizando a tabela do nosso exemplo

<iframe width="98%" height="400" src="https://jsfiddle.net/fegemo/yezb7ebo/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <iframe width="98%" height="400" src="https://jsfiddle.net/fegemo/yezb7ebo/embedded/css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Piratas e seus Tesouros 👑

Ajude Barba-Ruiva!

  • Definindo uma imagem de fundo da página
  • Ocupando toda a altura do navegador
  • Textos sombreados
  • Cores semitransparentes

Gerenciador de Tesouros

  1. Baixe as imagens e o ícone que serão usados
  2. Descompacte o arquivo cefet-front-end-pirates-master.zip na área de trabalho
  3. Renomeie a pasta criada na área de trabalho para tesouro-piratas
  4. Crie um arquivo index.html na mesma pasta e siga os passos:
    1. Faça a estrutura básica e coloque o ícone e a imagem de fundo
    2. Coloque o título (h1) e o parágrafo, deixando espaço para tabela
      • Estilize-os
    3. Crie a tabela e, por fim, estilize-a
    4. Veja instruções detalhadas aqui

Imagem de fundo

body {
  background-image: url(caminho-para-a-imagem);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
}
  • background-image para escolher que imagem será usada
  • background-repeat: no-repeat para que a imagem apareça só 1x
  • background-position: left bottom para fixar que o canto inferior esquerdo da imagem fique sempre visível
  • background-size: cover para que a imagem cubra todo o espaço da tela

Ancorando a imagem em um canto da tela

  • Deixando um canto da imagem sempre visível com background-position
  • Outros valores possíveis: left top, center center, center bottom etc.

Ajustando o tamanho da imagem

  • background-size: cover: imagem redimensionada para cobrir todo o espaço
  • background-size: contain: imagem redimensionada para aparecer completamente

Ocupando toda a altura do navegador

Ocupando toda a altura do navegador (cont.)

  • 1ª tentativa: definir a altura do elemento body como 100%: 
    body {
  height: 100%;
}
  • Jeito certo: definir a altura do elemento body e do html como 100%: 
    html, body {
  min-height: 100%;
}

Textos sombreados

  • Colocar sombras em textos facilita sua leitura quando o texto está sobre uma imagem que pode ter muitas cores 
    h1 {
  text-shadow: 2px 2px black;
}

Cores semitransparentes

  • É possível usar cores com transparência, que deixam "o que está atrás" aparecer. Por exemplo: 
    • color: rgba(255, 255, 255, 0.20); /* ou #fff3: branco 20% opaco */
color: rgba(255, 255, 255, 0.67); /* ou #fffa: branco 67% opaco */
color: rgba(255, 255, 255, 1);    /* mesmo que white */
color: rgba(0, 0, 0, 0.53);       /* ou #0008: preto 53% opaco */
color: rgba(0, 0, 255, 0.53);     /* ou #00f8: azul 53% opaco */
    • ::: result
      • branco
      • branco
      • branco
      • preto
      • azul :::
  • Podemos usar a notação RGBA(...) ou hexadecimal

Cores semitransparentes

  • Também podemos fazer isso com background-color: 
    • p {
  /* preto 50% opaco */
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}
      <p>Yarrr Harrr, marujo!!</p>
    • ::: result

      Yarrr Harrr, marujo!!

      ::: - Repare que o fundo do parágrafo ficou azulado - ...porque o fundo da página era azul

Referências

  1. Capítulos 13 do livro