Introduction aux langages HTML et CSS
Pour ajouter une image dans une page web on utilise la balise <img/>. C’est une balise sans contenu – auto-fermante.
L’url ou le chemin vers l’image est indiqué par l’intermédiaire de l’attribut src.
L’attribut optionnel alt permet d’ajouter une description.
Les attributs optionnels width et height permettent d’ajuster la taille de l’image.
Pour intégrer une piste audio ou une vidéo dans une page web on utilisera respectivement les balises <audio> et <video>.
Comme pour les images, l’url ou le chemin vers la ressource est indiqué par l’intermédiaire de l’attribut src.
L’attribut controls="true" permet d’ajouter les contrôles du navigateur.
L’attribut autoplay="true" permet de lancer la lecture automatiquement.
Pour une piste audio ou vidéo donnée, il est possible de spécifier plusieurs sources en utilisant des balises <source src="une/url">.
Spécifier plusieurs sources permettra par exemple au navigateur de sélectionner automatiquement les formats qu’il est capable de lire, ou de pallier à un lien mort.
Une image responsive s’adapte automatiquement à son contexte (p. ex. la taille de l’écran.).
Cela permet notamment de :
Il est possible de définir des images responsives avec la balise <img> et les attributs srcset et sizes ; ou bien avec les balises <picture> et <source>
Attribut src : url de l’image par défaut, pour éviter tout dysfonctionnement.
Attribut srcset : une liste d'images séparées par des virgules. Chaque image est définie par une url et un indicateur suivi directement par la lettre 'w' (largeur) ou 'x' (densité de pixel).
Attribut sizes : un ensemble de tailles de source possible afin de définir quelle image afficher. Chaque taille est composée d'une condition (media) et d’une largeur en pixel.
La balise <picture> est construite sur le même modèle que <audio> et <video>. Elle permet de définir plusieurs sources (<source>) pour une image.
La balise <img>> permet d’établir une image par défaut
Pour chaque <source> on utilisera les attributs srcset (contenant uniquement l’url de la ressource) et media (la condition média).
<header> : en-tête d’une page web, pouvant contenir un bandeau (image) ou la navigation
<nav> : ensemble de liens permettant de naviguer au sein d’une page ou d’un site web.
<article> : un groupe d’informations autonome (ré-utilisable indépendamment du contexte)
<section> : un groupement thématique de contenus. /!\ une section n’est pas un article, elle fait généralement partie d’un ensemble plus vaste.
<aside> : aparté
<footer> : pied de page
L’élément <div> (division) est un conteneur générique de type block.
L’élément <span> est également un conteneur générique mais de type inline cette fois.
En théorie, ils ne devraient pas être utilisés lorsqu’une autre balise avec une portée sémantique (article, section, nav, etc.) peut être employée à leur place.
On a généralement recours à <div> et <span> pour la mise en forme conjointement avec leurs attributs id et class.
Réalisez un petit site web (2 à 3 pages web maximum) sur un sujet de votre choix (passion, artiste, groupe de musique, sujet pris au hasard sur wikipédia…).
Le contenu des pages doit être correctement structuré (conteneurs HTML) et le texte formaté.
Vous veillerez également à faire figurer des liens (ancres et liens externes) ainsi que du contenu multimédia (images, vidéos ou sons).
Vous validerez vos pages sur https://validator.w3.org/ et le cas échéant vous tenterez de régler les messages d’erreur.
Vous penserez enfin à me faire parvenir votre réalisation !
NB : par convention, la première page d’un site web est nommée index.html.