cefet_web

HTML parte 4

Tags semânticas, pseudocoisas,
elementos de entrada e Assombrações 👻

Roteiro

Divitite e as tags semânticas
Pseudo-elements e pseudo-classes
Elementos de entrada e botões
O Box Model
Atividade: Assombrações 👻

Tags Semânticas

Curando a divitite

Motivação ~ SEO e Acessibilidade na Web

Doença ~ a divitite

Cura ~ tags semânticas

SEO e Acessibilidade na Web

SEO ~ Sigla para Search Engine Optimization, ou Otimização para Motores de Busca ~ É um conjunto de técnicas para aumentar a possibilidade de um site aparecer no topo dos resultados do Google (e outros motores de busca)

Acessibilidade ~ Possibilidade de uma pessoa consumir conteúdo das páginas web independente de condições físicas ~ Pessoas cegas usam um programa especial (o “leitor de tela”) que lê o código HTML em voz alta para elas

Divitite

Sintomas
- Um acúmulo grande de elementos div e span aninhados

Muitas páginas Web usam div/span da seguinte forma:

<div id="header">...</div>
<div id="footer">...</div>
<div class="article">...</div>
<span class="time">...</div>
<div id="navigation">...</div>

A cura da Divitite: tags semânticas

O dr. HTML5

propôs elementos idênticos às divs/spans, mas que possuem sentido para o navegador. Por exemplo:

<header></header>   <!-- em vez de <div id="header"></div> -->
<footer></footer>   <!-- em vez de <div id="footer"></div> -->
<article></article> <!-- em vez de <div id="article"></div> -->
<time></time>       <!-- em vez de <span id="time"></span> -->
<nav></nav>         <!-- em vez de <div id="navigation"></div> -->

Elementos semânticos (1/3)

<main></main> (block)
- Conteúdo principal da página
<header></header> (block)
- Cabeçalho da página ou de seções (section) ou artigos (article)
<footer></footer> (block)
- Análogo ao header, porém recomendado para que contenha informação típica de um rodapé de página
<article></article> (block)
- Um componente “completo” (ou auto-contido) da página
  - Em um blog, seria um post
  - Em uma loja, seria um produto

Elementos semânticos (2/3)

<section></section> (block)
- Uma seção lógica da página, tipicamente contendo um título
<nav></nav> (block)
- Uma seção da página que contenha links de navegação
- Exemplos:
  - O menu principal da página
  - Tabela de conteúdo (TOC) com links internos

Elementos semânticos (3/3)

<aside></aside> (block)
- Uma seção de conteúdo periférico na página
- Exemplos:
  - Barras laterais
  - Widgets periféricos
  - Conteúdo à parte do principal
<time></time> (inline)
- Representa uma data e/ou horário
<mark></mark> (inline)
- Representa uma marcação no texto (tipo caneta marcadora)

Exemplo de uso - Elementos semânticos

Elementos semânticos pré-HTML5

<address></address> ~ para endereços

<abbr title=""></abbr> ~ para abreviações

<blockquote></blockquote> ~ para citação em bloco

<q></q> ~ para citação em linha

<cite></cite> ~ para referência

<code></code> ~ para código fonte

<kbd></kbd> ~ para teclas do teclado

<figure></figure> ~ imagem, tabela ou gráfico

<figcaption></figcaption> ~ legenda de imagem, tabela ou gráfico

Pseudo-classes e Pseudo-elements

Mais alguns seletores

Pseudo-class ~ permitem selecionar elementos em diferentes situações

Pseudo-element ~ permitem estilizar certas partes de elementos

Pseudo-classes

Indicam um estado (situação) de um elemento. Exemplos:

.algo:hover { /* :hover (mouse em cima), mas tbm há :active, :visited... */
  text-decoration: underline;
}

Algumas das pseudo-classes mais comuns:
- :focus contém o foco
- :hover mouse em cima
- :first-child é o último filho
- :last-child é o último filho
- :not() exceto que
- :nth-child() é o n-ésimo filho
- :nth-of-type() n-ésimo filho de uma certa tag
- :checked caixa marcada
Lista com todas na MDN

Exemplos com pseudo-classes

Estilização de links:
```
a:link {
  text-decoration: none;
  color: cornflowerblue;
}
a:visited {
  color: gray;
}
a:hover {
  text-decoration: underline;
} 
a:active {
  color: darkred;
}
```
::: result

Site do Pudim :::
Realçando o foco:
```
*:focus {
  outline: 3px dashed yellow;
}
```
::: result .b

Digite seu nome: Digite seu email Digite a senha Confirme a senha :::
Pegando 1º de tipo:
```
article:nth-of-type(1) {
  width: 100%;
}
article:not(:nth-of-type(1)) {
  width: 50%;
}
```
::: result .c max-width: 320px; display: flex; flex-wrap: wrap;

Primeira manchete
Esta é a primeira nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra.

Segunda manchete
Esta é a segunda nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra.

Terceira
Esta é a terceira nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra.

:::

Pseudo-elements

Indicam partes de um elemento. Exemplos:
```
p::selection {
  color: white;
  background-color: hotpink;
}
```
::: result

<p>Me selecione, bem aqui ←</p> :::
Pode-se usar tanto ::pseudo-element quanto :pseudo-element
- Mas é legal usar :: pra diferenciar das pseudo-classes

Pseudo-elements comuns

Os pseudo-elements mais comuns:
- ::selection - seleção de texto
- ::placeholder - descrição de input
- ::before - conteúdo “pré-conteúdo”
- ::after - conteúdo “pós-conteúdo”
- ::first-letter - primeira letra
- ::first-line - primeira linha
Lista com todos na MDN

Exemplo de ::first-letter:
```
p:first-of-type::first-letter {
   float: left;
   font-size: 5em;
   line-height: 0.6em;
   padding-top: 0.1em;
}
```
::: result .d

Esta é a primeira nóticia e ela fala sobre os animais que estão enjaulados no zoológico da asa leste da cidade de Itapecerica da Serra. :::

Exemplo de ::before

Por exemplo, como colocar um texto de “Novidade!” antes de cada notícia?

.novidade::before {
  content: "Novidade!";
  display: inline-block;
  background: orange; /* ... */
}

Resultado:

Elementos de entrada e botões

Interação “livre” com usuário

O elemento input e alguns tipos:
- texto, e-mail, telefone, número, cor
Rótulos: <label>
Elementos de escolha
Outros elementos
Botões

Caixa de texto (p/ usuário digitar)

Elemento HTML onde o usuário pode digitar qualquer coisa
Formato:
```
<input id="palavra" type="text" placeholder="Digite..."> 
<input value="Já digitado">
<input>
```
- type="text" é o valor padrão para o input
- placeholder="um texto..." define um texto de ajuda que só aparece quando não há nada digitado ::: result :::

Rótulos (ou etiquetas)

Tipicamente atribuímos rótulos (<label></label>) aos campos (input)
- Podemos clicar nos rótulos e o foco será movido para dentro do input a ele associado
- Há 02 formas de associação:
```
<label for="cidade">Cidade: </label><input id="cidade">

<label>Cidade:
    <input id="cidade">
</label>
```
  ::: result
  
  Cidade:
  
  :::

Caixa de texto para e-mail

Idêntico à caixa de texto, porém o navegador espera um e-mail válido
Formato:
```
<label>Remetente:
  <input id="remetente" type="email">
</label>
```
- Em smartphones, os navegadores mudam o layout do teclado colocando “@” em posições mais fáceis ::: result

Remetente:

:::

Outros semelhantes à caixa de texto

Pesquisa
<input type="search">:
URL
<input type="url">:
Telefone
<input type="tel">:

Números, Escala e Cor

Formato:

<input type="number" step="0.5">
<input type="range" min="0" max="100" step="1">
<input type="color">

::: result . background-color:white; margin-top: 1.25em

number é indicado para digitação de um número específico
range para uma escala (e.g., quente ou frio?)
- number e range aceitam min, max e step (incremento)
color para pegar o valor hexadecimal de uma cor

Data e Hora

Formato:

<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

::: result . display: flex; flex-direction: column; margin-top: 2.25em; :::

Observações:
- date é apenas uma data, time apenas um horário
- datetime-local é um dia/horário

Checkbox: caixinha de marcação

Formato:
```
<label>
  <input id="emails" type="checkbox" value="sim"> Inscrever?
</label>
```
- !! Se não colocarmos um <label></label>, o usuário precisará clicar exatamente na caixinha ::: result
  Inscrever (com label)?
  Inscrever ~~(com label)~~?
  
  :::
Atributos:
- checked, para deixar previamente marcado
```
<input id="..." type="checkbox" checked>
```

Radio: escolha dentro de um grupo

Formato:

<label>
  <input type="radio" name="cor" value="azul">Azul
</label>
<label>
  <input type="radio" name="cor" value="verde">Verde
</label>

::: result
Azul Verde

:::

Atributo name: define qual é o nome do input ao enviar o fomulário para o servidor
Repare que apenas uma cor pode ser escolhida
- porque os dois <input> têm o mesmo name

Select e options (lista de opções)

::: result .push-right margin-left: 1em; margin-top: 1.25em Sabor da pizza: ::: Formato:

<label for="sabor">Sabor da pizza:</label>
<select id="sabor">
  <option value="marg">Marguerita</option>
  <option value="muzza" selected>Frango</option>
</select>

Atributos:
- selected, para o option, para deixar selecionado
- multiple, para o select, para permitir mais de um option

Outros elementos de dados

Botões de ação

É possível criar botões com o elemento <button>texto</button>, em que:
- texto é o que aparece dentro do botão:
```
<button id="delicia">Sou um delicioso botão</button>
```
  ::: result - mas não acontece nada?! :::
- Para atribuir comportamento ao clique do botão, é necessário usar JavaScript! ```js let botaoDeliciaEl = document.querySelector(‘#delicia’); botaoDeliciaEl.addEventListener(‘click’, function() { console.log(‘:3’); }); // veremos como isso funciona n’outra aula!!

O Box Model

Como os elementos são “vistos” pelo navegador

Componentes da caixa
width e height
Alterando o box-model

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

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)

Box Model (na MDN)

O navegador enxerga todo elemento de conteúdo como uma “caixa”
A “caixa” é formada por:
- Espaço do conteúdo
- Espaço de preenchimento (padding)
- Bordas (border)
- Espaço externo (margin)

Visualizando a caixa de um elemento

Box Model: largura e altura

Quando definimos a largura (width) ou altura (height) de um elemento, estamos definindo o tamanho do conteúdo da caixa, e não da caixa inteira

::: figure .figure-slides.flex-align-center.clean.invert-colors-dark-mode :::

Dimensionando um elemento

::: did-you-know .push-right width: 320px; margin-right: 6px; Elementos inline ignoram os valores de:

width, height
margin-top
margin-bottom :::
Se sabemos a dimensão total de um elemento, que também contém padding e/ou border, como calcular seus (width, height)? ::: figure .figure-slides.push-right.invert-colors-dark-mode :::
Contudo, fazer essa conta “nós mesmos” pode resultar em erros…
- É possível mudar isso!

Alterando o box model

É possível alterar o significado da width e height de um elemento usando a propriedade box-sizing :
- box-sizing: content-box (valor padrão)
  - width = largura do conteúdo
- box-sizing: border-box
  - width = conteúdo + padding + border
  - Esta forma é mais intuitiva :thumbsup: :thumbsup: :thumbsup:

::: did-you-know .push-right width: 284px; margin-left: 6px; padding-right: 0.5em As margens do elemento formam um espaçamento externo e não usam espaço dentro da caixa. :::

::: figure .clean.span-columns.figure-slides.max-width.centered.invert-colors-dark-mode margin:0 auto; width: calc(100% - 290px); clear: both; :::

Assombrações :ghost:

Faça o Blog Assombrado

Atividade de hoje
Transformando uma lista em um menu

Atividade de Hoje

Completar a página inicial do “Blog Assombrado”
“Forke” o repositório do Blog Assombrado 👻
- Leia as instruções detalhadas no arquivo README.md. No geral:
  1. Converter as <div>s e <span>s em tags semânticas
    - Pode haver algumas que não possuem tags semânticas
  2. Estilizar o menu principal
  3. Colocar “Novidade!” antes dos 2 posts mais recentes
  4. Tags parecendo botões
  5. Títulos em cima das imagens
  6. Botão “voltar ao topo”

É muito comum que um site tenha um “menu principal” que é uma lista de itens na horizontal
1. Tirar o padding-left da <ul> ➡️
2. Tirar “bolinha” do item ➡️
```
ul {
  list-style-type: none;
}
```
3. Transformar <li>s em inline-block ou usar flexbox para a <ul> 🌟
4. Colocar um padding nos hyperlinks para aumentar a área “clicável”
  - Para padding-top e -bottom funcionarem, transformar em inline-block
5. (OPCIONAL) Colocar uma margem lateral entre os <li>s
6. (OPCIONAL) Fazer um efeito de hover nos hyperlinks

Referências

Capítulos 5, 6 e 12 do livro
Capítulo semantics do livro diveintohtml5.org

cefet_web

HTML parte 4

Tags semânticas, pseudocoisas,elementos de entrada e Assombrações 👻

Roteiro

Tags Semânticas

Curando a divitite

SEO e Acessibilidade na Web

Divitite

A cura da Divitite: tags semânticas

Elementos semânticos (1/3)

Elementos semânticos (2/3)

Elementos semânticos (3/3)

Exemplo de uso - Elementos semânticos

Elementos semânticos pré-HTML5

Pseudo-classes e Pseudo-elements

Mais alguns seletores

Pseudo-classes

Exemplos com pseudo-classes

Primeira manchete

Segunda manchete

Terceira

Pseudo-elements

Pseudo-elements comuns

Exemplo de ::before

Elementos de entrada e botões

Interação “livre” com usuário

Caixa de texto (p/ usuário digitar)

Rótulos (ou etiquetas)

Caixa de texto para e-mail

Outros semelhantes à caixa de texto

Números, Escala e Cor

Data e Hora

Checkbox: caixinha de marcação

Radio: escolha dentro de um grupo

Select e options (lista de opções)

Outros elementos de dados

Botões de ação

O Box Model

Como os elementos são “vistos” pelo navegador

Margem e Padding

Margem e Padding - Exemplo

Box Model (na MDN)

Visualizando a caixa de um elemento

Box Model: largura e altura

Dimensionando um elemento

Alterando o box model

Assombrações :ghost:

Faça o Blog Assombrado

Atividade de Hoje

Transformando uma lista em um menu

Referências

Tags semânticas, pseudocoisas,
elementos de entrada e Assombrações 👻