Formation HTML5 - CSS3 - RWD

Les media

Les images

Les images peuvent être affichées avec deux balises : img et picture.

img va cherhcer directement l'image appelée, si les attributes de hauteur et de largeur ne sont pas indiqués, l'image s'affiche à sa taille originale. Si on modifie, par exemple, la largeur, la hauteur se recalcul en homothétie (le rapport hauteur - largeur est respecté).

img peut être appelé dans un paragraphe, Portrait du Héroe du film drive, dans le style synthwave, dessiné numériquement par l'artiste James White, image téléchargée depuis son site signalnoise mais elle déformera l'apparence du texte autour sauf si on lui donne une flottaison en CSS.

Si la flottaison est utilisée, il ne faut pas oublier de "nettoyer" l'effet de bord de la flottaison afin que les éléments qui suivent l'image mais qui ne doivent pas appliquer l'effet de flottaison soient correctement placés.

picture peut être préférée surtout au nivea de l'adaptatif.

picture utilise un ensemble d'images, de tailles et de poids différents, qu'on va afficher selon des conditions prédéfinie dans la balise source à l'intérieur de picture

Portrait du Docteur Emmet Brown, dans le style synthwave, de la série de films Retour vers le futur, dessiné numériquement par l'artiste James White, image téléchargée depuis son site signalnoise

A savoir que l'on peut utiliser une méthode similaire directement avec img.

image composite des différentes réalisation de l'artiste James White, connu pour son style synthwave

Avec la sémantique pour le référencement, il existe une balise conteneur pour les média. figure. Elle possède une balise enfant, figcaption qui permet d'ajouter une légende à l'image : le combo image avec un nom lisible, un texte alternatif décrivant la photo plus une légende situant l'image dans un contexte particulier rend le référencement naturel optimisé.

Portrait de Dolph Lundgren, dans le style synthwave, de la série de films Retour vers le future, dessiné numériquement par l'artiste James White, image téléchargée depuis sont site signalnoise
James White a produit une série de portraits d'acteur - actrices des années 80 ou de films avec une esthétique des années 80 fantasmée (courant Synthwave), ici il s'agit de Dolph Lundgren dans les années 80 (Rocky II)

La légende sera rattachée sémantiquement au document dans la figure.

L'audio

L'audio hébergé sur le site

Il existe la balise audio, cette peut appeler directement le fichier alire mais peut aussi avoir en balise enfant une ou plusieurs balise source, qui permet de proposer plusieurs format audio, donc que le navigateur en utilise un qu'il sait lire et jouer.

Screenshot du jeu diablo, le personnage se trouve dans le village près de la fontaine, la musique associée est jouable via le lecteur sous l'image
Lire le fichier audio

Media audio hébergé sur un site tiers

Pour les media audio hébergés sur des sites tiers, il s'agit en fait de pages contenants un lecteur et la ressource audio qui sont appelés dans une iframe.

Grâce à ça, le lecteur peut être fait en HTML - CSS, les contrôles affichés sont généralement gérés avec du JavaScript

Soundcloud

Lizzo · The Sign

Spotify

Bandcamp

La vidéo

La vidéo hébergée en local

On utilise la balise video, tout comme la balise audio, peut appeler le fichier directement ou proposer plusieurs formats dans des balises source

Plusieurs sources pour une vidéo

La vidéo hébergée sur un site tier

Pour les media video hébergés sur des sites tiers, il s'agit en fait de pages contenants un lecteur et la ressource vidéo qui sont appelés dans une iframe.

Grâce à ça, le lecteur peut être fait en HTML - CSS, les contrôles affichés sont généralement gérés avec du JavaScript

Youtube

Youtube impose un format dans l'iframe, il faudra modifier le CSS voir créer un élément enveloppeur afin de rendre l'iframe adaptative

Dailymotion

Daily motion apporte une solution adaptative inclue, avec un élément conteneur et une iframe appliquant du style CSS enbalise afin d'assurer l'adaptabilité à la largeur de l'affichage (device-width)

Les iframes

Les iframes sont des cadres dans lesquels on appelle d'autres pages. Il faut que ces pages soient autorisées par le serveur qui les héberge d'être partagées par un autre site.

Un fichier txt dans une iframe