Copie de Villey Daily Activities by Slidesgo (1).pptx

HTML5
Responsable du cours
Mr. ben rkaya moez
moez.benrkaya@isi.utm.tn
menu

HTML
Fait référence à la capacité de créer des liens hypertextes (ou
hyperliens) qui relient des documents entre eux,
HyperText
01
Uutilise des balises (tags) pour structurer et formater le
contenu. (Les balises indiquent au navigateur comment
afficher le texte, les images, les liens, etc.).
Markup Language
02
2
menu

Avant de commencer
En 2014, HTML5 est officiellement finalisé et publié comme recommandation
officielle par le W3C (organisme international qui développe des standards pour
le Web afin que les gens puissent communiquer efficacement à travers Internet)
3
menu

HTML4 VS HTML5
4
Catégorie HTML4 HTML5 Innovations HTML5
Structure
Utilisation de <div> avec des id ou class (ex: <div
id="header">)
<header>, <nav>, <main>, <article>, <
section>, <footer>, etc.
Meilleure sémantique, SEO, et
accessibilité.
Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01..."> <!DOCTYPE html> Simplification et standardisation.
Encodage
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<meta charset="UTF-8"> Syntaxe raccourcie et plus intuitive.
Multimédia Dépendance à Flash ou plugins externes. <audio>, <video>, <canvas>, <svg>.
Lecture de médias sans plugins,
graphiques vectoriels (SVG) et dessin
(Canvas).
Formulaires Types d’inputs basiques (text, password, checkbox).
Nouveaux
types : email, date, color, range,
Attributs : required, placeholder, patte
rn.
Validation native, expérience
utilisateur améliorée.
APIs Fonctionnalités limitées. APIs riches : Geolocation, WebSocket
Applications web dynamiques et
interactives.
Mobile Pas de support mobile natif.
<meta name="viewport"> pour le
responsive design.
Adaptation automatique aux écrans
mobiles.
Éléments obsolètes Balises comme <font>, <center>, <frame>, <strike>.
Suppression des balises obsolètes.
Utilisation de CSS pour le style.
Code plus propre et conforme aux
standards modernes.
menu

STRUCTURE D’UN DOCUMENT HTML5
5

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>
<body>
<!– commentaires ici -->
</body>
</html>
menu

LES BALISES SÉMANTIQUES
6
Balises Description
header Représente l’en-tête d’une section ou de la page entière
Nav Contient les liens de navigation principaux (menu, sommaire)
main Délimite le contenu principal de la page (unique par page)
Article Représente un contenu autonome et indépendant
Section Définit une section thématique dans un document
Aside Contenu secondaire ou complémentaire
footer Pied de page d’une section ou de la page entière
<time datetime="2023-10-25">25 octobre 2023</time> Indique une date ou une heure (lisible par les machines via datetime
<figure>
<img src="image.jpg" alt="Description">

<figcaption>Une belle photo</figcaption>
</figure>
Contient une illustration (image, diagramme, code)
<p>Ceci est un texte <mark>important</mark>.</p> Met en évidence un texte (comme un surligneur)
<details>
<summary>Cliquez ici </summary>
<p>Contenu caché...</p>
</details>
Crée un élément interactif dépliable
menu

LES FORMULAIRES EN
HTML5
7
menu

NOUVEAUX TYPES / SELECT
8
Type Description Exemple
email Valide automatiquement un email. <input type="email" name="user_email">
url Valide une URL. <input type="url" name="website">
tel Optimisé pour les numéros de téléphone (mobile). <input type="tel" name="phone">
number Affiche des flèches pour choisir un nombre. <input type="number" min="1" max="10">
date Affiche un sélecteur de date. <input type="date" name="birthdate">
color Permet de choisir une couleur. <input type="color" name="fav_color">
range Crée un curseur de sélection (ex: 0 à 100). <input type="range" min="0" max="100">
Search Style adapté pour les champs de recherche. <input type="search" name="query">
optgroup La balise <optgroup> permet d'organiser les <option> d'un menu
déroulant en catégories visuelles. Elle est utile pour structurer des listes
longues ou complexes.
<select>
optgroup label="Voitures européennes"> <option
value="bmw">BMW</option> <option
value="audi">Audi</option> </optgroup>
<optgroup label="Voitures japonaises" disabled> <option
value="toyota">Toyota</option> <option
value="honda">Honda</option> </optgroup>
</select>
menu

NOUVEAUX ATTRIBUTS
9
Attribut Description Exemple
autocomplete Active/désactive l’autocomplétion. <input autocomplete="off">
autofocus Focus automatique sur le champ au chargement. <input autofocus>
novalidate Désactive la validation HTML5 du formulaire. <form novalidate>...</form>
datalist Liste de suggestions pour un champ.
<input list="countries" name="country">
<datalist id="countries">
<option value="France">
<option value="Canada">
</datalist>
pattern Valide le champ avec une expression régulière.
<input type="text" pattern="[A-Za-z]{3}" title="3 lettres
maximum">
placeholder Affiche un exemple de texte dans le champ. <input type="text" placeholder="Entrez votre nom">
required Rend le champ obligatoire. <input type="text" name="username" required>
download Force le téléchargement d’un lien au lieu de la navigation. <a href="#" download="fichier.txt">Télécharger</a>
menu

EXEMPLE PRATIQUE
10
<form oninput="result.value = range.value * 2">
<fieldset>
<legend>Nouveaux champs HTML5</legend>
<input type="email" placeholder="Email" required autofocus>
<input type="url" placeholder="Site web">
<input type="tel" pattern="[0-9]{10}" placeholder="Téléphone">
<input type="date" min="2023-01-01">
<input type="color" value="#ff0000">
<input type="range" id="range" value="1" min="1" max="100">
<datalist id="suggestions">
<option value="Paris">
<option value="Lyon">
</datalist>
<input list="suggestions" placeholder="Villes">
<select>
<optgroup label="Voitures européennes">
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</optgroup>
<optgroup label="Voitures japonaises" disabled>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
</optgroup>
</select>
<output name="result">0</output>
<input type="submit" value="Envoyer">
</fieldset>
</form>
<p>© 2023 - <a href="#" download="fichier.txt">Télécharger</a></p>
menu

LA MULTIMÉDIA EN
HTML5
11
menu

VIDEO
12
L'élément HTML <video> est utilisé pour afficher une vidéo sur une page Web. Ses attributs sont :
 poster : l'image qui apparaît tant que la vidéo n'est pas lancée. Si l'attribut n'est pas spécifié, il s'agira automatiquement de la
première image de la vidéo.
 autoplay : la lecture est automatiquement lancée alors que la vidéo est chargée.
 loop : lecture reprenant indéfiniment à la n de la vidéo.
 height, width : spécifient les dimensions (en px) du lecteur.
 muted : vidéo muette.
Exemple :
<video src="movie.mp4" controls width="600">Il est temps de mettre à jour votre navigateur </video>
menu

AUDIO
13
L'élément HTML <audio> est utilisé pour lire un fichier audio sur une page Web. Ses attributs sont :
 controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler indispensable,
 width : pour modifier la largeur de l'outil de lecture audio.
 loop : la musique sera jouée en boucle.
 autoplay : la musique sera jouée dès le chargement de la page.
Exemple
<audio src="horse.ogv" controls width="600">Veuillez mettre à jour votre navigateur </audio>
menu

HTML YOUTUBE VIDEOS
14
Pour lire votre vidéo sur une page Web, procédez comme suit :
 spécifier la vidéo sur YouTube
 Définir un <iframe>élément dans votre page Web
 Laissez l' src attribut pointer vers l'URL de la vidéo
 Utilisez les attributs width et height pour spécifier la dimension du lecteur
Exemple
<iframe width="420" height="315“ src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Notes
 ajouter controls=0 (controls=1 par défaut) pour ne pas afficher les commandes dans le lecteur vidéo.
 Ajoutez playlist=videoID et loop=1 laissez votre vidéo tourner en boucle pour toujours, (loop =0 par défaut)
 Ajoutez mute=1après autoplay=1pour permettre à votre vidéo de démarrer automatiquement (mais en mode muet).
menu

CRÉATION DU CANVAS -1
16
menu
 L’élément <canvas> a été introduit avec HTML5 ; c’est une API permettant générer et d’animer des graphismes avec du code
JavaScript.
 Schématiquement, l’élément <canvas> est donc un « conteneur » permettant de dessiner avec le « crayon » Javascript.
 Pour tracer un élément, il faut d’abord comprendre comment fonctionne les coordonnées de <canvas>.
Imaginons que nous ayons un <canvas> de 500 pixels sur 500 pixels:
 le point [0,0] se situe en haut à gauche
 le point [500,500] se situe en bas à droite
 le point [0,500] se situe en bas à gauche

CRÉATION DU CANVAS -2
17
Pour dessiner un <canvas> pour HTML5, voici le code minimal :
<canvas id="moncanvas" width="800" height="400"> Message alternatif </canvas>
À partir de ce moment, tout se passe du côté de JavaScript, qui va se servir de cet élément HTML pour
accéder à la surface de dessin. Pour ceci, deux fonctions sont appelées :
 getElementById() qui va permettre d'aller chercher et cibler l'élément <canvas> identifié par son attribut
id unique (ici moncanvas),
 getContext() de l'élément ainsi récupéré pour savoir dans quel contexte de dessin (2D ou 3D) le script va
pouvoir agir, et de quelles fonctions il pourra disposer. Le contexte sera l'élément central de gestion de
Canvas.
<script>
var c = document.getElementById(" moncanvas");
var ctx = c.getContext("2d");
// Le reste du script ici...
</script>

LIGNES (TRACÉS), t formes
18
Pour dessiner une ligne, voici les codes à utiliser
 On commence avec beginPath() = on démarre un nouveau tracé
 Puis, moveTo(x, y) = point de départ du tracé
 Ensuite, lineTo(x, y) = point d'arrivée du tracé (ie, on trace la ligne)
 Enfin, on peut fermer le tracé closePath()
 La forme n'apparait qu'une fois appelée l'une des deux méthodes fill() pour remplir et stroke() pour le
contour.
 Pour moduler les styles des couleurs de contour et de remplissage, nous utilisons fillStyle et strokeStyle.
 Pour styler les lignes (pour la largeur de ligne), on évoque lineWidth
Exercice : compléter les codes utiles pour réaliser ce dessin

Carré et rectangle
19
 Pour tracer un rectangle en donnant sa hauteur, sa largeur et son point de départ pour les coordonnées startx,
starty, la fonction fillRect() est indiquée.
Un rectangle de dimensions horizontale et verticale égales produira un carré.
fillRect(startx, starty, hauteur, largeur)
 Pour effacer une portion de surface , on utilise la fonction clearRect(startx, starty, hauteur, largeur) , ses
paramètres sont identiques à fillRect() mais elle gommera tout le contenu du rectangle ainsi défini.
 Exemple
var c = document.getElementById( "mon_canvas" );
var ctx = c.getContext("2d");
// Fond
ctx.fillStyle = "olivedrab";
ctx.fillRect(50,50,250,250);
// Bouche
ctx.fillStyle = "pink";
ctx.fillRect(100,200,150,50);
// Yeux
ctx.fillStyle = "powderblue";
ctx.fillRect(100,100,50,50);
ctx.fillRect(200,100,50,50);

Arcs et cercles
20
Méthode à utiliser : arc();
Il faut s'imaginer ici que l'on est dans une configuration trigonométrique. Les angles sont définis en radians
avec Math.PI; (un tour complet du cercle = 2*Math.PI) et le sens de rotation est contraire aux aiguilles d'une
montre lorsqu'il vaut true.
Les codes à utiliser pour tracer un cercle:
 On commence avec beginPath() = on démarre un nouveau tracé (comme pour la ligne)
 Puis, arc(x, y; rayon, angle de départ, angle de fin, anticlock-wise) = trace le cercle (en fait, une courbe
fermée) en délimitant la forme
 Ensuite, fill() = permet de colorer le cercle (si vous souhaitez)
 Enfin, on peut fermer le tracé closePath()
Exercice : compléter les codes utiles pour réaliser ce dessin

Copie de Villey Daily Activities by Slidesgo (1).pptx

Contenu connexe

Similaire à Copie de Villey Daily Activities by Slidesgo (1).pptx

Plus de Moez Moezm

Dernier

Copie de Villey Daily Activities by Slidesgo (1).pptx