cefet_web

HTML parte 2

Listas, inline/block, Tabelas, Links
e Plantas Carnívoras 🦖

Na última aula…

  1. Estrutura de um arquivo HTML 
     <!DOCTYPE html>
 <html>
   <head>...</head> <!-- meta-informação sobre a página -->
   <body>...</body> <!-- tudo que é visível -->
 </html>
  2. Algumas tags básicas, como <p>, <img>, <h1...6>, <a href="">
  3. Um pouquinho de CSS: color, margin, background-color, font-family

Hoje veremos

Tags de importância

Destacando partes do texto

  1. Tag <strong></strong>
  2. Tag <em></em>
  3. Tags <del></del> e <ins></ins>
  4. Tag <mark></mark>

(1) Tag <strong></strong> :muscle:

(2) Tag <em></em>

(3) Tags <del></del> e <ins></ins> :pencil:

(4) Tag <mark></mark> :part_alternation_mark:

Tags de listas

E tags de citações

Listas de itens <ol></ol> e <ul></ul>

Tags de Citação

  1. Citação “em bloco”: 
    <blockquote>
 Tô quebrado, peixe
</blockquote> -  Romário negando-se
a pagar mais de R$ 3 mil de pensão

    ::: result

    Tô quebrado, peixe
    • Romário negando-se a pagar mais de R$ 3 mil de pensão :::

Elementos inline vs. block

Quebrar ou não quebrar linha? :thought_balloon:

Pergunta ~ Por que um parágrafo está sempre abaixo do outro, mas um elemento <strong> pode ficar ao lado de outro texto?

Vamos fazer um teste…

  1. Colocando dois <p> seguidos (lado a lado) no código 
    • <p>Primeiro</p> <p>Segundo</p>
    • ::: result . margin-left: 1em;

      Primeiro

      Segundo

      :::

  2. Colocando dois <strong> seguidos 
    • <strong>Primeiro</strong> <strong>Segundo</strong>
    • ::: result . margin-left: 1em; Primeiro Segundo :::

Por quê isso acontece?

Elementos block e elementos inline

Vamos ver como o navegador faz…

Elementos block

Elementos inline

block e inline , juntos

block ~ ocupa largura toda ~ cima para baixo ~ podemos definir width e height ~ podemos definir margin e padding

inline ~ tem o tamanho suficiente ~ esquerda para direita ~ ignora width e height ~ ignora margin-top e margin-bottom

De volta ao <p> vs. <strong> …

  1. São elementos inline:
    • <strong>
    • <em>
    • <del>, <ins>
    • <mark>
    • <em>
    • <a>
    • <img>
    • e outros…

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

Largura e altura dos elementos

Observação: não é possível definir as dimensões de elementos inline. Esses elementos possuem exatamente o tamanho necessária para apresentar seu conteúdo

Tabelas

Tags e estilos

Tags básicas de uma Tabela

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

Mesclando células horizontais e verticais

  1. 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
  2. Exemplos: de colspan e de rowspan (clique para ver)

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>

Colocando bordas

Estilos de borda

Bordas em cada direção

Colocando bordas na tabela

Estilizando uma tabela

Plantas Carnívoras

Atividade de hoje

Passos para o exercício

  1. Instalar o git na máquina, caso ele não esteja instalado
  2. Criar um fork do repositório e cloná-lo para seu computador:
  3. Fazer o exercício, fazer commits e dar push no seu repositório usando branch gh-pages¹
    • O arquivo README.md do repositório contém o enunciado do exercício
  4. Enviar pelo sistema acadêmico o link do seu repositório até o final da aula: https://github.com/SEU_USUARIO/cefet-web-piranha-plant/

¹O uso do branch gh-pages é necessário para que a atividade seja avaliada.

Atividade: Plantas Carnívoras Planta carnívora do jogo Mario Bros

    • Como fazer para o link abrir em outra aba?

A tag de hiperlink possui um atributo target="..." que pode ter os seguintes valores:

_self ~ O recurso “linkado” abre na própria aba (valor padrão) ~ Exemplo: <a href="..." target="_self">Sobre mim</a>

_blank ~ O recurso “linkado” abre em uma nova aba ~ Exemplo: <a href="..." target="_blank">Salgadinhos</a>

O id de um elemento HTML

::: figure .figure-slides.clean Uma regra CSS mostrando

Uma regra CSS mostrando ::: —

Regra CSS

Regra CSS

Seletores CSS

Uma regra CSS destacando o seletor

Seletor de _tag_

Seletor de `id`

Exemplo: estilizando apenas um título <h2>

    ...
    <style>
      #ponche-vermelho {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Receitas para Monstros</h1>
    <h2 id="ponche-vermelho">
      Ponche Vermelho</h2>
    <h2>Joelhos de Lagartixa</h2>
    <h2>Orelhas Verdes Fritas</h2>
  </body>
</html>

::: result

Receitas para Monstros

Ponche Vermelho

Joelhos de Lagartixa

Orelhas Verdes Fritas

:::

Imagem de fundo

body {
  background-image: url(caminho-para-a-imagem);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
}

Ancorando a imagem em um canto da tela

Ajustando o tamanho da imagem

Ocupando toda a altura do navegador

Ocupando toda a altura do navegador (cont.)

Textos sombreados

Referências

  1. Capítulos 1, 2 e 3 do livro