Cours IT Bases HTML 015_Nouvelles fonctionnalités HTML5

Nouvelles fonctionnalités HTML5

HTML5 est la dernière version de HTML et introduit de nombreuses nouvelles balises, attributs et fonctionnalités, améliorant considérablement la fonctionnalité et l’interactivité du web.

Quelques nouvelles fonctionnalités intéressantes dans HTML5 :

• L’élément canvas pour le dessin
• Les éléments video et audio pour la lecture multimédia
• Un meilleur support pour le stockage local hors ligne
• De nouveaux éléments de contenu spéciaux tels que article, footer, header, nav, section
• De nouveaux contrôles de formulaire tels que calendar, date, time, email, url, search

<canvas>

L’élément <canvas> HTML5 est utilisé pour dessiner des graphiques sur des pages web. L’élément <canvas> est basé sur l’API de dessin JavaScript et peut être utilisé pour créer divers graphiques, y compris des diagrammes, des graphiques, des animations, etc.

Exemple :

1
<canvas width="500" height="500">
2
    Votre navigateur ne prend pas en charge la balise canvas HTML5.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // Obtenir le contexte de dessin
7
    const ctx = canvas.getContext("2d");
8
    // Dessiner un cercle
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

Effet :

<svg>

L’élément SVG HTML5 est utilisé pour créer des graphiques SVG sur des pages web. Les graphiques SVG sont des graphiques vectoriels basés sur XML qui peuvent être redimensionnés sans perte et sont adaptés à divers usages, notamment :

Les éléments SVG comprennent :

• Élément <svg> : Définit l’élément racine du graphique SVG.
• Élément <path> : Définit des formes de chemin.
• Élément <rect> : Définit des formes rectangulaires.
• Élément <circle> : Définit des formes circulaires.
• Élément <ellipse> : Définit des formes elliptiques.
• Élément <line> : Définit des lignes droites.
• Élément <polygon> : Définit des polygones.
• Élément <polyline> : Définit des polylignes.
• Élément <text> : Définit du texte.
• Élément <g> : Définit un groupe, utilisé pour regrouper des éléments SVG.
• Élément <defs> : Définit des attributs globaux qui peuvent être appliqués à plusieurs éléments SVG.

Exemple :

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

Effet :

SVG et Canvas sont tous deux des outils pour créer des graphiques sur des pages web. Ils ont chacun leurs propres avantages et inconvénients et sont adaptés à différents scénarios.

SVG est un graphique vectoriel basé sur XML qui peut être redimensionné sans perte. Cela signifie que les graphiques SVG peuvent être affichés à n’importe quelle taille sans perdre en qualité. Les graphiques SVG peuvent également être manipulés et animés avec CSS et JavaScript.

Canvas est une API de dessin basée sur JavaScript qui peut créer des graphiques bitmap. Cela signifie que les graphiques Canvas ne peuvent pas être redimensionnés sans perte, mais des graphiques plus complexes peuvent être créés avec JavaScript. Les graphiques Canvas peuvent également être manipulés et animés avec JavaScript.

Différences spécifiques entre SVG et Canvas :

• SVG est adapté aux scénarios :

  • Graphiques nécessitant un redimensionnement sans perte, comme des icônes, des logos, des illustrations
  • Graphiques nécessitant une manipulation et une animation avec CSS et JavaScript

• Canvas est adapté aux scénarios :

  • Scénarios nécessitant des graphiques complexes, comme des jeux, des animations
  • Scénarios nécessitant des opérations complexes avec JavaScript

Formulaires HTML5

HTML5 introduit de nouveaux types d’entrée et attributs pour améliorer la fonctionnalité et la facilité d’utilisation des formulaires.

Nouveaux éléments de formulaire :

• Élément <datalist> : Utilisé pour une liste d’options prédéfinies de l’élément <input>.

Exemple :

1
<label for="browser">Sélectionner le navigateur :</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>

Effet :

Nouveaux attributs de formulaire :

• Attribut autocomplete de <form> / <input> : Spécifie que le champ form ou input doit avoir une fonction de saisie automatique. Lorsque l’utilisateur commence à saisir dans un champ de saisie automatique, le navigateur doit afficher les options remplies dans ce champ.

Exemple :

1
<form action="demo-form.php" autocomplete="on">
2
  Nom de famille :<input type="text" name="fname"><br>
3
  Prénom :<input type="text" name="lname"><br>
4
  Email :<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

Effet :

Nouveaux types d’input :

1
<form action="/submit" method="post">
2
  <label for="name">Nom :</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">Adresse e-mail :</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">Date de naissance :</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">Numéro de téléphone :</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="Soumettre" />
15
</form>

Effet :

[!Résumé]