Les balises <meta> sont situées dans l’élément <head> du document. Elles contiennent des méta-données : des données sur le document lui-même (littéralement, des « données à propos des données »).
meta charset="utf-8">
<meta name="description" content="apprenez plus de tours en HTML">
<meta name="author" content="Samy Delahaye">
<meta name="keywords" content="html web">
Cet attribut déclare l’encodage utilisé par la page. Bien que le standard ne fixe pas d’encodage particulier, il recommande d’utiliser UTF-8.
Cet attribut définit le nom d’un métadonnée au niveau du document. Le nom de la métadonnée document est associé à une valeur contenue dans l’attribut content. Quelques noms possibles et la signification de leurs valeurs (contenues dans l’attribut content) sont:
application-name définit le nom de l’application web utilisée dans la page,
author le nom de l’auteur du document (pas de contrainte de format)
description contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.
generator contient l’identifiant du logiciel ayant généré la page (pas de contrainte de format)
keywords contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.
publisher le nom de l’éditeur du document (sans contrainte de format). Cela peut être le nom d’une institution.
robots définit le comportement que les robots d’indexation devraient respecter.
viewport donne une indication quant à la taille du viewport (vue virtuelle). Cette information est utilisée par les terminaux mobiles uniquement.
Attention
A une époque pas si lointaine, le bourrage de la meta keywords afin d’améliorer son référencement était monnaie courante. Depuis son utilisation n’est plus recommandée.
Elle permet de définir le comportement que les robots d’indexation devraient respecter. C’est une liste de valeurs séparées par des virgules. La liste qui suit définit quelques-unes des valeurs que l’on peut utiliser :
index Permet au robot d’indexer la page
noindex Interdit au robot d’indexer la page
follow Permet au robot de suivre les liens contenus dans la page
nofollow Interdit au robot de suivre les liens contenus dans la page
noarchive Empêche le moteur de recherche de mettre en cache le contenu de la page
<meta name="robot" content="index, nofollow">
Attention
Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage.
Indication
Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :
si name est renseigné, c’est une métadonnée de document s’appliquant à la page entière,
si http-equiv est renseigné, c’est une information transmise au serveur web indiquant comment la page doit être servie (pragma directive en anglais),
si charset est renseigné, c’est une déclaration sur le jeu de caractères.
Les méta-données peuvent être fournies dans différentes langues, spécifiées dans l’attribut lang à l’aide d’un code spécifié par BCP47.
Note
L’attribut lang peut en fait être utilisé sur n’importe quelle balise, y compris dans le corps (<body) du document.
<meta name="description" lang="en"
content="learn advanced tricks in HTML" />
<meta name="description" lang="fr"
content="apprenez plus de tours en HTML" />
Les caractères suivants ont une signification spéciale en HTML, donc il faut utiliser un code spécial (entité) pour les afficher :
Symbole |
Entités |
Signification |
|---|---|---|
|
|
lower than |
|
|
greater than |
|
|
double quote |
|
|
simple quote |
|
|
ampersand (esperluette) |
Un tableau (ou une table) permet d’organiser des information sur deux dimensions. Une table (table) est composée de lignes (rows), elles-mêmes composées de cellules (cells). On considère deux sortes de cellules : les cellules d’en-tête (header cells) et les cellules de données (data cells).
<table>
<thead>
<tr>
<th></th>
<th>Medium</th>
<th>Large</th>
</tr>
</thead>
<tbody>
<tr>
<th>Americano</th>
<td>1.50€</td>
<td>1.90€</td>
</tr>
<tr>
<th>Latte</th>
<td>1.90€</td>
<td>2.10€</td>
</tr>
<tr>
<th>Cappucino</th>
<td>1.90€</td>
<td>2.10€</td>
</tr>
</tbody>
</table>
Une cellule peut s’étendre sur plusieurs lignes (vers le bas) et/ou colonnes (vers la droite) à l’aide des attributs rowspan et colspan.
En programmation, la sémantique fait référence au sens d’une partie de code — par exemple « quel effet aura l’exécution de cette ligne de code ? », ou « quel est le rôle ou le but de cet élément HTML » (plutôt que « à quoi ressemble-t-il ? »).
Par exemple, l’élément <h1> est un élément sémantique qui donne au texte qu’il contient le rôle (ou le sens) de « titre de premier niveau de votre page ».
Il s’agit d’une extension du Web standardisée par le W3C qui recommande l’uttilisation de formats de données et de protocoles d’échange normés. Cela est décrit au sein du RDF (Resource Description Framework) qui nous fournit un format de base des données.
En informatique il existe deux catégories de fichiers: les documents lisibles par l’homme et les données lisibles par la machine.
Les pages web sont conçues pour être lues uniquement par des personnes et non par des machines. Le web sémantique vise à atteindre une vision de l’information qui permet d’être lisible par les humains et par les machines.
L’utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c’est-à-dire leur sens, plutôt que de se borner à définir leur présentation (ou apparence).
Quelques éléments sémantiques:
|
|
|
|
Avant pour représenter un article nous utilisions un marquage équivalent:
<!-- ceci est un article -->
<div>
<h2>The Last Jedi trailer is out !</h2>
<ul>
<li>Written by Samy Delahaye</li>
<li>On Thurday 21, sept. 2017</li>
</ul>
<p>Insert some fanboy text here !</p>
<a href=".." title="..">Read more !</a>
</div>
Voici la même chose en HTML5:
<article>
<h2>The Last Jedi trailer is out !</h2>
<dl>
<dt>Author</dt>
<dd>
Written by <a href="https://ugaritic.fr" rel="author">Samy Delahaye</a>
</dd>
<dt><time datetime="2017-09-21">On Thurday 21, sept. 2017</time></dt>
</dl>
<p>Insert some fanboy text here !</p>
<a href=".." title="..">Read more !</a>
</article>
Nous utilisons des balises plus structurantes et ayant un sens une fois combinées entre elles.
L’élément HTML section représente une section générique d’un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.
Ainsi, un menu de navigation devrait être délimité par un élément nav mais une liste de résultat de recherche, qui ne dispose pas d’élément spécifique pour être représentée, pourrait être englobée dans un élément section.
L’élément HTML article représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d’utilisateur ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment.
L’élément HTML aside (en anglais, « aparté ») représente une partie d’un document dont le contenu n’a qu’un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d’encadrés ou de boîtes de légende.
<!DOCTYPE html>
<html>
<head>
<title>Hello HtmlWORLD!</title>
<meta charset='UTF-8' />
</head>
<body>
<header>
<h1>HelloHtml5</h1>
<a href="..">..</a>
<a href="..">..</a>
</header>
<main>
<section>
<h2>Latest news</h2>
<article>
<h3>..</h3>
</article>
<article>
<h3>..</h3>
</article>
</section>
<aside>
<a href="..">..</a>
</aside>
</main>
<footer>
<p>© Gandalf 2019</p>
</footer>
</body>
</html>
Note
Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d’indiquer l’état spécifique dans lequel l’élément doit être pour être ciblé par la déclaration.
Syntaxe
sélecteur:pseudo-classe {
propriété: valeur;
}
Les pseudo-classes permettent d’appliquer un style à un élément non seulement en fonction de son contenu dans l’arbre du document mais aussi en fonction de facteurs externes (l’historique de navigation par exemple avec :visited ; le statut du contenu avec :checked ; la position de la souris :hover).
:link{}
:visited{}
:active{}
:focus{}
:hover{}
:target{}
La pseudo-classe :active permet de cibler un élément lorsque celui-ci est activé par l’utilisateur. Elle permet de fournir un feedback indiquant que l’activation a bien été détectée par le navigateur. Lorsqu’on a une interaction avec un pointeur, il s’agit généralement du moment entre l’appui sur le pointeur et le relâchement de celui-ci.
La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.
Cible |
Sélecteurs |
|---|---|
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
|
<div>
<p>Ce paragraphe est mis en forme car c'est un élément
p ET que c'est le premier fils de l'élément div.</p>
<p>En revanche, ce paragraphe n'est pas mis en forme
car ce n'est pas le premier !</p>
</div>
<div>
<h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
un paragraphe.</h2>
<p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
le premier fils !</p>
</div>
|
La pseudo-classe :focus permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l’aide du clavier, soit il est activé avec la souris comme par exemple le champ d’un formulaire).
La pseudo-classe :hover permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer.
La pseudo-classe :link permet de sélectionner les liens à l’intérieur d’éléments. Elle sélectionnera tout lien n’ayant pas été visité.
La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède \(an+b-1\) éléments voisins (au même niveau) avant lui dans l’arbre du document pour des valeurs entières \(n\) et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d’un élément dont les positions correspondent au motif \(an+b\).
/* Cible les éléments en fonction de leur position dans */
/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
/* soit le type de l'élément */
body :nth-child(4n) {
background-color: lime;
}
On peut également utiliser les valeurs avec un mot-clé:
odd Représente les éléments dont la position est impaire par rapport à leurs voisins.
even Représente les éléments dont la position est paire par rapport à leurs voisins.
La pseudo-classe :target permet de cibler l’unique élément (s’il existe) dont l’attribut id correspond au fragment d’identifiant de l’URI du document.
La pseudo-classe :visited permet de modifier l’aspect d’un lien après que l’utilisateur l’a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.
Note
Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l’élément ciblé par la règle.
Syntaxe
sélecteur::pseudo-élément {
propriété: valeur;
}
::first-letter
::first-line
::before
::after
En CSS, ::after crée un pseudo-élément qui sera le dernier enfant de l’élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content. Par défaut, ce contenu est de type « en ligne ».
/* Ajoute une flèche après les liens */
a:after {
content: "→";
}
::before crée un pseudo-élément qui sera le premier enfant de l’élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS content. Par défaut, l’élément créé est de type en-ligne (inline).
/* On ajoute un coeur avant les liens */
a:before {
content: "♥";
}
Le pseudo-élément ::first-letter sélectionne la première lettre de la première ligne d’un bloc, si elle n’est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.
/* Sélectionne la première lettre */
/* des éléments <p> */
p::first-letter {
color: red;
font-size: 130%;
}
Le pseudo-élément ::first-line applique la décoration à la première ligne d’un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant ::first-line ne ciblent pas un élément HTML réel.
/* Sélectionne la première ligne */
/* des éléments <p> */
::first-line {
color: red;
text-transform: uppercase;
}
Note
La propriété position définit la façon dont un élément est positionné dans un document. Les propriétés top, right, bottom et left déterminent l’emplacement final de l’élément positionné.
Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, fixed ou sticky. Par défaut tout élément est positionné en static.
Un élément positionné de façon relative est un élément dont la propriété de position calculée est relative. Dans ce cas, les propriétés top ou bottom indiquent le décalage vertical à appliquer et left ou right indiquent le décalage horizontal.
Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute ou fixed. Dans ce cas, les propriétés top, bottom, right et left indiquent les distances entre les bords de l’élément et les bords du bloc englobant (c’est-à-dire l’ancêtre par rapport auquel l’élément est positionné). Si l’élément possède des marges, elles sont ajoutées aux décalages.
Un élément positionné en adhérence est un élément dont la propriété de position calculée vaut sticky. Un tel élément se comporte comme un élément positionné de façon relative jusqu’à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de top) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu’à atteindre le bord opposé du bloc englobant.
La propriété box-shadow ajoute des ombres à la boîte d’un élément via une liste d’ombres séparées par des virgules. Une boîte d’ombre est définie avec des décalages horizontal et vertical par rapport à l’élément, avec des rayons de flou et d’étalement et avec une couleur.
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
La propriété text-shadow ajoute des ombres au texte. Elle accepte une liste d’ombres à appliquer au texte et aux décorations de l’élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l’élément, de rayon de flou et de couleur.
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
Note
Technique qui consiste à réinitialiser à zéro la valeur de certains éléments HTML afin d’éviter une partie des différences d’affichage sur les divers navigateurs.
Avertissement
Il s’agit d’un fichier css à télécharger et à inclure dans votre page ! Vous ne devez en choisir qu’un seul !
La règle @media permet d’associer un ensemble d’instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média.
Les requêtes média (media queries) permet de modifier l’apparence d’un site ou d’une application en fonction du type d’appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d’écran ou la largeur de la zone d’affichage (viewport) par exemple).
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
Une requête média (type <media-query>) est composée d’un type de média (optionnel) et/ou de différentes caractéristiques relatives au média.
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { line-height: 1.4 }
}
@media (height > 600px) {
body { line-height: 1.4; }
}
@media (400px <= width <= 700px) {
body { line-height: 1.4; }
}
Les appareils mobiles (smartphones notament) « trichent » en simulant un écran plus grand que la réalité, afin d’afficher sans (trop de) problème les pages non responsive. Il est possible (et souhaitable) de désactiver ce comportement, lorsqu’on souhaite avoir un meilleur contrôle de l’affichage sur ces appareils.
La balise suivante force le navigateur à utiliser la largeur réelle de l’appareil.
<meta name="viewport" content="width=device-width">
On peut également limiter le niveau de zoom,
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=2">
voire empêcher totalement l’utilisateur de zoomer.
<meta name="viewport" content="width=device-width, user-scalable=no">
Note
Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes.
La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. Une grille CSS va vous permettre de gérer ce gabarit très facilement. L’idée c’est de partager votre site en un nombre défini de colonnes. Le gabarit de votre site sera défini en fonction de ces colonnes.
Deux possibilité pour utiliser les grilles CSS:
Les « librairies » CSS qui fournissent une grille comme Simple Grid
ou encore mieux, le module CSS Grid layout.
Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l’espace d’affichage en régions utilisables par une application ou en définissant des relations de taille, position et d’empilement entre les éléments HTML.
Qu’est ce qu’une grille ?
Comme les tableaux, la grille permet d’aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n’a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n’auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d’un conteneur en grille peuvent être positionnés afin qu’ils se chevauchent ou qu’ils se comportent comme des éléments positionnés.
On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité fr créée à cet effet.
Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d’une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n’ont pas été placés explicitement.
Lorsqu’une grille explicite n’est pas définie, la spécification prend en charge le contenu défini en dehors d’une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu” « ajouter autant de colonnes que possible dans le conteneur ».
On peut contrôler l’alignement des éléments dans une zone de la grille, ainsi que celui de l’ensemble de la grille.
À partir du moment où on crée un conteneur en déclarant la propriété display: grid ou display: inline-grid sur un élément, tous les enfants directs de cet élément deviennet des éléments de grille.
Cet exemple montre une section avec une classe .wrapper et cinq éléments enfants.
<section class="wrapper">
<article>Un</article>
<article>Deux</article>
<article>Trois</article>
<article>Quatre</article>
<article>Cinq</article>
</section>
|
.wrapper {
display: grid;
}
|
Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n’a qu’une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement.
En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d’afficher la grille correspondante dans le navigateur.
Les propriétés grid-template-columns et grid-template-rows permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l’espace entre deux lignes d’une grille.
On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.
Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l’une des cellules de la grille.
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Les pistes peuvent être définies à l’aide de n’importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l’espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l’espace disponible.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
L’exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L’espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d’une fraction.
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
peut également s’écrire :
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Dans ces exemples nous avons défini nos colonnes à l’aide de la propriété grid-template-columns, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.
La grille explicite est constituée des pistes définies par les propriétés grid-template-columns et grid-template-rows. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d’étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c’est-à dire qu’elles s’ajusteront à leur contenu.
On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts grid-auto-rows et grid-auto-columns.
Dans l’exemple ci-après nous utilisons grid-auto-rows pour que les rangées de la grille implicite fassent 200 pixels de haut.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
Que l’on crée une grille explicite, ou que l’on définisse la taille des pistes créées implicitement, il peut être utile d’assigner une taille minimum, qui s’agrandit pour s’adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu’elles aillent jusqu’à 300 pixels de haut si le contenu le nécessite.
La fonction minmax() permet ce comportement. Dans l’exemple suivant nous utilisons minmax() comme valeur de la propriété grid-auto-rows. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s’adaptera à la hauteur du contenu.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l’avons vu lorsqu’une grille est définie sur un élément ses enfants viennent se positionner chacun dans l’une des cellules de la grille.
Il est possible de changer la position d’une cellule dans la grille.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.first-article {
grid-column: 2; /* Take place on second column */
grid-row: 3; /* Take place on third row */
}
.second-article {
grid-row: 1;
grid-column: 1/3; /* Take place on first and second column */
grid-column: 1 / span 2; /* Make exactly the same as above */
}
Les gouttières entre les cellules sont définies à l’aide des propriétés grid-column-gap et grid-row-gap, ou de la propriété raccourcie grid-gap. Dans l’exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 1em;
}
Note
Cet exercice a pour but de récapituler l’ensemble des notions vues ensemble. Nous allons ainsi revoir les structures HTML vus ensemble et les bases de CSS.
L’objectif est de créer une page d’accueil listant l’ensemble des épisodes cinématographique de la saga Star Wars et une page dédiée pour chaque épisode.
Nous pouvons adopter la structuration suivante:
tp5/
├── episodes
├── imgs
├── index.html
└── styles
À faire
Est-il utile de rappeler qu’il faut toujours commencer par le squelette HTML5 ?
Un titre de niveau 1 contenant cette image
un titre de niveau 2 avec comme texte le titre de l’épisode précédé de son numéro en chiffre latin
l’affiche du film
un lien vers la page dédiée du film
episodes/episodex.html:chaque document sera une page détaillée de chaque film,
contenant une liste descriptive avec les informations listées ci-dessous, le synopsis du film, le poster et un lien vers le film suivant et/ou précédent selon les cas
Indication
Voici un lien vers les posters et les informations pour chaque film:
Titre |
Synopsis |
Directeur |
Scénario |
Producteurs |
Durée |
Date de sortie |
|---|---|---|---|---|---|---|
The Phantom Menace |
After a millennia, an ancient evil returns seeking revenge. Meanwhile, Jedi Knight Qui-Gon Jinn discovers Anakin Skywalker: a young slave boy unusually strong with the Force. |
George Lucas |
George Lucas |
Lucasfilm |
136 |
1996 |
Attack of the Clones |
Following an assassination attempt on Senator Padmé Amidala, Jedi Knights Anakin Skywalker and Obi-Wan Kenobi investigate a mysterious plot that could change the galaxy forever. |
George Lucas |
George Lucas |
Lucasfilm |
142 |
2002 |
Revenge of the Sith |
The evil Darth Sidious enacts his final plan for unlimited power – and the heroic Jedi Anakin Skywalker must choose a side. |
George Lucas |
George Lucas |
Lucasfilm |
140 |
2005 |
Solo |
Board the Millennium Falcon and journey to a galaxy far, far away in Solo: A Star Wars Story, an all-new adventure with the most beloved scoundrel in the galaxy. Through a series of daring escapades deep within a dark and dangerous criminal underworld, Han Solo meets his mighty future copilot Chewbacca and encounters the notorious gambler Lando Calrissian, in a journey that will set the course of one of the Star Wars saga’s most unlikely heroes. |
Ron Howard |
Lawrence Kasdan, Jon Kasdan |
Lucasfilm |
135 |
2018 |
Rogue One |
From Lucasfilm comes the first of the Star Wars standalone films, “Rogue One: A Star Wars Story,” an all-new epic adventure. In a time of conflict, a group of unlikely heroes band together on a mission to steal the plans to the Death Star, the Empire’s ultimate weapon of destruction. This key event in the Star Wars timeline brings together ordinary people who choose to do extraordinary things, and in doing so, become part of something greater than themselves. |
Gareth Edwards |
Chris Weitz, Tony Gilroy |
Lucasfilm |
133 |
2016 |
A New Hope |
With the planet-destroying power of the Death Star, the Empire looks to cement its grip on the galaxy. Meanwhile, farm boy Luke Skywalker rises to face his destiny. |
George Lucas |
George Lucas |
Lucasfilm |
125 |
1977 |
The Empire Strikes Back |
While the Death Star has been destroyed, the battle between the Empire and the Rebel Alliance rages on…and the evil Darth Vader continues his relentless search for Luke Skywalker. |
George Lucas |
George Lucas |
Lucasfilm |
127 |
1980 |
Return of the Jedi |
Luke Skywalker leads a mission to rescue his friend Han Solo from the clutches of Jabba the Hutt, while the Emperor seeks to destroy the Rebellion once and for all with a second dreaded Death Star. |
George Lucas |
George Lucas |
Lucasfilm |
135 |
1983 |
The Force Awakens |
Thirty years after the Battle of Endor, a new threat has risen in the form of the First Order and the villainous Kylo Ren. Meanwhile, Rey, a young scavenger, discovers powers that will change her life – and possibly save the galaxy. |
|
|
Lucasfilm |
135 |
2015 |
The Last Jedi |
Rey has found the legendary Luke Skywalker, hoping to be trained in the ways of the Force. Meanwhile, the First Order seeks to destroy the remnants of the Resistance and rule the galaxy unopposed. |
Rian Johnson |
Rian Johnson |
Lucasfilm |
152 |
2017 |
Note
Dans cet exercice, nous allons concevoir un formulaire de contact simple.
Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu’il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.
Indication
Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l’utilisateur.
Du point de vue de l’expérience utilisateur, il est important de garder à l’esprit que plus vous demandez d’informations, plus vous risquez que votre utilisateur s’en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin.
La conception de formulaires est une phase importante de la construction d’un site internet ou d’une application.
Votre croquis est réalisé ? Vous pouvez passer à la suite.
![@startuml
@startsalt
{+
Username | "username "
Email | " "
Message | " "
[Reset] | [Submit]
}
@endsalt
@enduml](../../_images/plantuml-61352a84778d594699c9a35513cc2fbde695cf80.png)
Croquis de notre premier formulaire¶
À faire
Créer un squelette HTML5 de base,
Au sein de ce squelette en vous basant sur les éléments vus en cours, créer votre formulaire grâce aux éléments HTML suivant: <form>, <label>, <input>, <textarea> et <button>,
Encapsuler chaque couple label:input et le bouton dans un div,
Les noms des champs seront user_name, user_mail et user_msg,
L’attribut action de notre formulaire prendra comme url https://ingen.ugaritic.fr/form/contact/.
Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu’il est plutôt laid.
À faire
Créer une feuille de style (au sein d’un répertoire style) pour mettre en forme votre formulaire.
Ajouter le code ci-dessous à votre feuille de style:
form {
/* Uniquement centrer le formulaire sur la page */
margin: 0 auto;
width: 400px;
/* Encadré pour voir les limites du formulaire */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* Pour s'assurer que tous les champs texte ont la même police.
Par défaut, les textarea ont une police monospace */
font: 1em sans-serif;
/* Pour que tous les champs texte aient la même dimension */
width: 300px;
box-sizing: border-box;
/* Pour harmoniser le look & feel des bordures des champs texte */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* Pour souligner légèrement les éléments actifs */
border-color: #000;
}
textarea {
/* Pour aligner les champs texte multi-ligne avec leur étiquette */
vertical-align: top;
/* Pour donner assez de place pour écrire du texte */
height: 5em;
}
.button {
/* Pour placer le bouton à la même position que les champs texte */
padding-left: 90px; /* même taille que les étiquettes */
}
button {
/* Cette marge supplémentaire représente grosso modo le même espace que celui
entre les étiquettes et les champs texte */
margin-left: .5em;
}
Notre formulaire devrait avoir meilleure allure désormais. Essayez donc de changer la couleur du texte des champs ou encore de leurs bordures et pourquoi pas celle de notre bouton ?
Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l’information à un utilisateur et de les adresser à un serveur web.
L’élément <form> définit où et comment les données sont envoyées, merci aux attributs action et method.
Mais ce n’est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.
Pour nommer vos données vous devez utiliser l’attribut name pour identifier bien précisément l’élément d’information collecté par chacun des widgets.
À faire
Ajouter les attributs name à chaque champs du formulaire
Ajouter les attributs for à chaque libellé
Et si nous soumettions notre formulaire à présent ?
Félicitations vous venez de découvrir les bases des formulaires.
À faire
GET pour commander des pizzas en expérimentant les différents types de champs:text
password
range
date
color
checkbox
radio
number
time
etc.
Astuce
Vous pouvez (devez?) utiliser le processeur fourni à cette adresse (en valeur de l’attribut action de votre formulaire) pour tester les différents types de champs.
<form method="GET" action="url_action">
</form>
Dans votre document créer un second formulaire en méthode POST en utilisant toujours le processeur fourni à cette adresse.
Que constatez vous lors de la soumission du formulaire ?
Avec les notions vu sur CSS essayez de mettre en forme vos formulaires pour les rendre plus attrayant.
Attention
Pensez à la validation W3C pour vos documents HTML et aussi pour vos feuilles de style.
Note
Le HTML sémantique est l’utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c’est-à-dire leur sens, plutôt que de se borner à définir leur présentation (ou apparence).
<!DOCTYPE html>
<html>
<head>
<title>..</title>
<meta charset='utf-8' />
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Quel est l’utilité de la balise header, main et footer ?
Que signifient-elles ?
Dans la balise header rajoutez le code suivant:
<h1>HELLO WORLD!</h1> <nav> <a href=".." title="..">Home</a> <a href=".." title="..">Contact</a> </nav>
Que signifie la balise nav ?
Quel est l’intérêt de placer une balise h1 ici ?
<article>
<h2>Useless title</h2>
<time>04/05/1977</time>
<p></p>
<img src=".." alt=".." />
<a href="http://google.fr" title="Jump to google.fr">Google</a>
</article>
Que signifie la balise article ?
Que signifie la balise time ?
Pourquoi utiliser un h2 dans l’article ?
Sémantiquement les balises p, img et a correspondent à ?
Voici le code d’un listing d’articles avec une sidebar:
<main>
<section>
<h2></h2>
<article></article>
<article></article>
</section>
<aside>
<p>..</p>
</aside>
</main>
Que signifie la balise section dans ce cas ?
Que signifie la balise aside ?
À faire
En reprenant vos fichiers de l’exercice sur la saga star wars, modifiez la structure de vos fichier HTML pour obtenir une page d’accueil et des pages pour chaque film sémantiquement correct.
À faire
Un titre,
Une date de publication,
Un auteur,
Une description,
Une image d’illustration.
Note
Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d’ouverture de la piscine du quartier.
L’avantage du tableau tient dans sa rigueur. L’information est facilement interprétée par des associations visuelles entre les entêtes de lignes et colonnes. Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.
Avertissement
Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c’est pour cela qu’ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l’en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc.
Attention
Ne vous faites pas d’illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d’informations de style avec CSS, ainsi qu’une structure solide avec HTML.
À faire
Avant tout, créer un squelette de document HTML5 et lier le avec le css ci-dessous.
<table></table>.Ajoutez-les dans le corps de votre HTML.
<td> (« td » comme « table data »).Ajoutez une première cellule.
Observez le résultat dans un navigateur puis continuez à ajouter trois cellules.
Astuce
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}
th {
background-color: rgb(235,235,235);
}
td {
text-align: center;
}
tr:nth-child(even) td {
background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}
caption {
padding: 10px;
}
Note
Les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.
Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table row »). Étudions cela maintenant.
Placez les quatre cellules que vous avez créées entre deux balises <tr>,
Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.
Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne. Pour comprendre pourquoi ils sont utiles, regardez l’exemple du tableau suivant. Tout d’abord, le code source :
<table>
<tr>
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Race</td>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Age</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Propriétaire</td>
<td>Belle-mère</td>
<td>Moi</td>
<td>Moi</td>
<td>Belle-soeur</td>
</tr>
<tr>
<td>Habitudes alimentaires</td>
<td>Mange tous les restes</td>
<td>Grignotte la nourriture</td>
<td>Mange copieusement</td>
<td>Mange jusqu'à ce qu'il éclate</td>
</tr>
</table>
Maintenant, le rendu du tableau réel :
| Knocky | Flor | Ella | Juan | |
| Race | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
| Age | 16 | 9 | 10 | 5 |
| Propriétaire | Belle-mère | Moi | Moi | Belle-soeur |
| Habitudes alimentaires | Mange tous les restes | Grignotte la nourriture | Mange copieusement | Mange jusqu'à ce qu'il éclate |
Le problème ici c’est que, bien que vous puissiez comprendre le tableau, il n’est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d’une manière ou d’une autre, ce serait mieux.
À faire
En premier lieu, faites une copie des fichiers du code source du tableau ci-dessus et du css présent plus haut dans un nouveau répertoire sur votre ordinateur.
<th> (« th » comme « table header » ou en-tête de tableau).Il fonctionne exactement comme la balise <td>, à ceci près qu’il indique un en-tête et non une cellule normale. - Allez dans le code HTML, et remplacez tous les <td> par des <th>.
Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
Pourquoi les en-têtes sont-ils utiles ?
Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.
Les en-têtes de tableau ont un autre avantage — avec l’attribut scope, ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d’une ligne ou d’une colonne. Les lecteurs d’écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.
Parfois, nous voulons qu’une cellule couvre plusieurs lignes ou colonnes. Prenez l’exemple simple suivant, qui montre le nom d’animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l’animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l’animal s’étende sur toute la largeur du tableau.
Le code initial ressemble à cela :
<table>
<tr>
<th>Animaux</th>
</tr>
<tr>
<th>Hippopotame</th>
</tr>
<tr>
<th>Cheval</th>
<td>Jument</td>
</tr>
<tr>
<td>Étalon</td>
</tr>
<tr>
<th>Crocodile</th>
</tr>
<tr>
<th>Poulet</th>
<td>Coq</td>
</tr>
<tr>
<td>Coq</td>
</tr>
</table>
Mais le résultat ne nous donne pas ce que nous voulions, nous avons besoin d’un moyen pour étendre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes, « Cheval » et « Poulet » sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.
Utilisons colspan et rowspan pour améliorer ce tableau.
À faire
Tout d’abord, faites une copie locale du tableau ci-dessus et du code css dans un nouveau répertoire sur votre ordinateur.
Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
Enfin, utilisez rowspan pour mettre « Cheval » et « Poulet » sur deux lignes.
Enregistrez et ouvrez votre code sur un navigateur pour voir l’amélioration.
Maintenant que nous sommes à l’aise pour ajouter de simples images dans une page web, nous passons à l’étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans ce tp, nous nous contenterons de le faire avec les éléments <video> et <audio>.
Les développeurs ont toujours voulu utiliser la vidéo et l’audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d’une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images).
Au départ, les technologies embarquées telles que HTML n’avaient pas la capacité d’intégrer de la vidéo ou de l’audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight ) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d’accessibilité.
Note
L’élément <video> vous permet d’intégrer de la vidéo très facilement. En voici un exemple :
<video src="video/stacraft_ii_trailer_1080p.webm" controls>
<p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.webm">lien vers la vidéo</a>.</p>
</video>
Les fonctionnalités de ce code sont :
src, de la même manière que pour l’élément <img>, l’attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.
controls, Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l’audio. (c’est particulièrement crucial pour les gens ayant de l’épilepsie.)
<video> est une solution de repli ou contenu de secours (fallback content)si le navigateur accédant à la page ne supporte pas l’élément <video>,
cela offre un texte alternatif qui peut être ce que vous voulez; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l’utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu’il utilise.
À faire
Faites un essai de cet exemple.
Important
Il y a un problème avec l’exemple au-dessus que vous avez dû rencontrer si vous avez accédé au à votre document avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d’audio.
Note
Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l’intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.
Les pistes audio et vidéo sont aussi de différents formats, par exemple :
Un conteneur WebM empaquette de l’audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.
Un conteneur MP4 assemble de l’audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.
L’ancien conteneur Ogg rassemblait de l’audio OggVorbis et de la vidéo OggTheora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.
Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.
Astuce
Les formats ci-dessus ont été créés pour compresser la vidéo et l’audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents Codecs, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S’il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.
Alors, comment faire ? Jetez un coup d’œil à l’exemple qui suit, mis à jour:
<video controls>
<source src="video/stacraft_ii_trailer_1080p.mp4" type="video/mp4">
<source src="video/stacraft_ii_trailer_1080p.webm" type="video/webm">
<p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.mp4">lien sur la vidéo</a>.</p>
</video>
Ici, nous avons retiré l’attribut src de la balise <video> et inclus des éléments source séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments source et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.
Chaque élément source possède également un attribut de type. C’est facultatif, mais il est conseillé de les inclure — ils contiennent le type MIME des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu’ils ne comprennent pas. Si le type n’est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu’à ce qu’il en trouve un qu’il prenne en charge, ce qui demande du temps et des ressources.
<video controls autoplay loop muted poster="img/stacraft_ii_poster.png">
<source src="video/stacraft_ii_trailer_1080p.mp4" type="video/mp4">
<source src="video/stacraft_ii_trailer_1080p.webm" type="video/webm">
<p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.mp4">lien vers la vidéo</a>.</p>
</video>
Voici les nouvelles fonctionnalités:
autoplay Cet attribut permet de lancer immédiatement la lecture de l’audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d’utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
loop Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l’audio). Cette façon de procéder pouvant être mal perçue, ne l’utilisez que si c’est vraiment nécessaire.
muted Cet attribut coupe le son de la vidéo par défaut.
poster Cet attribut prend comme valeur l’URL d’une image affichée avant la lecture de la vidéo. Il s’utilise en tant que logo de démarrage ou de publicité.
preload Cet attribut s’utilise pour mettre en tampon les gros fichiers.none: ne pas mettre le fichier dans un tampon,
auto: mettre le fichier média dans un tampon
metadata: ne mettre que les métadonnées dans le tampon
Notez que nous n’avons pas inséré l’attribut autoplay dans la version en direct - si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster!
L’élément <audio> fonctionne exactement de la même manière que l’élément <video>, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci:
<audio controls>
<source src="audio/stacraft_main_menu.mp3" type="audio/mp3">
<source src="audio/stacraft_main_menu.ogg" type="audio/ogg">
<p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="audio/stacraft_main_menu.mp3">lien vers l'audio</a>.</p>
</audio>
Cela prend moins de place qu’une vidéo, et il n’y a pas de composante visuelle — il est juste nécessaire d’afficher les contrôles de lecture de l’audio. Il ne prend pas en charge non plus l’attribut poster — toujours pas de composant visuel.
Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> - revoyez les sections ci-desssus pour plus d’informations à ce propos.
À faire
Après avoir testé les différents éléments précédent, créer un site basique qui listera les trois jeux suivants de la saga StarCraft:
StarCraft,
StarCraft Ghost (RIP)
et StarCraft II.
Il vous faudra :
Télécharger les fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur depuis l’url suivante.
Créer un nouveau fichier HTML dans le même répertoire nommé : index.html qui listera les documents dédié à chaque jeu.
Ajouter des éléments <audio> et <video> dans chaque page; faire en sorte qu’ils affichent les contrôles par défaut du navigateur.
Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N’oubliez pas d’inclure les attributs type.
Donner à l’élément <video> une image qui sera affichée avant que la vidéo ne démarre.
In the distant future, a small group of human exiles have been doomed to fight for survival on the edge of the galaxy. Through military strength, espionage, and deceit, a unified Terran government has maintained an uneasy peace. But as resources and fuel run short, the Confederate nations find themselves looking towards the rich worlds of their alien neighbors, the enigmatic Protoss. To further complicate matters, it seems that a previously unknown species– the Zerg– has entered Protoss space and is destroying everything in its path. The time for war has come.
Comme nous l’avons déjà vu précédemment chaque moteur de rendu embarque ses propres styles css de base, ce qui nous arrange peu pour obtenir le même rendu sur toutes les plateformes. Il convient pour ce faire d’utiliser un reset CSS.
À faire
En reprenant le code sur la saga Star Wars :
Ouvrez le votre document index.html dans plusieurs navigateurs (chrome, firefox, ie) et constatez la différence entre les styles de bases
Téléchargez un reset CSS ( Normalize.css ou celui d”Eric Meyer par exemple), intégrez-le et constatez les modifications.
Astuce
Un reset CSS est un simple fichier CSS, il convient de le télécharger puis de l’intégrer (tout comme n’importe quel style) dans notre document. Attention celui-ci doit l’être avant nos propres styles.
Si besoin modifiez votre style css pour prendre en compte les modifications induites par le reset CSS.
Note
Un content delivery network (CDN), ou réseau de diffusion de contenu, est constitué d’ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données à des utilisateurs.
Le plus courant des CDN utilisé pour les police d’écriture est Google Fonts. Pour incorporer vos polices copiez le code obtenu dans l’entête de votre document HTML.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
font-family: 'Roboto', sans-serif;
À faire
En reprenant votre code sur la saga Star Wars, ajoutez des polices d’écriture issue de GoogleFonts pour rendre votre design plus agréable à l’oeil.
Nous allons utiliser les images issues de cette archive représentant les skeksis du film/série télé Dark Crystal.
À faire
Créer un document HTML contenant le squelette de base de tout document HTML5,
Au sein de la balise main ajouter une balise img pour chaque image contenue dans l’archive
Ajouter un reset CSS à ce document
Ajouter un fichier de mise en forme css à ce document contenant les règles ci-dessous:
main {
max-width: 1024px;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
max-width: 100%
}
Nos images devraient s’afficher les unes en dessous des autres et être centrées horizontalement dans notre document.
Nous allons créer une grille pour mettre les images les unes à côté des autres, notre grille devra contenir 5 colonnes par lignes.
Dans un premier temps nous allons appliquer la grille sur notre balise main:
main {
max-width: 1024px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Que constatez-vous ?
Notre document précédent n’est pas sémantiquement correct, il nous faut corriger cela !
À faire
Commenter le css qui à transformer notre balise main en grille
Pour chaque image créer un article qui contiendra en plus de l’image le nom du Skeksis (vous pouvez le retrouver à partir du nom de l’image)
Nos articles devront être dans une balise section
Créer une grille de 5 colonnes pour afficher les articles.
En reprenant le document précédent, servez-vous de la disposition des grilles pour placer les articles pairs sur 3 colonnes et les articles impairs sur 2 colonnes. Attention a bien géré les lignes où seront affichés les éléments.
En reprenant votre grille dans un nouveau fichier, retirer les titres de niveau 2 au sein de vos articles puis ajouter l’image suivante dans un nouvel article:
Et placer les différents articles au sein de la grille pour obtenir le résultat suivant:
En reprenant le code sur la saga Star Wars afficher les films de la page d’accueil dans une grille de 3 colonnes.
Nous allons créer une page d’actualités des plus simple. Voici un exemple de résultat attendu de votre part:
À faire
Créer fichier index.html encodé en:code:UTF-8
Créer le squelette de base de tout fichier HTML5 dans celui-ci
Créer un menu de navigation au sein du header principal
nb: les liens présents dans le fichier pointeront sur cette page (à savoir index.html)
Astuce
Inclure un reset CSS
Inclure une grille de mise en forme (simple grid par exemple ou le module GridLayout de CSS3)
Mettre en forme le listing d’actualités via votre grille de mise en forme
nb: le style de l’exemple fait (en dehors du reset css et de la grille) un peu moins de 100 lignes de CSS en utilisant 26 sélecteurs CSS et trois types de sélecteurs différents
Note
Nous avons créé un template basique mais fonctionnel d’un site web d’actualité. Nous allons devoir adapter notre site à différents terminaux. Nous allons donc transformer notre template en template responsive.
Comment tester notre site sur différents terminaux.
Il est compliqué de tester notre site sur différents terminaux, notamment lorsque celui-ci est en développement. Fort heureusement les navigateurs nous proposent un outil au sein de l’inspecteur permettant de tester cela:
Grâce à cette fonctionnalité nous pouvons tester notre site web en mode responsive.
Nous avons créé un template qui s’affiche parfaitement sur grand écran (supérieur à 960px). Il convient de modifier notre CSS pour le faire s’afficher convenablement sur des écrans plus petits.
Note
Les requêtes média (media queries) permettent de modifier l’apparence d’un site ou d’une application en fonction du type d’appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d’écran ou la largeur de la zone d’affichage (viewport) par exemple).
Les requêtes média sont utilisées afin :
D’appliquer certains styles de façon conditionnelle grâce aux règles @media et @import.
De cibler certains média pour les éléments <style>, <link>, <source> et d’autres éléments HTML grâce à l’attribut media=.
Ajoutez ce code CSS à la fin de votre fichier de style
@media screen and (max-width: 600px) {
body {
color: red;
}
}
En utilisant l’outil présenté ci-dessus, modifier le viewport (la taille de l’écran) pour voir la modification de la media queries s’appliquer.
À faire
En reprenant le template précédent, modifier votre style css pour rendre votre site responsive. Voici quelques pistes qui peuvent vous aider:
La grille passe de plusieurs colonnes à une seule ou les éléments sont placés les uns en dessous des autres,
Le menu place ses éléments également les uns en dessous des autres et les centres la plupart du temps.
Note
L’objectif de votre projet est de produire, en binôme, une maquette de site de diffusion de contenu légal (streaming). Ce sera une maquette dans le sens où les fonctionnalités coté serveur (recherche, ajout dans les favoris, etc.) seront simulées.
Voici la liste des pages que votre maquette devra, au minimum, comporter :
une page d’accueil, affichant un message de bienvenue, les nouveautés et les recommandations en cours, et offrant un champs de recherche ;
une page simulant un résultat de recherche, affichant une liste d’articles menant vers chaque série télé;
une page détaillée de la série, incluant une description, la possibilité de laisser un commentaire, et d’ajouter la série à ses favoris;
une page de visualisation d’un épisode;
une page “Qui sommes-nous ?” présentant le site.
Votre site doit être responsive: il doit s’adapter à la largeur de l’écran, afin de présenter une ergonomie différente (et appropriée) sur un écran d’ordinateur et sur un smartphone.
Indication
Votre maquette utilisera exclusivement du HTML et du CSS (pas de Javascript ou de PHP).
Vous pouvez utiliser des extraits de HTML ou de CSS trouvés sur le Web, à condition de citer vous sources (URL d’origine en commentaire).
Pensez-bien à utiliser les valideurs du W3C pour le code HTML et CSS ; un site ne passant pas le valideur (sans erreur ni warning) recevra une note en dessous de la moyenne !
Comme tout site de streaming, votre projet devra avoir un aspect uniforme d’une page à l’autre.
Les pages que vous créez doivent être liées les unes aux autres de manière à simuler de manière cohérente la navigation à l’intérieur du site. Notez que, même si certaines pages (page de garde, résultat de recherche) contiennent des liens vers des articles différents, tous ces liens peuvent pointer vers l’unique page détaillée d’une série que l’on vous demande d’écrire.
L’organisation des fichiers de votre site doit respecter les bonnes pratiques vues en cours.
Pour simuler un formulaire, il suffit d’utiliser l’adresse de la page résultat comme attribut action de la balise <form>.
Si vous travaillez seul⋅e, vous êtes dispensé⋅e de réaliser la page “résultat de recherche” et la page “qui sommes-nous ?”.
Note
“objectif de votre projet est de produire, en binôme, une maquette de site marchand. Ce sera une maquette dans le sens où les fonctionnalités coté serveur (recherche, passage de commande) seront simulées.
Voici la liste des pages que votre maquette devra, au minimum, comporter :
une page d’accueil, affichant un message de bienvenue et les promotions en cours, et offrant un champs de recherche ;
une page simulant un résultat de recherche, affichant une liste d’articles ;
une page détaillée d’article, incluant une description, la possibilité de laisser un commentaire, et d’ajouter l’article à son panier ;
une page de validation de commande, permettant de saisir les coordonnées de livraison ;
une page “Qui sommes-nous ?” présentant le site.
Votre site doit être responsive: il doit s’adapter à la largeur de l’écran, afin de présenter une ergonomie différente (et appropriée) sur un écran d’ordinateur et sur un smartphone.
Indication
Votre maquette utilisera exclusivement du HTML et du CSS (pas de Javascript ou de PHP).
Vous pouvez utiliser des extraits de HTML ou de CSS trouvés sur le Web, à condition de citer vous sources (URL d’origine en commentaire).
Pensez-bien à utiliser les valideurs du W3C pour le code HTML et CSS ; un site ne passant pas le valideur (sans erreur ni warning) recevra une note en dessous de la moyenne !
Comme tout site marchand, votre projet devra avoir un aspect uniforme d’une page à l’autre.
Les pages que vous créez doivent être liées les unes aux autres de manière à simuler de manière cohérente la navigation à l’intérieur du site. Notez que, même si certaines pages (page de garde, résultat de recherche) contiennent des liens vers des articles différents, tous ces liens peuvent pointer vers l’unique page détaillée d’article que l’on vous demande d’écrire.
L’organisation des fichiers de votre site doit respecter les bonnes pratiques vues en cours.
Pour simuler un formulaire, il suffit d’utiliser l’adresse de la page résultat comme attribut action de la balise <form>.
Si vous travaillez seul⋅e, vous êtes dispensé⋅e de réaliser la page “résultat de recherche” et la page “qui sommes-nous ?”.