Curso IT Fundamentos HTML 015_Novos recursos HTML5

Novos recursos HTML5

HTML5 é a versão mais recente do HTML, introduzindo muitas novas tags, atributos e funcionalidades, aumentando significativamente a capacidade e a interatividade da web.

Alguns novos recursos interessantes do HTML5:

• Elemento canvas para desenho
• Elementos video e audio para reprodução de mídia
• Melhor suporte para armazenamento local offline
• Novos elementos de conteúdo especial, como article, footer, header, nav, section
• Novos controles de formulário, como calendar, date, time, email, url, search

<canvas>

O elemento HTML5 <canvas> é usado para desenhar gráficos em páginas da web. O elemento <canvas> é baseado na API de desenho JavaScript e pode ser usado para criar vários gráficos, incluindo gráficos, imagens, animações, etc.

Exemplo:

1
<canvas width="500" height="500">
2
    Seu navegador não suporta a tag HTML5 canvas.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // Obter o contexto de desenho
7
    const ctx = canvas.getContext("2d");
8
    // Desenhar círculo
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

Efeito:

<svg>

O elemento SVG HTML5 é usado para criar gráficos SVG em páginas da web. Os gráficos SVG são gráficos vetoriais baseados em XML que podem ser dimensionados sem perda de qualidade e são adequados para vários propósitos, incluindo:

Os elementos SVG incluem:

• Elemento <svg>: Define o elemento raiz dos gráficos SVG.
• Elemento <path>: Define formas de caminho.
• Elemento <rect>: Define formas retangulares.
• Elemento <circle>: Define formas circulares.
• Elemento <ellipse>: Define formas elípticas.
• Elemento <line>: Define linhas retas.
• Elemento <polygon>: Define polígonos.
• Elemento <polyline>: Define polilinhas.
• Elemento <text>: Define texto.
• Elemento <g>: Define grupos, usado para agrupar elementos SVG juntos.
• Elemento <defs>: Define atributos globais que podem ser aplicados a múltiplos elementos SVG.

Exemplo:

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

Efeito:

SVG e Canvas são ferramentas para criar gráficos em páginas da web. Ambos têm suas próprias vantagens e desvantagens e são adequados para diferentes cenários.

SVG é um gráfico vetorial baseado em XML que pode ser dimensionado sem perda de qualidade. Isso significa que os gráficos SVG podem ser exibidos em qualquer tamanho sem perder qualidade. Os gráficos SVG também podem ser manipulados e animados usando CSS e JavaScript.

Canvas é uma API de desenho baseada em JavaScript que pode criar gráficos bitmap. Isso significa que os gráficos Canvas não podem ser dimensionados sem perda de qualidade, mas podem criar gráficos mais complexos usando JavaScript. Os gráficos Canvas também podem ser manipulados e animados usando JavaScript.

Diferenças específicas entre SVG e Canvas:

• SVG adequado para cenários:

  • Gráficos que precisam de dimensionamento sem perda, como ícones, logotipos, ilustrações
  • Gráficos que precisam ser manipulados e animados usando CSS e JavaScript

• Canvas adequado para cenários:

  • Cenários que precisam criar gráficos complexos, como jogos, animações
  • Cenários que precisam de operações complexas usando JavaScript

Formulários HTML5

HTML5 introduziu alguns novos tipos de entrada e atributos para melhorar a funcionalidade e usabilidade dos formulários.

Novos elementos de formulário:

• Elemento <datalist>: Lista de opções predefinidas para o elemento <input>.

Exemplo:

1
<label for="browser">Selecione o navegador:</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

Efeito:

Novos atributos de formulário:

• Atributo autocomplete de <form> / <input>: Especifica se o form ou campo input deve ter a função de preenchimento automático. Quando o usuário começa a digitar no campo de preenchimento automático, o navegador deve exibir as opções de preenchimento no campo.

Exemplo:

1
<form action="demo-form.php" autocomplete="on">
2
  Sobrenome: <input type="text" name="fname"><br>
3
  Nome: <input type="text" name="lname"><br>
4
  E-mail: <input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

Efeito:

Novos tipos de input:

1
<form action="/submit" method="post">
2
  <label for="name">Nome:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">Endereço de e-mail:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">Data de nascimento:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">Número de telefone:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="Enviar" />
15
</form>

Efeito:

[!Resumo]