< HTML/CSS >

  • Le langage HTML permet d’écrire de l’hypertexte, de structurer sémantiquement une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques.
  • Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Il permet de mettre en forme les documents HTML.

HTML

Structure de notre dossier de travail.

Pour commencer un site web, il faut avant tout de chose penser à une organisation de nos dossiers et fichiers de travail. Voici une structure basique.

─ mon-site/
    ├── css/
    │   └── style.css
    ├── images/
    │   └── mon-image.png
    ├── index.html
    ├── page-1.html
    ├── page-2.html
    └── ...

Structure d'une page

Voilà notre structure de base de notre page de visualisation.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="UTF-8">
        <title>mon édition</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>

        ici le contenu de votre page

    </body>

</html>
  • En-tête <!DOCTYPE html> indique au navigateur quel type de fichier il doit interpréter.
  • Entre la balise <html></html> se trouve tout la structure de notre page web.
    • La balise <head> contient les métadonnés.
      • Le <meta charset="UTF-8"> demande au navigateur d'interprèter les caractères spéciaux.
      • Le <title></title> pour référencer le titre de la page. Titre qui se retrouve entre autre dans l'onglet dans le navigateur.
      • La balise <link /> fait appel à la feuille de style en css.
    • La balise <boby></body> contient tout le contenu visible de la page.

balise html

Balises de structuration du texte

<abbr> : Abréviation
<blockquote> : Citation (longue)
<cite> : Citation du titre d’une œuvre ou d’un évènement
<q> : Citation (courte)
<sup> : Exposant
<sub> : Indice
<strong> : Mise en valeur forte
<em> : Mise en valeur normale
<mark> : Mise en valeur visuelle
<h1> : Titre de niveau 1
<h2> : Titre de niveau 2
<h3> : Titre de niveau 3
<h4> : Titre de niveau 4
<h5> : Titre de niveau 5
<h6> : Titre de niveau 6
<img /> : Image
<figure> : Figure (image, code, etc.)
<figcaption> : Description de la figure
<audio> : Son
<video> : Vidéo
<source> : Format source pour les balises<audio>et<video>
<a> : Lien hypertexte
<br /> : Retour à la ligne
<p> : Paragraphe
<hr /> : Ligne de séparation horizontale
<address> : Adresse de contact
<del> : Texte supprimé
<ins> : Texte inséré
<dfn> : Définition
<kbd> : Saisie clavier
<pre> : Affichage formaté (pour les codes sources)
<progress> : Barre de progression
<time> : Date ou heure

Catégoriser dans un paragraphe

Il y a en HTML des balises pour catégoriser des mots ou phrases à l'intérieur d'un paragraphe.
Exemples : 

<p>Voici un <b>mots</b> en bold.</p>
<p>Voici un <em>mots</em> en italic.</p>
<p>Voici un <del>mots</del> supprimé.</p>
<p>Voici un <u>mots</u> souligné.</p>

Résultat:

Voici un mots en bold.

Voici un mots en italic.

Voici un mots supprimé.

Voici un mots souligné.

Sélecteur de type id

Hors, il arrive que plusieurs éléments partageant la même balise doivent être mis en forme différemment. Une première façon de pointer vers un élément précis, unique dans la page, et de lui attribuer sa propre mise en forme, est de nommer cet élément dans la page html à l’aide de l’attribut "id" : 

<div id="bloc">Mon contenu</div>

et de pointer vers cet élément précis dans le css à l’aide du sélecteur #bloc la règle css deviendra donc : 

#bloc{
    background:red;
}

Cette manière de faire nécessite que l’élément html à mettre en forme ait un identifiant unique, spécifié dans le code html (ici "bloc").

Sélecteur de type class

Pour sélectionner un ensemble plus précis que tous les éléments partageant une balise (exemple : le sélecteur div), et plus large qu’un élément unique (exemple : le sélecteur #bloc), il faut utiliser un type de sélecteur différent, un sélecteur de classe. Ce type de sélecteur nécessite de préciser dans l’html que les éléments concernés font partie d’un même ensemble. Pour ce faire, il faut utiliser l’attribut html "class" :

<p class="ensemble">Mon contenu 1</p>
<p class="ensemble">Mon contenu 2</p>
<p>Mon contenu 3</p>

et de pointer vers ces éléments à l’aide du sélecteur .ensemble la règle css deviendra donc: 

.ensemble{
   background: yellow;
   border: 2px solid blue; 
}

Résultat:

Mon contenu 1

Mon contenu 2

Mon contenu 3

La règle ci-dessus spécifie donc que les éléments html qui ont un attribut class de valeur ensemble doivent avoir un fond jaune. Le troisième élément <p> de l’exemple n’est pas concerné par la règle puisqu’il n’a pas la classe ensemble.

La différence entre le type de sélecteur id (qui se spécifie dans le css avec le caractère #) et le type de sélecteur class (qui se spécifie dans le css avec le caractère .) est donc que le premier ne concerne qu’un élément et le second concerne un ensemble d’éléments.

Les pseudo-class

Une pseudo-classe est comme une étiquette temporaire qu’on colle sur un élément HTML selon une situation particulière.

Exemple : quand on passe la souris sur un bouton → le bouton est “dans l’état hover”.

HTML: 

<button class="demo">Passe la souris</button>

CSS:

.demo{
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  font-size: 1.2em;
}

.demo:hover {
  background: #e74c3c; /* change de couleur */
}

Quand la souris survole le bouton → changement visuel.

.demo:active {
  transform: scale(0.9); /* effet de clic */
}

Quand on clique et maintient → le bouton se rétrécit légèrement.

Voici une documentation de toutes les pseudo-class -> ici

CSS

sélecteurs css

La mise en forme css se définit par un ensemble de règles, composées de déclarations, appliquées aux balises html. La première partie d’une règle, celle qui indique l’élément ou les éléments html à laquelle elle s’applique, soit la partie div dans la règle: 

div{
    background:red;
    width: 50px;
    height: 50px;
}

Resultat:

Sous sa forme la plus simple, un sélecteur désigne une balise. La règle ci-dessus indique que, dans la page html, tous les éléments dont la balise est <div> auront un fond de couleur rouge.

typographie

Lien utile !

Quelques exemples (et il y en a plein d'autres !!):

font-family: 'Times New Roman', Times, serif; changement de fonte.

font-size: 12pt; changement du corps (px, pt, em, rem, vw)

color: #ff0000; changement de la couleur de la fonte.

font-style: italic; changement du style de fonte (normal, oblique ...)

font-weight: bold; changement de graisse (bold, lighter, 100, 200, 300 ...)

font-variant: small-caps slashed-zero; changement de case typographique

text-decoration: underline; souligné, surligné le text.

line-height: 14px; changement d'interlignage (px, pt, em ...)

text-align: center; changement de justification du texte (center, left, right, justify)

Pour importer une autre fonte qu'une fonte «système» nous devons faire un @font-face.

À déclarer en haut du document css.

@font-face {
    font-family: "nomDeLafont";
    src: url("chemin/vers/mon/fichier/fonte.otf");
}

Pour l'appliquer sur un bloc il suffit de faire : 

p {
    font-family: "nomDeLafont";
}

blocs

Quelques exemples (et il y en a plein d'autres !!):

position: absolute; définir le comportement de l'emplacement du bloc (fixed, relative, static, sticky).

width: 200px; définir la largeur du bloc (px, pt, mm, cm, em, %)

height: 200px; définir la hauteur du bloc (px, pt, mm, cm, em, %)

top: 200px; définir la position du bloc à partir du haut de la page

bottom: 200px; définir la position du bloc à partir du bas de la page

left: 200px; définir la position du bloc à partir du coté gauche de la page

right: 200px; définir la position du bloc à partir du coté droit de la page

background-color: red; définir la couleur de fond du bloc

background-image: url('http://exemple.net/monimage.jpg'); définir une image de fond du bloc.

margin: 20px; définir une marge de 20px tout autour du bloc

margin-top: 20px; définir une marge de 20px au dessus du bloc

margin-bottom: 20px; définir une marge de 20px en dessous du bloc

margin-right: 20px; définir une marge de 20px à droite du bloc

margin-left: 20px; définir une marge de 20px à gauche du bloc

padding: 20px; définir une marge de 20px tout autour du bloc

padding-top: 20px; définir une marge intérieure supérieur de 20px

padding-bottom: 20px; définir une marge intérieure inférieur de 20px

padding-right: 20px; définir une marge intérieure droite de 20px

padding-left: 20px; définir une marge intérieure gauche de 20px

column-count: 2; définir deux colonnes au bloc

column-gap: 10pt définir une goutière de 10pt entre les colonnes

Utilisation avancée des blocs
Le css grid -> https://css-tricks.com/snippets/css/complete-guide-grid/
Les FlexBox -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox

Flexbox (ou “Flexible Box Layout”) est un mode d’affichage en CSS qui facilite la création de mises en page flexibles, alignées, et réactives. Son but principal : organiser des éléments dans un conteneur, en contrôlant facilement l’axe, l’espace, l’alignement et la répartition.

Voir la documentation de css-tricks.com (je ne peux pas faire mieux 🙂) : ici

CSS Grid

CSS Grid est un système de mise en page qui permet de créer facilement des grilles flexibles, un peu comme les grilles utilisées en mise en page print (InDesign). Il divise une page en lignes et colonnes, dans lesquelles on peut placer ou étendre des éléments très précisément. Grâce à des propriétés simples comme grid-template-columns, grid-template-rows, gap ou grid-area, on peut construire des layouts complexes, responsives et visuellement cohérents avec très peu de code. En résumé : CSS Grid donne un contrôle total sur la structure d’une page web, en combinant précision graphique et flexibilité du web.

Exemple de css Grid -> ici

Voir la documentation de css-tricks.com (je ne peux pas faire mieux 🙂) : ici

Les Medias

Le trafic internet c'est 80% de vidéo et 20% de tout le reste (les sites web, les mails, la messagerie instantanée, le stockage de photos et de données et les réseaux d'entreprises).

Vidéo

Exemple d'une balise vidéo. 

<video autoplay controls width="250">
  <source src="fichier.mp4" type="video/mp4" />
</video>

Audio

HTML5 propose la balise

  • controls → affiche les boutons play/pause/volume

  • autoplay → lance automatiquement le son au chargement (⚠️ parfois bloqué par le navigateur)

  • loop → répète le son en boucle

  • muted → démarre en silencieux

Exemple d'une balise audio. 

    <audio controls autoplay src="musique/jazz.mp3"></audio>

autoplay, n attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio.

controls Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.

svg

SVG est un langage basé sur XML, utilisé pour décrire des images vectorielles. Il s'agit d'un langage à balises, comme HTML, où les différents éléments permettent de décrire les formes qu'on veut dans l'image et les effets qui s'appliquent à ces formes. SVG sert à baliser des graphiques et pas du contenu. SVG définit des éléments pour créer des formes simples, comme <circle> (pour dessiner un cercle) et <rect> (pour dessiner un rectangle), ainsi que des éléments pour des formes plus complexes comme <path> et <polygon>. On aura d'autres éléments pour les fonctionnalités les plus avancées de SVG, comme <feColorMatrix> (qui permet d'appliquer une transformation des couleurs à l'aide d'une matrice), <animate> (qui permet d'animer certaines parties de l'image), et <mask>(qui permet d'appliquer des masques par-dessus l'image).

Foo Bar 

<svg width="600px" height=200px>
    <rect width="100px" height="100px" fill="green"></rect>
    <circle cx="100" cy="100" r="50" stroke="blue" stroke-width="4px" fill="none" /> 
    <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2px" />
    <polygon points="200,10 250,190 150,190" fill="lime"/>
    <text x="210" y="15" fill="red">Foo Bar</text>
</svg>

Documentation -> https://www.w3schools.com/graphics/svg_inhtml.asp

Transition

Une transition CSS permet de créer un effet d’animation entre deux états d’un élément. Exemple concret : un bouton qui change progressivement de couleur quand on le survole, au lieu de changer brutalement.

<button class="demo">Passe ta souris</button>

.demo {
  background: #3498db;
  color: white;
  padding: 1em 2em;
  border: none;
  font-size: 1.2em;
  cursor: pointer;

  /* Transition appliquée */
  transition: background 0.5s, transform 0.3s;
}

.demo:hover {
  background: #e74c3c;
  transform: scale(1.1);
}

Ici : * background change en 0.5s * transform (effet zoom) change en 0.3s

Plus de documentation ici

Animation

Wahouuu
<div class="rect-animation">Wahouuu</div>

@keyframes anime {
    from {
        margin-left: 0px;
        font-size: 10px
    }
    to {
        margin-left: 100px;
        font-size: 30px
    }
}

.rect-animation {
    width: 100px;
    height: 100px;
    background: pink;
    animation: anime 1s infinite alternate;
}
Wahouuu
<div class="rect-animation">Wahouuu</div>

@keyframes anime {
    0% {
        margin-left: 0px;

        background: pink;
        font-size: 10px
    }
    50% {
        margin-left: 50px;
        background: blue;
        font-size: 30px
    }
    100% {
        margin-left: 100px;
        background: green;
        font-size: 10px
    }
}
.rect-animation {
    width: 100px;
    height: 100px;
    background: pink;
    animation: anime 1s infinite alternate;
}

Documentation -> https://css-tricks.com/almanac/properties/a/animation/ Documentation -> https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Les dégradés dans le fond

<div class="rect-gradient"></div>

.rect-gradient {
    width: 300px;
    height: 100px;
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(0,37,80,1) 100%); 
}

.rect-gradient {
    width: 300px;
    height: 100px;
    background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(0,37,80,1) 100%); 
}

Générateur de dégradés : https://cssgradient.io/

Les dégradés dans du texte.

Hello World

h1 {
    font-size: 40px; 
    background: linear-gradient(to right, red, blue, #cf23cf, #eedd44); 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}

Générateur de dégradés pour du texte : https://colorffy.com/text-gradient-generator?colors=42ca70-acb9f5-b410c1

Les filtres

Principaux filtres CSS

Propriété Effet Exemple CSS
blur(px) Floute l’élément filter: blur(5px);
brightness(%) Plus ou moins lumineux filter: brightness(150%);
contrast(%) Augmente ou diminue contraste filter: contrast(200%);
grayscale(%) Noir et blanc filter: grayscale(100%);
sepia(%) Teinte sépia filter: sepia(100%);
saturate(%) Intensifie les couleurs filter: saturate(300%);
hue-rotate(deg) Change la teinte des couleurs filter: hue-rotate(90deg);
invert(%) Inverse les couleurs filter: invert(100%);
drop-shadow(x y blur col) Ombre portée colorée filter: drop-shadow(5px 5px 10px red);

image d'exemple


blur()

img {
    filter: blur(5px);
}


grayscale()

img {
    filter: grayscale(1);
}


saturate()

img {
    filter: saturate(200%);
}


invert()

img {
    filter: invert(100%);
}

Documentation : https://css-tricks.com/almanac/properties/f/filter/

Mix-Blend-Mode

composition de départ.

Pineapple


Darken

Pineapple 
img {
  mix-blend-mode: darken;
}


Screen

Pineapple 
img {
  mix-blend-mode: screen;
}


Difference

Pineapple 
img {
  mix-blend-mode: difference;
}

Documentation : https://developer.mozilla.org/fr/docs/Web/CSS/blend-mode

Transform

Principales transformations CSS

Propriété Effet Exemple CSS
translate(x, y) Déplace un élément sur l’axe X et Y transform: translate(50px, 20px);
translateX(x) Déplace seulement sur l’axe horizontal transform: translateX(100px);
translateY(y) Déplace seulement sur l’axe vertical transform: translateY(-50px);
scale(x, y) Agrandit ou réduit un élément transform: scale(1.5, 1.5);
scaleX(x) Étire ou rétrécit horizontalement transform: scaleX(2);
scaleY(y) Étire ou rétrécit verticalement transform: scaleY(0.5);
rotate(angle) Fait tourner un élément transform: rotate(45deg);
skew(x-angle, y-angle) Incline l’élément (distorsion) transform: skew(20deg, 10deg);
skewX(angle) Incline seulement sur l’axe X transform: skewX(15deg);
skewY(angle) Incline seulement sur l’axe Y transform: skewY(-15deg);
matrix(a, b, c, d, e, f)

Forme d'exemple.


rotate()

div {
    width: 80px;
    height: 120px;
    transform-origin: top right;
    transform: rotate(45deg);
}


scale()

div {
    width: 80px;
    height: 120px;
    transform-origin: top left;
    transform: rotate(45deg);
}


scale()

div {
    width: 80px;
    height: 120px;
    transform-origin: top left;
    transform: rotate(45deg);
}

translate()

div:hover {
    transform: translate(200px, 0px);
    transition: all 2s ease-out;
}

Documentation : https://css-tricks.com/almanac/properties/t/transform/

Media Queries

Les media queries permettent d’adapter le style d’un site web en fonction de la taille de l’écran. Cela permet de rendre un site responsive, c'est-à-dire qu’il s’affiche bien sur mobile, tablette et ordinateur.

body {
  background-color: lightblue; /* Couleur de fond par défaut */
}

/* Si l'écran fait moins de 600px de large, on change la couleur */
@media screen and (max-width: 600px) {
  body {
    background-color: lightcoral;
  }
}

Explication : Sur les écrans de moins de 600 pixels de large (comme un smartphone), le fond devient rouge au lieu de bleu.

@media → Indique qu'on crée une règle CSS conditionnelle.

screen → Spécifie le type de média (le plus courant est "screen" pour les écrans).

(max-width: 600px) → Condition qui déclenche les styles (si la largeur de l’écran est de 600px ou moins).

Plusieurs Breakpoints

Un site peut avoir plusieurs tailles à gérer :

/* Pour les petits écrans (téléphones) */
@media screen and (max-width: 600px) {
  body { background-color: lightcoral; }
}

/* Pour les tablettes */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body { background-color: lightgreen; }
}

/* Pour les grands écrans */
@media screen and (min-width: 1025px) {
  body { background-color: lightblue; }
}