Insérer des photos
C’est l’histoire d’une balise…
En surfant, vous avez tous constaté qu’un site web. C’est plus joli avec des… “Images”. Et, comme dirait un de mes formateurs : “ Ça donne de la vie !”. Mais si vous êtes des codeurs en herbe, comment on fait ça ?
En HTML, nous avons une balise magique : <img/>.
Elle est dite auto-fermante… Késako ? en gros, il n’y a pas besoin de déclarer la balise d’ouverture et celle de fermeture.
<!-- Bonne notation -->
<img />
<!--Mauvaise notation -->
<img></img>
Dans l’idée, enfin pour l’instant cela ne va rien afficher. Rajoutons un attribut à la balise qui est le src…
<img src=""/>
Il y a deux façons de procéder, la première est d’utiliser une image dans notre projet en local. La seconde est d’utiliser une URL.
Utiliser une image en local
Depuis la barre de recherche de votre pc, ouvrez un éditeur de commande (PowerShell).
Depuis le terminal, on va créer un dossier en ligne de commande :
PS C:\Users\ECLAP>
PS C:\Users\ECLAP>mkdir new-projet;
Quand c’est terminé, on vient sélectionner le dossier de notre projet.
PS C:\Users\ECLAP> cd .\new-project\
PS C:\Users\ECLAP\new-project> code
Dès lors, une nouvelle fenêtre apparait :
Tout en haut à droite, on va venir créer une page HTML:
On le nommera : « index.html ».
Deuxième étape : on va prendre une image au hasard et la copier à l’intérieur de votre dossier « New-project ».
À présent, on indique dans l’attribut src qu’on recherche une image à l’intérieur de notre dossier en écrivant comme ceci : »./ » :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="./fond-motifs-planches-bois-fonce.jpg" alt="" />
</body>
</html>
Utiliser une image depuis une URL
Pour afficher une image à partir d’une URL rien de plus facile :
Il suffit juste de copier l’url à l’intérieur de votre attribut src !
Et le SEO dans tous ça ?
Dans l’idée, pour être dans les clous, il faut rajouter l’attribut alt=” ” dans votre balise. Ainsi vous participer à améliorer l’accessibilité en décrivant l’image aux robots de google et ils adorent ça car plus vous les renseigner et mieux vous êtes référencé.
Insérer des vidéos de la musique…
La balise <video>
Pour insérer des vidéos dans une page HTML, vous pouvez utiliser la balise <video>. Cette balise permet de spécifier plusieurs sources vidéo.
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Votre navigateur ne supporte pas la balise vidéo.
</video>```
Libre à vous de rajouter des options en voici quelques uns:
controls : Ajoute les contrôles de lecture (lecture, pause, volume, etc.) à la vidéo.
autoplay : Démarre automatiquement la lecture de la vidéo dès que la page est chargée. ( pas tres recommandé, pour eviter une experience utilisateur négative.
loop : La vidéo recommence automatiquement à jouer depuis le début lorsqu’elle est terminée.
muted : Démarre la vidéo en mode muet( ca coupe le son).
preload : Indique au navigateur comment gérer le chargement de la vidéo. Les valeurs possibles sont:
auto : Charge la vidéo entière dès que la page est chargée.
metadata : Ne charge que les métadonnées (durée, dimensions, etc.).
none : Ne charge rien jusqu’à ce que l’utilisateur commence la lecture.
A la fin si vous utilisé toutes ces options cela devrait ressembler a ceci :
<video width="640" height="360" controls autoplay loop muted preload="auto" poster="image.jpg" playsinline>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Votre navigateur ne supporte pas la balise vidéo.
</video>
Et pour la musique ?
C’est la balise <audio> ,qui s’occupe de gérer les pistes audios, sur votre navigateur web.
Pour les options, c’est quasiment les mêmes attributs.
<audio controls autoplay muted loop preload="auto">
<source src="audio.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la balise audio.
</audio>
La balise <iframe>
La balise <iframe> en HTML permet d’insérer du contenu provenant d’une autre source ou page web dans votre propre page. Elle est souvent utilisée pour intégrer des vidéos et de la musique hébergées sur des plateformes externes comme YouTube, Vimeo, SoundCloud, etc.
Ainsi il est super facile d’integrer une video. prenons pour exemple Youtube:
Recherchez le bouton partager et cliquer
Puis cliquer sur le bouton intégrer
Et une fois terminer cliquer sur copier pour récupérer l’iframe de la video
Et Voila c’est la fin, j’espère que cela vous aidera à mieux comprendre .
