Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

HTML parte 2

Coding Dojo 🏯, Mais tags HTML
e Entendendo regras CSS

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

Aprendemos:

Que plantas carnívoras ~~se vestem de papai noel~~ são legais

A estrutura de um arquivo HTML

<!DOCTYPE html>
<html>
  <head>...</head> <!-- meta-informação sobre a página -->
  <body>...</body> <!-- tudo que é visível -->
</html>

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

Também vimos:
1. Algumas tags básicas, como <p>, <img>, <h1...6>, <a href="">
2. A usar um pouquinho de CSS: color, margin, background-color, font-family

Atividade de Hoje

Vamos fazer nosso primeiro Code Dojo 🏯!

Hoje veremos

Tags que indicam importância
Tags de listas de itens
Elementos inline vs. block
Mais tipos de hiperlinks
Entendendo regras CSS

Tags de importância

Destacando partes do texto

Tag <strong></strong>
Tag <em></em>
Tags <del></del> e <ins></ins>
Tag <mark></mark>

(1) Tag `<strong></strong>` 💪

Usada para marcar texto com alta importância, seriedade ou urgência:

<p><strong>Não se esqueça!</strong> Tragam seus fones de ouvido.</p>

Por padrão, elementos <strong> são desenhados em negrito: ::: result Não se esqueça! Tragam seus fones de ouvido. :::

(2) Tag `<em></em>`

Usada para dar ênfase ("dar entonação") ao texto. A ideia é alterar como uma frase deve ser lida:
```
<p>Gatos são animais <em>bonitinhos</em>.</p>
```
- Ao enfatizar "bonitinhos", a frase está reafirmando a caractística dos gatos
Por padrão, elementos <em> são desenhados em itálico: ::: result Gatos são animais bonitinhos. :::

(3) Tags `<del></del>` e `<ins></ins>` 📝

Usadas para indicar texto que foi removido ou inserido:

<p>O jardineiro é Jesus.</p>
<p>E as árvores... somos <del>nós</del> <ins>nozes</ins>.</p>

Por padrão, elementos <del> são riscados e <ins> são sublinhados: ::: result O jardineiro é Jesus.
E as árvores... somos ~~nós~~ nozes. :::

(4) Tag `<mark></mark>` 〽️

Usada para realçar parte do texto considerada importante para o leitor. Tipo quando usandos caneta marcadora de texto:
```
<p><mark>HTML, CSS e JavaScript</mark> são as três linguagens da Web.</p>
```
Por padrão, elementos <mark> possuem o fundo com a cor amarela: ::: result HTML, CSS e JavaScript são as três linguagens da Web. :::

Tags de listas

Enumerando coisas

Lista numerada: <ol></ol>
Lista não-numerada: <ul></ul>
~~Lista de termos e definições~~ (veja você mesmo)

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

Lista numerada (também conhecida como ordenada):
- ```
<ol>
  <li>Linux</li>
  <li>Windows</li>
</ol>
```
- ::: result
  1. Linux
  2. Windows
  :::
Lista não-numerada (ou não-ordenada):
- ```
<ul>
  <li>Uva</li>
  <li>Maçã</li>
</ul>
```
- ::: result
  - Uva
  - Maçã
  :::

Elementos inline vs. block

Quebrar ou não quebrar linha? 💭

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...

Colocando dois <p> seguidos (lado a lado) no código
- ```
<p>Primeiro</p> <p>Segundo</p>
```
- ::: result . margin-left: 1em;
  Primeiro
  
  Segundo
  :::
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

Ao desenhar uma página, o navegador precisa decidir como dispor os elementos
Alguns elementos são do tipo block, outros são inline:

Elementos block ~ são dispotos um abaixo do outro ~ ex: parágrafos, títulos e subtítulos, listas

Elementos inline ~ são dispostos um à direita do outro ~ ex: links, strong, em, imagens

Vamos ver como o navegador faz...

Elementos `block`

Elementos `inline`

`block` e `inline` , juntos

De volta ao **`<p>` vs. `<strong>`** ...

São elementos block:
- <p>
- <h1>, <h2> ... <h6>
- <ul>, <ol>, <li>
- e outros...

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

Mais tipos de hiperlinks

Ligações internas entre recursos e para emails

Hiperlinks para:
- Outras páginas do site
- Emails
- Telefones
- Dentro de uma parte da página
Atributo target

Relembrando hiperlinks

Link externo (para fora da página):

<a href="http://www.google.com">Link externo</a>

Link interno (para algo hospedado no próprio computador)
```
<a href="downloads/exemplo.zip">Link interno</a>
```

- Mas como criar um link para outra página do meu próprio site?

Mais sobre hiperlinks

Link para uma outra página do próprio site:

<a href="outra-pagina.html">Outra página</a>

Link para enviar um email para alguém:
```
<a href="mailto:fegemo@cefetmg.br">Me envie um email</a>
```
- Ao clicar no link, o navegador abre o email do usuário

- Como fazer para o link abrir em outra aba?

O atributo `target="..."` dos links

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>

Link para dentro de uma página

Para criar um link para dentro da própria página:
```
<a href="#id-de-um-elemento">Link interno</a>
```
- Repare o #id-de-um-elemento
```
<h2 id="id-de-um-elemento">Um título</h2>
```
  - Ao clicar no link, o navegador vai rolar a barra até que esse <h2></h2> fique visível e no topo do navegador (mas o que é esse atributo id?)

O `id` de um elemento HTML

É possível definir um nome que identifique um elemento da página
Todo elemento HTML pode ter um atributo id. Exemplos:
```
<img src="..." id="logomarca-da-empresa">
```
```
<h1 id="titulo-principal">Origem da Polícia Intergalática</h1>
```
```
<ul id="melhores-pokemon">...</ul>
```
- O atributo id deve ser único na página
  - Não pode haver 2+ elementos com um mesmo id
- Podemos usar o id para estilizar elementos em CSS!

Entendendo regras CSS

Como funcionam as regras

Formato de uma regra
Estilizando elementos um a um
Colocando bordas
Centralizando imagens

::: figure .figure-slides.clean

:::

Seletores CSS

O seletor define a que(ais) elemento(s) HTML da página a regra CSS será aplicada
Há diversos tipos de seletores. Veremos 2 hoje:
1. tag
2. id

Regras podem ter 1+ seletor, separados por vírgula:

/* tanto <p>, qto <h1>, qto <ul> */
p, h1, ul {
  color: black;
}

Seletor de tag

Se usarmos um seletor que é o nome de uma tag...
```
p { /* usamos 'p', que é o nome da tag de parágrafo */
  margin-left: 5%;
}
```
- ...selecionamos todos os elementos da página com aquela tag (e.g., todos os parágrafos)

Outros exemplos:

img {
  border-radius: 50%;
}
body {
  font-size: 20px;
}
strong {
  color: forestgreen;
}

Seletor de `id`

Se usarmos um seletor que começa com o símbolo # (hashtag)...
```
#titulo-principal {
  font-family: 'Verdana', sans-serif;
}
```
- ...selecionamos apenas o elemento que possua aquele atributo id (e.g., um <h1 id="titulo-principal">...</h1>)

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

:::

Colocando bordas

A propriedade border é um atalho para 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;
}

Estilos de borda

Há diversos estilos de borda:
- border-style: solid
- border-style: double
- border-style: groove
- border-style: outset
- border-style: dotted
- border-style: dashed
- border-style: inset
- border-style: ridge
Veja a descrição dos estilos de bordas na MDN

Centralizando imagens

Para centralizar uma imagem, é necessário definir "margens laterais automáticas":
```
#imagem-principal {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
```
- As margens "automáticas" fazem com que o navegador divida o espaçamento horizontal igualmente nos dois lados
- display: block é necessário porque <img> é inline, mas o navegador não permite definir margens para elementos inline

Referências

Capítulos 1, 2 e 3 do livro

Files

html2

Directory actions

More options