cefet_front_end

HTML parte 2

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

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>` :muscle:

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:

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:

Gatos são animais bonitinhos.

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

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:

O jardineiro é Jesus.
E as árvores… somos ~~nós~~ nozes.

(4) Tag `<mark></mark>` :part_alternation_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:

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>

Resultado:

Linux
Windows

Lista não-numerada (ou não-ordenada):

  <ul>
    <li>Uva</li>
    <li>Maçã</li>
  </ul>

Resultado:

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>
```
Resultado:

Primeiro

Segundo

Colocando dois <strong> seguidos

  <strong>Primeiro</strong> <strong>Segundo</strong>

Resultado: 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`	São elementos `inline`
`<p>`	`<strong>`
`<h1>, <h2> ... <h6>`	`<em>`
`<ul>`, `<ol>`, `<li>`	`<del>`, `<ins>`
e outros	`<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:willam.sallum@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

Seletores CSS

Uma regra CSS destacando o seletor

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>

Resultados:

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