Categories
Apprentissage Formation Javascript Web

Les fonctions avancées en Javascript

Logo JavaScript

Le cours de Javascript est intense et nous permet de voir quelques nouveautés.
Et notamment certaines fonctions avancées qui permettront d’exécuter des instructions spécifiques.

Les fonctions

Une fonction ressemble à un mode opératoire avec des instructions à suivre dans un ordre donné. Ensuite, on se sert de la fonction uniquement lorsque l’on en a besoin dans le programme.
En effet, tout ce qui est déclaré dans une fonction n’est pas actif tant que cette fonction n’est pas appelée.

Les bases

L’écriture d’une fonction est la suivante :

// déclaration
function maFonction () {
    // instructions;
}

// appel
maFonction();

A noter : on ne met jamais de point virgule après l’accolade de fermeture de la déclaration de la fonction.

Créer une fonction permet de l’utiliser plusieurs fois, de mettre du code en attente ou encore de combiner des actions.

Variables et fonctions

On peut attribuer une fonction à une variable :

const maFonction = function () {
    // instructions;
}

Et depuis ES6, il est possible d’écrire une fonction en une fonction fléchée. J’avais rapidement abordé le sujet lors d’un précédent post sur JS.
Cette notation est utilisée uniquement dans certains cas où l’on a besoin de déclarer une fonction à un endroit très précis sans qu’elle soit par la suite réutilisée.

const maFonction = () => {
    // instructions;
}
Paramétrage d’une fonction

Lorsque l’on écrit une fonction, il est possible d’avoir besoin de différents paramètres dans les instructions.
Ces paramètres sont alors modifiables lors de l’appel de la fonction.
Ce qui permet de raccourcir le nombre de fois où l’on se répète !

// déclaration
function maFonction (param1, param2) {
    // instructions incluant les paramètres param1, param2;
}

// appel
maFonction(att1, att2);

Il est alors possible d’attribuer des paramètres par défaut à la fonction. Ce qui lui permet d’avoir une valeur quoi qu’il arrive (ou qu’elle prenne cette valeur par défaut).
Par exemple :

// déclaration
function nouvelleConsole (x) {
    console.log(x || 'valeur par défaut');
}

// appel
nouvelleConsole('bonjour');  // affiche "bonjour" dans la console
nouvelleConsole();  // affiche "valeur par défaut" dans la console
Les fonctions retour

Les fonctions retour servent à conserver des valeurs et à retourner de l’information pour pouvoir l’utiliser par la suite.

function retour (a, b) {
    return a * b;
}
retour(2,4); // retournera 8 (2 x 4)

Les conditions

les comparateurs

Récapitulatif des comparateurs utilisés en JavaScript :
> : supérieur, plus grand que
>= : supérieur ou égal
< : inférieur, plus petit que
<= : inférieur ou égal
== : égalité simple (vérifie que les valeurs sont similaires)
!= : différent (simple)
=== : strictement égal (vérifie que les valeurs et les types sont similaires)
!== : strictement différent
!(valeur) : pour les booléens, permet d’avoir l’inverse de la valeur
&& : et / permet de vérifier que plusieurs conditions sont toutes vérifiées
|| : ou / au moins une des conditions est vérifiée.

La condition IF

La condition if permet de vérifier différentes choses.
Lorsque l’on écrit une condition if, on cherche à vérifier que la condition est vraie.
S’il y a une possibilité que le résultats de cette condition soit faux, alors on ajoute des instructions dans un else à la suite du if.

if (maPosition == interieur) {
    peparer_cuisine();
} else {
    faire_courses();
}

Il est aussi possible de vérifier plusieurs conditions. Dans ce cas, on ajoutera un (ou plusieurs) else if après le if.
Attention, dès qu’une condition est vérifiée et vraie, la lecture s’arrête. Il est donc important de faire attention à l’ordonnancement de la recherche à exécuter.

if (maPosition == interieur) {
    se_reposer();
} else if (maPosition == salleDeBain) {
    brosser_dents();
} else {
    promener_chien();
}
// l'instruction brosser_dents() ne sera jamais vérifiée car l'exécution de la condition s'arrêtera après avoir vérifié que maPosition est à l'intérieur (seule l'instruction se_reposer() sera exécutée).

A noter qu’il est aussi possible de mettre un if dans un autre if !

L’incrémentation

L’incrémentation permet d’augmenter la valeur d’une variable.

let Nombre = 4;
//
Nombre = Nombre + 1;
Nombre += 1; // écriture dédiée à l'incrémentation

Les opérateurs possibles sont les suivants :
+= : ajoute un chiffre
-= : enlève un chiffre
*= : multiplie un chiffre
/= : divise un chiffre
%= : modulo un chiffre

Il est également possible d’utiliser l’opérateur += pour ajouter du texte.

Variante
++ ajoute 1 et -- enlève 1
Attention, cette façon d’incrémenter n’est pas prise en compte tout de
suite. Elle l’est seulement après avoir déclaré la variable.

Les boucles FOR

La boucle for est principalement utilisée pour parcourir des tableaux. Et plus particulièrement lorsque l’on connait la fin (s’exécute un certain nombre de fois).

for (initialisation; condition; incrémentation) {
    // instructions;
}

initialisation : c’est la valeur initiale de la variable utilisée pour la boucle.
condition : qui permet de sortir de la boucle, elle est évaluée à chaque tour de boucle.
incrémentation : c’est ce qui va se passer à chaque tour de boucle.
Par exemple :

for (let i = 0 ; i < 5 ; i++) {
    console.log(i);
}
Boucle FOR et Tableaux

On peut aussi se servir d’une boucle for pour afficher toutes les valeurs contenue dans un tableau :

const table = ['val1', 'val2', 'val3'];
for (let i=0; i < table.lenght; i++) {
    console.log(table[i]);
}

Pour parcourir un tableau, on a la possibilité d’utiliser 2 variantes de la boucle for :
– for … in
Cette boucle parcourt les index d’un tableau et donne les valeurs du tableau correspondant à l’index demandé.

const table = ['val1', 'val2', 'val3'];

for (let i in table) {
    console.log(table[i]);
}

// affichera pour l'index 0 : 'val1'
// puis 'val2' puis 'val3'

– for … of
Cette boucle parcourt le tableau lui même et donne chacune des valeurs de ses éléments (sans tenir compte de l’index).

const table = ['val1', 'val2', 'val3'];

for (let i of table) {
    console.log(table[i]);
}

// affichera 'val1' puis 'val2' puis 'val3'
Boucle FOR et Tableau d’objets

Il est possible d’utiliser la boucle for pour parcourir un tableau d’objets. On s’en sert alors pour parcourir les clés du tableau d’objets. Pour cela, on utilisera la boucle for ... in .

Boucle FOR et Texte

Il est possible d’utiliser la boucle for pour parcourir une chaîne de caractères (notamment lorsque l’on fait un getElement).
Il est alors important de transformer cette chaîne de caractère un un « vrai » tableau (pour éviter d’avoir des données supplémentaires inhérentes à la lecture par la console).
Pour cela, on ajoutera trois petits points lors de la déclaration de la variable (avant le getElement) :

const images = [...document.getElementsByTagName('img')];

Les fonctions avancées permettent de réaliser différentes actions qui seront utiles lors de l’exécution du code.
Lors de la suite de la formation, je vais apprendre à modifier le DOM (et répondre à la question : qu’est ce que le DOM ?).

Categories
Apprentissage Formation HTML Javascript Web

Interactions entre JavaScript et HTML

Logo JavaScript

Pour continuer l’apprentissage de JavaScript, nous allons voir les interactions entre JavaScript et HTML.

Pour rappel, une page HTML est un document contenant du texte et des balises structurantes. En JavaScript, il est possible de manipuler ce document grace aux interactions entre les fichiers JS et HTML.

Manipulation du document HTML

Depuis le fichier JavaScript, il est possible d’ajouter du texte directement sur la page (document) HTML. Pour cela, on utilisera la propriété .write :

document.write('Text');

document permet de cibler le document (page HTML) dans son ensemble.

Depuis le fichier JS, on peut aussi modifier ou récupérer du texte avec la propriété .innerText :

document.innerText; //permet de récupérer de l'information
document.innerText = 'Un texte'; //permet de modifier l'information

Il est aussi possible de manipuler le HTML (et ses balises) avec la propriété .innerHTML. Cela permet de rajouter, en plus du texte, les balises que l’on veut.

Toutes ces manipulations se font directement sur le document.
Il est toutefois possible de modifier uniquement certaines parties de ce document. Pour cela, on va cibler spécifiquement ses éléments.

Ciblage par id

L’id est unique dans une page HTML. Il est donc facile de le cibler pour modifier le contenu de la balise identifiée. Pour cela, on utilisera la propriété getElementById( ) :

<p id="txt"> </p>
document.getElementById('txt').innerText = 'Texte à insérer';

Dans l’exemple ci-dessus, on a ciblé la balise contenant l’id ‘txt’ puis on a ajouté (ou modifié) du texte à l’intérieur.

Lorsque l’on code, il est possible que l’on répète plusieurs fois le même ciblage. Dans ce cas il est possible de créer une variable const. Cela permet de simplifier le code, de le rendre plus lisible. De plus, si l’id change, il sera plus facile de le modifier (on n’aura pas à parcourir toutes les lignes de code pour le changer !) :

const txt = document.getElementById('txt');
Ciblage par class

Le ciblage peut se faire en fonction des class ajoutées aux balises.

<p class="rouge"> </p>
document.getElementsByClassName('rouge');

Dans l’exemple ci-dessus, la class ‘rouge’ a été ciblée.
Attention à l’écriture : il ne faut pas oublier le ‘s’ après ‘Element’. En effet, la console considère le résultat de la recherche par class comme un tableau.
Il faudra aussi bien penser à indiquer l’indice visé entre crochets après le getElementsByClassName( ) .

Ciblage par balise

Le ciblage peut se faire en fonction des balises.

const NumDeux = document.getElementsByTagName('p');

NumDeux[1].innerText = 'Nouveau Texte';

Tout comme pour le ciblage par class, le résultat de la recherche par balise est considérée comme un tableau.
Dans l’exemple ci-dessus, le texte sera donc ajouté au niveau de la 2ème balise <p> du document.

Autres ciblages

Il est possible de cibler plus généralement un élément. On utilisera querySelector :

querySelector('element') // ciblera le 1er élément désigné
querySelectorAll('element') // ciblera tous les éléments désignés (=> tableau)

A noter que l’écriture de l’élément se fait comme sur le fichier CSS.
Ces ciblages sont à utiliser de préférence lorsqu’il n’y a pas la possibilité d’utiliser les autres ciblages.

Modification d’une source

Avec JavaScript, il est possible de modifier la source d’une image, d’un lien, etc.
Pour cela, on va utiliser la propriété .src pour une image, .href pour un lien, etc.
Par exemple, pour modifier la source d’une image :

<img id="IdImg" src="">
<p> Texte </p>
document.getElementById('IdImg').src = 'image.jpg';
Modification du CSS

JavaScript interprète le CSS comme un objet (alors qu’il considère le HTML comme un tableau). Lorsque l’on modifie le CSS en JS, on ne modifie pas le fichier CSS source. On vient juste inscrire les nouvelles règles de style dans le HTML (les modifications seront visibles uniquement depuis l’inspecteur !).
Il faut alors écrire les propriétés CSS en camelCase.
Par exemple :

document.getElementsByClassName('rouge')[1].style.backgroundColor = 'blue';

Il est possible d’écrire plusieurs propriétés CSS (s’il y a de nombreuses modifications, il sera préférable de passer directement par le fichier CSS !) :

document.getElementsByClassName('rouge')[0].style.cssText = 'font-family: Arial, sans-serif ; color: red ;' ;

Voici un récapitulatif des interactions de base qu’il est possible d’avoir entre les fichiers JavaScript et HTML/CSS.
La formation continuera sur des fonctions plus avancées en JavaScript…

Categories
Apprentissage Formation HTML Javascript Web

On reparle de JavaScript…

Logo JavaScript

Après avoir revu les bases de HTML, CSS et découvert Bootstrap, les cours se poursuivent avec JavaScript !
C’est l’occasion de revoir les bases que j’avais déjà abordé avec Openclassrooms… Et de découvrir comment JavaScript fonctionne avec les pages web.

Comment JavaScript fonctionne ?

Pour intégrer du JavaScript dans les pages web, il faut l’ajouter au fichier HTML.
JS est un script que l’on peut ajouter de trois façons différentes.

  • Soit directement sur un élément.
    Par ex:
<button onclick = 'codeJS'> OK </button>

ici, onclick indique que le code JS sera actif uniquement lorsqu’il y aura un clic que le bouton.

  • Soit à l’aide des balises <script> </script> que l’on ajoute juste avant la fermeture du <body> .
    Ici deux cas de figure se présentent :

– Soit en écrivant complètement le code JS dans le fichier HTML

<script> CodeJS à écrire </script>

– Soit en externalisant le fichier

<script scr = "js/scripts.js"> </script>

C’est cette dernière méthode que nous favoriserons.

Tous les scripts s’exécutent dans l’ordre dans lesquels on les a écrits. La seule façon d’afficher un message à l’infini (sans recharger la page) est de lier directement le script à un élément.
En JavaScript, on écrit toujours avec des guillemets simples. Cela évite des confusions si le code est écrit directement dans la page html (le code ajouté serait alors considéré comme un attribut !).

Message d’alerte

Nous l’avons déjà vu, il est possible d’ajouter des messages d’alerte qui s’affichent sur la page. Ces derniers sont utilisés uniquement lorsque l’on met au point une page. Ils sont ensuite à supprimer avant de mettre en production le code !

window.alert('...');

window sert à cibler la fenêtre,
.alert donne l’action à réaliser, c’est à dire afficher un message dans une fenêtre « popup ». On ajoute ensuite le contenu du message (ou de la variable) à récupérer.
Le point virgule permet de passer à l’instruction suivante.

Attention : le message d’alerte est spécifique à window. Il est donc possible d’écrire le message d’alerte sans cibler la fenêtre :

alert('...');
La console

Lors de la rédaction de scripts pour les pages HTML, il est plus facile d’utiliser la console qui est disponible dans le navigateur pour vérifier leurs exécutions. Pour mémoire, la console est disponible lorsque l’on utilise l’inspecteur du navigateur (son raccourci clavier est la touche F12).

On peut voir apparaître différents types de messages :
– ceux qu’on s’envoie à soi même
– les warning
– et les erreurs

La communication avec la console se fait directement en intégrant dans le code JS :

console.log('test');   // affiche un texte
console.log(test);   // affiche une variable

Les principales erreurs rencontrées sont :
ReferenceError => la variable n’existe pas, il y a une erreur de référence.
SyntaxError => il y a une erreur de syntaxe dans le code JS, quelque chose a mal été noté.

Bien qu’on utilise la plupart du temps console.log pour vérifier notre code, il est aussi possible de simuler des problèmes.
On peut alors utiliser différentes lignes de code dans le fichier JavaScript :

console.info('...');
console.warn('...');   // avertissement qu’il serait mieux de corriger
console.error('...');   // erreur réelle (non simulée), la suite du code ne sera pas lue
Les variables

Petit rappel sur les variables ! Elles permettent de stocker des informations. Une variable est une définition à un instant T.
Il y a 3 façons de déclarer les variables :
– avant ES6, on utilisait var
– depuis ES6, on utilise 2 types de déclaration :
° const pour déclarer une variable uniquement disponible en lecture, qui ne sera jamais modifiée. C’est l’abréviation de constante.
° let pour une variable qui est amenée à être modifiée.

La déclaration des variables se fait uniquement avec des caractères alphanumériques (majuscules ou minuscules), le underscore et le tiret. On ne met pas de caractères spéciaux, ni de chiffre seul et on ne
commence jamais avec un chiffre.
Caractères autorisés : a -> z A -> Z 0 -> 9 _ et –

let numero1 = 'un';   // variable qui sera modifiée
const numero2 = 'deux';   // constante 'string'
const vrai = true;   // booleen
const numeroTrois = 3;   // constante numérique

A noter : JavaScript est « Case Sensitive ». C’est à dire que c’est un langage sensible à la casse. Il est donc impératif de faire attention à l’écriture des variables !

Conventions de nommage :
camelCase : on met une majuscule à chaque début de mot (sauf pour le premier) et tout est attaché
snake_case : on ajoute un underscore entre chaque mot (sans majuscules)
kebab-case : on met des tirets entre les mots (sans majuscules)

Enfin, on peut définir une variable let en début de document et lui attribuer une valeur plus tard dans le code.

let numero1;
//
// déroulé du code
//
numéro1 = 'un';
// suite du code et utilisation de la variable
La concaténation en JavaScript

La définition sur Wikipédia nous indique que la concaténation désigne l’action de mettre bout à bout au moins deux chaines de caractères.
Il y a différentes façons de concaténer plusieurs valeurs entre-elles :
– Le plus simple est d’utiliser le + car il permet d’associer les valeurs. Attention : si les variables ne sont que des chiffres, alors c’est une addition qui s’effectuera.
– On peut aussi utiliser une virgule. Dans ce cas, les chiffres s’ajoutent les uns à côté des autres. La virgule créé alors un espace entre les deux.
– Toutefois, on privilégiera la méthode mise en place depuis ES6 qui permet d’écrire à la fois du texte et des variables. Tout est écrit entre des ‘faux-accents’ : `` , et les variables sont écrites avec ${ } (tout le
reste est alors considéré comme du texte).

console.log(variable1 + variable2);   // variable1variable2
console.log(variable1 , variable2);   // variable1 variable2
console.log(`${variable1} + ${variable2}`);   // variable1 + variable2
Les tableaux (Array)

Les tableaux sont des listes qui permettent de stocker des valeurs. L’écriture des tableaux se fait avec des crochets :

const slides = ['image1.png', 'image2.jpg', 'image3.png'];
Naviguer dans un tableau

Pour appeler une valeur dans un tableau, on utilise son index. IMPORTANT : les index d’un tableau commencent toujours par 0 !

const slides = ['image1.png', 'image2.jpg', 'image3.png'];

console.log(slides[1]);   // affichera image2.jpg
Taille d’un tableau

Lorsque l’on ne connait pas la taille d’un tableau, il est possible de l’afficher. On utilise alors .length. On peut alors utiliser cette propriété pour afficher un élément d’un tableau.

const slides = ['image1.png', 'image2.jpg', 'image3.png'];

console.log(slides.length);   // affichera 3
console.log(slides[slides.length - 1]);   // affichera image3.png
Manipulation de tableau

Il est aussi possible de modifier un tableau pour :

  • ajouter un élément à la fin d’un tableau avec .push
nomVariable.push('nouvelleValeur')
  • modifier la valeur d’un élément du tableau grâce à son index.
table[0] = 'nouvelleValeur'    // modifie l'élément situé à l'index 0
  • supprimer ou ajouter un élément à l’endroit que l’on souhaite avec .slice . Il faut alors ajouter 3 paramètres :
    – l’index où se situer pour commencer
    – le nombre d’index à supprimer (si on souhaite ajouter un élément cette valeur sera égale à zéro)
    – la nouvelle valeur à ajouter
array.splice(index, combien);   // suppression
array.splice(index, combien, valeur);   // ajout
Les objets (ou tableaux d’objets)

Les objets sont stockés sous forme de tableaux et sont définis par leurs déférentes clés. L’écriture d’objets se fait avec des accolades :

const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};
Naviguer dans un tableau d’objet

Pour parcourir un tableau d’objet, on utilise un point (index textuel).

const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};

console.log(etudiant.prenom);   // affichera Jean
Autres généralités sur les tableaux

Un tableau peut contenir différents objets. Pour améliorer la lisibilité, il est alors possible d’écrire les tableaux et les objets sur plusieurs lignes.

const etudiant1 = {prenom: 'Jean', nom: 'Dupont', note:'15'};
const etudiant2 = {prenom: 'Piere', nom: 'Dupond', note:'16'};
// const etudiants = [etudiant1, etudiant2];
const etudiants = [
   {
      prenom: 'Jean',
      nom: 'Dupont',
      note:'15'
   }, {
      prenom: 'Piere',
      nom: 'Dupond',
      note:'16'
   }
];

console.log(etudiants);   // affichera le détail des 2 objets etudiant1 et etudiant2

Il est aussi possible qu’un objet ait pour valeur des tableaux :

const frigo = {
   fruit: ["banane", "mangue", "cerise"],
   legume: ["courgette", "tomate", "poireau"]
};

console.log(frigo.fruit[0]);   // affichera banane

C’est donc une mise à plat (et un peu d’approfondissement) que j’ai fait lors de mon cours.
La suite est à venir, avec beaucoup plus d’interaction avec la page HTML…

Categories
Apprentissage CSS Formation Framework HTML Web

Bootstrap

Qu’est ce que c’est ?

Logo Bootstrap

Bootstrap est un Framework CSS.
Les frameworks sont des règles préétablies dans lesquelles on peut venir piocher. Ils permettent de simplifier la reprise du code par quelqu’un d’autre et de gagner du temps.

La base

Bootstrap est basé sur un principe de grilles.
On ne réfléchit plus en termes d’espacement, mais de colonnes de la grille à utiliser.
Bootstrap est basé sur 12 colonnes (car il y a de nombreux multiples possibles). Et entre les colonnes, il y a ce qu’on appelle des gouttières (ce sont les espacements entre les colonnes).

Par exemple, pour placer un élément sur toute la largeur de la page, on lui dit d’occuper 12 colonnes. Pour en placer 2, il faudra indiquer à chaque élément d’occuper 6 colonnes (ou en fonction de la disposition, par exemple 25% /75% deviendront 4 colonnes / 8 colonnes).

Les composants

Dans Bootstrap, il y a des composants : ce sont des outils CSS et JavaScript qui permettent d’ajouter directement dans la page de petits éléments (barres de recherche, pop up stylisé, etc.) déjà fonctionnels. L’inconvénient, c’est qu’on se retrouve rapidement avec les mêmes composants de partout (tous les sites se ressemblent alors !)
Il faut donc modifier le CSS pour styliser chaque élément à sa façon.

L’installation

Bootstrap est un fichier de style à charger.
Le téléchargement peut se faire sur le site de Bootstrap puis [Download].

Une autre méthode, plus simple, permet de ne pas télécharger Bootstrap (et donc d’alléger la page !) : ajouter directement au fichier HTML un lien vers le fichier Boostrap.
Toujours sur le site de Bootstrap, cliquez sur [Get Started] puis dans la section [Quick Start], récupérez le lien CSS à mettre dans le head du fichier HTML :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Il faut bien mettre ce lien avant celui de notre propre fichier de style CSS. En effet, nos règles CSS sont déclarées en dernier, elles seront donc prioritaires. Ce qui permettra de contrer celles de Bootstrap.

Comment fonctionne Bootstrap ?

Bootstrap permet de faire de la mise en page directement dans le fichier HTML (et avec très peu de règles CSS à ajouter).

Il y a des class prédéfinies que l’on peut ajouter au HTML. Elles permettent d’intégrer automatiquement des fonctionnalités aux balises ciblées.
On rajoute donc des class seulement s’il y a des modifications a apporter sur la balise.
La règle de nommage des class est : .nomdelaregle-taille-valeur

Bon à savoir : par défaut, tous les éléments Bootstrap ont des padding de 15px (les gouttières sont alors de 30px).

Breakpoints

Bootstrap intègre des breakpoints, permettant de rendre la page responsive automatiquement :
xs ou xtrasmall (< 576px) : .col-
Attention, cela correspond au mobile-first. Il sera donc la valeur par défaut (depuis la version 4 de Bootstrap)
sm ou small (>=576px) : .col-sm-
md ou medium (>=768px) : .col-md-
lg ou large (>=992px) : .col-lg-
xl ou xtralarge (>=1200px) : .col-xl-

Containers

Bootstrap est composé de deux containers généraux :
container fluid qui occupe toute la page

<div class="container-fluid"> </div>

container qui occupe la page avec un maximum de 1170px

<div class="container"> </div>

On utilise ensuite la notation des colonnes sur des éléments suivants.

Flex

Bootstrap est basé sur du flex. Il ne faut donc pas oublier de donner comme règle aux parents la class row (fait devenir flex sans prendre en compte l’espacement des cotés).
L’architecture des balises sera alors :
– grand parent => container
– parent => row
– enfant => col
Attention : il ne faut pas d’enfant row après un parent row.

Comme Bootstrap applique le style flex à la page, les class permettent d’appliquer toutes les règles du flex (elles sont toutes listées sur le site Bootstrap)

Alignement horizontal
justify-content-start
justify-content-center
justify-content-end

Le nomage se fait de la façon suivante :
.{propriété}-{breackpoint}-{valeur}
Par exemple :

<div class="row justify-content-start justify-content-lg-center"> </div>
Alignement vertical
 align-items-start
 align-items-center
 align-items-end

Par exemple :

<div class="row align-items-start align-items-lg-center"> </div>
Ordre les éléments
 order-2
 order-md-1

Ce qui permet de changer d’ordre et de le faire aussi en fonction de la taille de l’écran.

Saut de colonne

offset-nb : permet de placer un nombre (nb) de colonnes vides avant mon élément
offset-taille-nb : idem, en fonction de la taille de l’écran

Cela permet de faciliter la mise en page, car les calculs d’espacement se font tout seuls. cet outil gère automatiquement les espaces que doit avoir chaque élément et l’espace entre eux.

Remplacement du visible

C’est l’équivalent du display. il est noté d.

d-none : l’élément est caché
d-block : il est affiché

L’élément peut s’afficher ou se cacher en fonction de la taille de l’écran : d-lg-none ou d-lg-block

Espacement (padding / margin)

Le nommage se fait de la façon suivante :
.{propriété}{coté}-{breackpoint}-{taille}

Par exemple :

<div class="pr-md-0"> </div>

– propriété :
m margin
p padding

– coté :
a toutes les directions
t en haut
r à droite
l à gauche
b en bas
x horizontal (gauche et droite)
y vertical (haut et bas)

– breakpoint (cf. plus haut)
(rien) à partir de la taille mobile
sm
md
lg
xl

– taille
0
1 (0.25rem)
2 (0.5rem)
3 (1rem)
4 (1.5rem)
5 (3rem)

A savoir : il y a un gros gap entre 4 et 5. Il est donc possible de rajouter des règles CSS.
Pour rappel : l’unité de mesure rem est fonction de la taille du body.


Règles générales

Sans écrire une seule règle de CSS, on a déjà une mise en page en blocs avec des tailles différentes, etc.

Toutes les règles de mise en forme sont sur le site de Bootstrap.


Divers

Il est possible de modifier graphiquement les titres.
Il existe des classes qui permettent qu’un titre ressemble à un autre titre :

<h1 class="h2"> titre h1 qui ressemble à des h2 </h1>
<h2 class="h4"> titre h2 qui ressemble à des h4 </h2>
Categories
Apprentissage CSS Formation HTML Web

Un peu de « Responsive »

Le Responsive, qu’est ce que c’est ?

Aujourd’hui, nous utilisons beaucoup plus nos smartphones que nos ordinateurs. Nous nous sommes donc rendu compte que l’affichage sur ces 2 types d’écrans ne pouvaient pas être le même.

To be Responsive, or not to be ?

Le principe du Responsive est donc de créer du contenu qui va s’adapter à la taille de l’écran de l’utilisateur (il est possible alors de le faire varier un peu).
La logique, depuis ces dernières années, est de créer les pages en « mobile first ». C’est à dire les développer pour un affichage sur smartphones. Puis d’adapter le contenu pour les ordinateurs.
De plus, il faut garder à l’esprit que dans 94% des cas on utilise son mobile en mode portrait !

Comment ça marche ?

Dans un premier temps, et ce depuis HTML5, pour que les règles « Responsive » (ou Media Query) soient prises en compte, il faut obligatoirement ajouter dans le <head> de la page la meta suivante :

<meta name=”viewport” content=”width=device-width, initial-scale=1”/>

Dans un deuxième temps, dans le fichier CSS, on écrit toutes nos règles pour un affichage sur mobile. Puis à la fin on vient rajouter les nouvelles règles qui seront uniquement valables pour les autres tailles d’écran.

@media (taille écran) [
   selecteur {
      propriété1: valeur;
      ...
   }
   ...
}

On indiquera uniquement les propriétés qui sont modifiées par taille d’écran.
Les tailles d’écran (ou breakpoint) sont les suivantes :

Media Queries (tailles d’écrans)

Il est possible de cumuler les règles de « média query ». On a alors des créneaux de tailles d’écran. Et les règles ne s’appliqueront alors que pour ce créneau.
Par exemple :

@media (min-width:768px) and (max-width:960px) {
    // règles à appliquer uniquement pour les écrans ayant un largeur entre 768 et 960px
}

A noter qu’il est préférable de mettre les règles « Responsive » à partir des breackpoint (min-width), comme ça elles s’appliqueront pour toutes les tailles à partir de celle définie.

Pour aller un peu plus loin

Ratio de taille d’écran

On peut aussi mettre des règles en fonction d’un ratio de pixels de la taille d’écran :

@media (-webkit-min-device-pixel-ratio: 2) {
   // règles à appliquer
}

Par exemple pour les images, lorsque l’on augmente la taille de l’écran, la qualité de l’image peut devenir meilleure (haute def.)

Impression

Pour paramétrer précisément des impressions, on peut utiliser :

@media print { 
   // règles spécifiques pour l'impression
}

C’est dans le cas où l’utilisateur imprime la page (billetterie, facturation, devis, etc.). On peut indiquer des valeurs par défaut pour l’impression : noir & blanc pour diminuer l’utilisation des cartouches, imprimer uniquement ce qui est nécessaire, etc.

Categories
Apprentissage CSS Formation HTML Web

Animation des pages

Animation, vous avez dit animation ?

Animation ? Vous avez dit animation ?
Et oui, avec le CSS, il est possible d’animer des pages en donnant aux éléments du mouvement.

Qu’est ce qu’une animation en CSS ?

Il existe 3 concepts d’animations en CSS :

  • les transitions qui permettent le passage d’un état A à un état B. Elles nécessitent alors une action de l’utilisateur et se déclenchent seulement après,
  • les animations pour lesquelles l’action de l’utilisateur n’est pas nécessaire pour permettre le passage d’un état A à un état B,
  • et les transformations qui modifient l’aspect d’un élément.

A noter qu’il est aussi possible de mixer ces 3 concepts.

Pour les animations et les transitions, le passage d’un état A vers un état B peut donc se faire de 4 façons différentes :

  • linear : permet d’aller de façon constante de A vers B
  • ease-in : l’animation va lentement au début puis s’accélère dans le temps
  • ease-out : permet d’aller rapidement au début puis de ralentir
  • ease-in-out : l’animation va lentement puis rapidement puis ralenti.

Les transitions

Les transitions permettent de passer de manière fluide d’un état à un autre.
En CSS, une transition regroupe 4 paramètres :

transition-property : {propriété} ;
transition-duration : {valeur} ;
transition-timing-function : {valeur} ;
transition-delay : {valeur} ;

Dans le fichier CSS, il est possible d’écrire les propriétés les unes à la suite des autres. Ou bien en une seule ligne :

transition : {transition-property} {transition-duration} {transition-timing-function} {transition-delay}

La transition se met dans l’élément initial. Ce qui permet ensuite d’avoir la même façon d’être à l’aller et au retour.
Par exemple :

.mydiv {
      opacity : 0.25 ;
      color : #FFFFFF ;
      transition : opacity 0.5s ease-in 1s, color 1s 0.5s ;
}

.mydiv :hover {
      opacity : 1 ;
      color : #BBBBBB ;
}

Les animations

On considère une animation comme étant un passage d’un état à un autre sans intervention de l’utilisateur.
Elles doivent alors être déclarées avant d’être utilisées.

Il y a deux types de déclarations :

  • Lorsque l’on passe de l’état A à l’état B directement
from {
      // propriétés
}

to {
    // propriétés
}
  • Ou bien, lorsque l’on passe par plusieurs étapes entre les 2 états. On indique alors un pourcentage de temps écoulé avant que l’animation ne se lance (va de 0 à 100%)
0% {
      // propriétés
}
35% {
      // propriétés
}
100% {
      // propriétés
}

Les différentes propriétés que l’on peut appliquer à une animation sont les suivantes :

animation-name : {monAnimation};
animation-duration : {temps};
animation-delay : {temps};
animation-iteration-count : {nombre};
animation-direction : {valeur}; 
animation-mode : {valeur};
  • animation-name : permet de récupérer l’animation déclarée auparavant
  • animation-duration : indique combien de temps dure l’animation (en secondes)
  • animation-delay : c’est le délai avant le lancement de l’animation (en secondes)
  • animation-iteration-count : indique combien de fois l’animation s’exécute (soit un nombre soit à l’infini (infinite))
  • animation-direction : défini comment se passe l’animation.

Ses valeurs sont alors :
    normal   : va de 0 à 100% puis recommence à l’infini
reverse    : va de 100 à 0% puis recommence à l’infini
alternate : s’anime dans les 2 sens (effet yoyo)
alternate-reverse

  • animation-mode : détermine comment l’animation se comporte

Ses valeurs sont alors :
    none   : arrête l’animation, ne respecte plus ses règles et reprend les règles de l’élément
backwards : va reprendre les règles définies à 0%
forwards : va reprendre les règles définies à 100%
both  : va reprendre les règles du moment où l’animation s’est arrêtée

Dans le fichier CSS, on peut aussi écrire une animation sur une seule ligne :

animation : {animation-name} {animation-duration} {animation-delay} {animation-iteration-count} {animation- direction} {animation- mode}

Les transformations

Les transformations modifient l’état d’un élément. Il existe différents types de transformations.

L’élément peut se déplacer dans l’espace (en pixel, les valeurs peuvent être négatives) en utilisant la propriété translate.

transform : translate(x,y); 
            translateX(valeur);
            translateY(valeur) ;

On peut aussi changer l’échelle de l’élément (qui est par défaut de 1) en le faisant soit grandir, soit rapetisser. On utilisera alors la propriété scale.

transform : scale(x,y) ;    
            scaleX(valeur) ;
            scaleY(valeur) ;

Il est aussi possible de faire faire des rotations à un élément (selon l’axe des X, des Y ou des Z). On utilisera la propriété rotate (dont la valeur est en degrés).

transform : rotateX(valeur) ;
            rotateY(valeur) ;
            rotateZ(valeur) ;  

A noter que 360° correspond à un tour complet.

Enfin, on pourra déformer un élément sur son axe des X ou des Y en utilisant la propriété skew (sa valeur est en degrés).

transform : skew(valeur) ;
            skewX(valeur) ;
            skewY(valeur) ;         

Il y a la possibilité de mettre plusieurs transformations sur un même élément. Il faudra alors mettre un espace entre chaque.
Par exemple:

transform : scale(2) translate(20px) ;

Toutes les transformations se font par rapport au point d’origine de l’élément.
Il est alors possible de changer ce point en utilisant : transform-origin .

Categories
Apprentissage CSS Formation HTML Web

Flexbox

Flexbox est un module de « boites » CSS qui a été conçu pour aider la mise en page des pages web.
Les éléments sont alors considérés comme des boites (ou blocs) que l’on peut facilement disposer sur une ligne ou une colonne.

Flexbox doit être appliqué à l’élément parent pour que l’élément enfant direct puisse en hériter.
Son appel se fait de la façon suivante :

.parent {
    display : flex ;
}
.enfant {
   propriété : valeur ;
}

Quelles sont ses propriétés ?

Il existe différentes propriétés de Flexbox pour mettre en forme les éléments. Et il est important de bien les placer (dans l’élément parent ou enfant) pour que les règles s’appliquent correctement.

Propriétés de l’élément parent

Les propriétés suivantes sont à mettre dans l’élément parent.

visualisation de justify-content

Répartition horizontale
Elle permet de répartir les éléments enfants sur l’axe horizontal.

justify-content : flex-start; : commence au début du parent.
justify-content : flex-end; : commence par la fin du parent.
justify-content : center; : centre horizontalement par rapport au parent.
justify-content : space-evenly; : réparti dans tout l’espace du parent.

visualisation de align-items

Répartition verticale
Elle permet de répartir les éléments enfants sur l’axe vertical.
align-items : flex-start; : commence en haut du parent.
align-items : flex-end; : commence en bas du parent.
align-items : center; : centre verticalement par rapport au parent.
align-items : stretch; : réparti sur l’axe vertical du parent.

Visualisation de flex-direction

Répartition des éléments entre eux
Elle permet de répartir les éléments enfants les uns par rapport aux autres.
flex-direction : row;: les éléments se répartissent sur une ligne dans l’ordre croissant d’écriture.
flex-direction : row-reverse; : ils se répartissent sur une ligne dans l’ordre décroissant d’écriture.
flex-direction : column; : les éléments se répartissent sur une colonne dans l’ordre croissant d’écriture.
flex-direction : column-reverse; : ils se répartissent sur une colonne dans l’ordre croissant d’écriture.

visualisation de flex-wrap

Répartition sur plusieurs lignes
C’est l’empaquetage : les éléments se répartissent en ligne.
flex-wrap: nowrap; : tous les éléments sont sur une seule ligne avec un espace équivalent (la taille initiale des éléments n’est plus prise en compte).
flex-wrap: wrap; : permet de créer plusieurs lignes. En fonction de leur taille, les éléments passent à la ligne lorsqu’il n’y a pas assez de place.
flex-wrap: wrap-reverse; : c’est la même fonction que précédemment, sauf que la ligne se créée au-dessus.

Propriétés de l’élément enfant

Certaines propriétés sont à mettre dans l’élément enfant.
La plus utilisée est la suivante :

Taille
Cette propriété permet de pouvoir ajuster la taille d’un élément précis (après avoir appliqué un flex-grow au préalable).

flex-grow : nombre;
visualisation de flex-grow

C’est un ratio : tous les éléments ont initialement une taille de « 1 ».  Si on applique un flex-grow de 2 sur un élément, cela veut dire que cet élément a 2 fois la taille des autres éléments.

Il existe d’autres propriétés qui sont consultables sur le site css-tricks ou sur celui de MDN.


Pour aller plus loin

Ce module n’est pas encore reconnu par tous les navigateurs, il faut donc ajouter des préfixes pour chaque propriété utilisée (ces derniers sont amenés à disparaître lorsque la règle sera bien intégrée par les navigateurs – vérifiable sur le site shouldiprefix.com).

Les préfixes sont les suivants :
-webkit- :  pour Chrome et Safari (sachant que Chrome est le navigateur le plus utilisé en France !)
-ms- : Internet Explorer, Microsoft Edge
-moz- : Firefox
-o- : pour les anciennes versions d’Opera

Par exemple :

balise {
   -webkit-justify-content : center ;
   -ms-justify-content : center ;
   justify-content : center ;
}
Categories
Apprentissage CSS Formation Web

Un peu de CSS (suite)

Logo CSS 3

Un peu de CSS (la suite !)…
Les cours sur le CSS se suivent et ne se ressemblent pas ! 😉

Après avoir vu les bases de mises en page en CSS, nous abordons dans la suite du post les notions pour agencer les éléments sur la page.

L’occupation de l’espace

En CSS, il est possible de définir quel espacement / place occupera un élément sur la page. Pour cela, on utilise la propriété « display » que l’on peut alors appliquer à n’importe quel élément.
Ses différentes valeurs sont :
display : block; : l’élément occupe tout l’espace (c’est le cas des balises div ou p par exemple).
display : inline; : l’élément occupe juste l’espace nécessaire et permet que les éléments soient les uns à côté des autres (c’est le cas des balises span par exemple).
display : initial; : l’élément reprend sa valeur par défaut.
display : inherit; : l’élément prend la valeur de ses parents (il en hérite !)
display : inline-block; : combine les propriétés du inline et du block. Sur l’espacement déterminé par le inline, il est alors possible de modifier les espacements autour grâce aux propriétés du block.
display : none; : cache l’élément.
display : flex; : apparu avec HTML5, il permet de créer de nouvelles façons de mettre en page (nous verrons ce sujet plus tard !).

La flottaison des éléments

Sur les balises de type block (ou lorsque l’on ajoute un display : block; à un élément), il est possible de modifier la position de l’élément avec la propriété « float ».
Avec cette propriété, on peut alors mettre les « blocks » en ligne et faire en sorte qu’ils se placent les uns à côté des autres.
Ses valeurs sont :
float : none; : retour à l’état initial.
float : left; : les éléments se placent les uns à côté des autres en partant de la gauche, jusqu’à la ligne suivante.
float : right; : ils se placent les uns à côté des autres en partant de la droite, jusqu’à la ligne suivante.
clear : both; : casse la ligne de flottaison (retour à la ligne).

Pour que la flottaison ne s’applique qu’à l’enfant, il est important de rajouter à l’élément parent la propriété suivante : overflow : auto;

Les espacements

De base, tous les éléments sont les uns à côté des autres. Une bordure vient ensuite agrandir la taille de base des éléments. Cette bordure créée des espacements que l’on peut styliser en leur appliquant une dimension (généralement en pixel).
Le padding est un espacement interne. Il s’ajoute à la taille de l’élément. De plus, il ajoute de l’espacement à l’intérieur de l’élément et garde donc les propriétés de cet élément.
Le margin est un espacement externe. Il s’ajoute aussi à la taille de l’élément. Comme il ajoute de l’espacement à l’extérieur de l’élément, il ne garde pas les propriétés de cet élément.

Il est aussi possible de spécifier une dimension pour chaque côté (top, right, bottom, left) séparément, ou deux à deux (top+bottom, right+left) ou la même dimension pour tous les côtés.

Calculs mathématiques

Si on ne peut pas déterminer de façon exacte une valeur d’espacement, il est possible de la calculer directement dans la propriété (par exemple 1/3 ou 1/5, etc.). On utilise alors la fonction « calc ».
Par exemple : width : calc(100% / 3);

Il existe une propriété qui permet de supprimer tous les espacements internes : box-sizing : border-box;
On ajoute alors cette propriété à tous les éléments au début du fichier CSS, ce qui permet de rajouter du « padding » et des bordures dans que leurs tailles soient prises en compte dans le calcul de la largeur totale.

Les bordures

Chaque élément détient une bordure (qui agrandit aussi la taille de l’élément). On peut aussi styliser :
– son épaisseur avec border-width : valeur; (ici la valeur est définie de la même manière que pour les espacements)
– son style :
border-style : none;  il n’y a pas de trait
border-style : solid;  la bordure est un trait plein
border-style : dotted;  c’est un trait pointillé
border-style : dashed;  ici c’est un trait en petits tirets
border-style : double;  la bordure est un double trait plein
– sa couleur avec border-color : value; (ici la valeur est définie comme pour les couleurs).

Il est aussi possible d’écrire toutes les propriétés pour les bordures sur une seule ligne (à condition que les 4 côtés aient les mêmes caractéristiques) :

border : width style color;
Le positionnement

Chaque élément peut voir son positionnement modifié grâce à la propriété « position ».
position : static; : c’est la position de base de l’élément.
position : relative; : elle permet de déplacer l’élément horizontalement par rapport à lui-même, tout en conservant son espace initial. Il faut alors indiquer dans une seconde ligne de combien de pixels on déplace l’élément et si on le déplace à gauche ou à droite.

position : relative;
left : 10px;

position : absolute; : l’espace alloué à l’élément est libéré. L’élément vient alors se positionner par rapport au premier élément parent qui est en position relative.
position : fixed; : l’élément se positionne de façon fixe par rapport au navigateur. Ce qui permet que lorsque l’on scroll l’élément reste toujours visible !

Mise en forme

On peut appliquer une mise en forme spéciale sur les éléments.

ombres

Il est possible d’ajouter une ombre externe autour de l’élément. On applique alors la propriété box-shadow. Cette dernière aura 4 valeurs  (dans l’ordre de déclaration) :
– décalage sur l’axe horizontal en pixel
– décalage sur l’axe vertical en pixel
– flou de l’ombre, du contour
– indication de combien de pixels s’étend l’ombre par rapport à la taille de l’élément
– couleur de l’ombre
Pour faciliter la visualisation de l’ombre et sa déclaration, on passera par un éditeur tel que CSSMatic.

arrondis

On peut créer des bords arrondis pour les éléments (ayant une couleur de fond ou une bordure). On utilise alors :

border-radius : valeur;

À noter : il est aussi possible de créer un rond à partir d’un élément carré en lui mettant un « border-radius » à 50%.

dégradés

Il est possible d’appliquer aussi une couleur de fond dégradée (qui passe d’une couleur à une autre)

background : linear-gradient(to right, couleur1 0%, couleur2 100%);
polices spéciales

On peut utiliser des polices spéciales que l’on viendra ajouter directement en haut du fichier CSS, on parle généralement de @font-face.
Il est important de bien vérifier que la typographie choisie est bien libre de droit (ou qu’elle a bien été payée !) avant de l’utiliser sur sa page.
De plus il faut noter qu’il existe différents formats de typographie. Et tous ne sont pas obligatoirement reconnus sur les navigateurs. Les principaux formats rencontrés sont :
TTF / OTF / WOFF / WOFF 2.0 / SVG / EOT

Il existe 2 façon de récupérer des typographies :
– en utilisant un générateur en ligne qui permet de convertir une police donnée dans différents formats (on peut citer par exemple : Font Squirrel).
On ajoutera la police dans le fichier CSS de la façon suivante :

@font-face {
    font-family : "Name";
    /* règles récupérées via le générateur */
}

– en utilisant les polices proposées par Google Fonts.
Ici, il suffit de choisir sa police, la sélectionner puis de la Customize (choisir uniquement les tailles que l’on souhaite charger). Ensuite, en cliquant sur « Embed », les liens à ajouter s’affiche. Google Fonts donne la possibilité de rajouter le lien, soit dans le fichier HTML (dans le <head>) soit dans le fichier CSS (on selectionnera uniquement la ligne commençant par @import que l’on mettra en haut du fichier CSS).

Il existe aussi une police spécifique aux icônes que l’on peut trouver sur Material Design Icons.
Dans ce cas, on insère directement le lien de référence dans le <head> du fichier HTML :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Puis, toujours dans le fichier HTML, on insère l’icone à l’endroit prévu en utilisant une nouvelle balise :

<i class="material-icons"> android </i>

Dans le cas ci-dessus, c’est l’icone « android » qui s’affichera. Il suffit donc de changer le nom entre les balises pour modifier l’icone affichée.


Il existe aussi des façons plus rapides pour désigner les éléments sur le fichier CSS. Nous en avons vu 2 différentes.

Les sélecteurs avancés

Pour faciliter la désignation des éléments (et donc éviter de mettre des class de partout !), il existe différents sélecteurs avancés qui permettent de sélectionner les éléments par rapport à leur hiérarchie.

  • Cible directe : parent > enfant
    Permets de sélectionner les enfants directs du parent.
  • Sélecteur adjacent : élément1 + élément2
    Sélectionne uniquement l’élément 2 qui est tout de suite après l’élément 1 (même s’il y a plusieurs éléments 2 après l’élément 1).
  • Sélecteur successeur : élément1 ~ élément2
    Permets de sélectionner tous les éléments 2 qui suivent l’élément 1 pour un même parent.
  • Cibler certains enfants:
    le 1er enfant : parent :first-child
    le dernier enfant : parent :last-child
    le n-ième enfant : parent :nth-child(no) (le no correspond à la place ciblée).
    A noter : l’espace avant les deux-points correspond à un lien de parenté. Sans espace, c’est alors l’élément direct qui est ciblé.
  • Ciblage par rapport à un type de balise
    balise :first-of-type : cible le 1er type de la balise
    balise :last-of-type : cible le dernier type de la balise.
Les pseudo-classes

On peut aussi donner des états différents en fonction de ce que fait l’utilisateur sur la page. Il en existe 5 différents :
élément:focus {   }
Lorsque l’utilisateur sera focalisé sur un champ de formulaire, ce dernier changera d’état selon les propriétés ajoutées.
élément:hover {   }
Dès que l’utilisateur passe la souris sur l’élément, celui-ci change d’état.
élément:active {   }
Au moment où l’utilisateur clique sur l’élément, il change d’état. Cela s’arrête lorsque l’utilisateur lâche le « click ».
élément:disable {   }
tant que la « réponse » précédente n’a pas été donnée, l’élément reste non accessible (grisé).
élément:normal-state {   }
C’est l’état initial de l’élément.


Voici donc toutes les bases de mise en forme utilisables en CSS.
La prochaine notion que j’ai ensuite abordée lors de ma formation est FLEXBOX.
À voir lors du prochain post…! 😉

Categories
Apprentissage CSS Formation HTML Web

Un peu de CSS

Un peu de CSS (Cascading Style Sheets)… pour styliser les éléments !

Logo CSS3

Dans les années 1996, un nouveau langage descriptif a été mis en place pour améliorer l’affichage des pages HTML : le CSS.
En ciblant les balises HTML, le CSS permet de leur apporter de nouvelles propriétés (couleur, hauteur, largeur, couleur de fond, etc.).

Au final, la page HTML s’affichera non plus comme une suite de ligne, mais comme une page mise en forme de façon agréable à regarder  !

Comment l’ajouter ?

Il y a différentes façons de rajouter du CSS à une page HTML.
Par exemple, il est possible de l’ajouter directement dans le code HTML en utilisant sur les balises ciblées l’attribut « style ».

<balise style = "propriété1 : valeur1; propriété2 : valeur2; ..."> </balise>

Celle qui sera favorisée sera d’externaliser le fichier. Pour cela, on rajoute une balise <link> dans le <head> de la page HTML.

<head>
   <link rel="stylesheet" href="style.css">
</head>

Et comment ça marche ?

Sur le fichier externe .css, l’objectif est de cibler les balises HTML visées par le changement de mise en forme.
Si le ciblage n’est pas assez pointu, on utilisera le principe de « classes ». C’est un attribut (class) que l’on donne aux éléments pour les distinguer des autres. Il permet aussi de regrouper des éléments qui n’ont pas de balise commune.

<balise class="nom"> </balise>

.nom {   }

À noter qu’il est possible d’ajouter différentes classes a un élément HTML.

Les différentes façons de cibler les éléments sont les suivantes :
– une balise

balise {   }

– une classe

.class {   }

– un identifiant

#id {   }

Il est possible de cibler les éléments en fonction de leur lien de parenté. Pour cela, on écrit chaque élément avec un espace :

<div class="principal">
   <p> blabla <span> blabla </span></p>
   <span> blabla </span>
</div>
.principal p span {   }
/* on cible les balises span contenues dans les balises p qui appartiennent à la class "principal" */

Pour cibler deux (ou plus) éléments différents, on les écrit avec une virgule entre chaque.

balise1, .class, balise2 {   }

Les propriétés CSS

Couleur

Il y a 3 possibilités de renseigner une couleur :
– son nom en anglais (par ex. : red)
– sa valeur hexadécimale (par ex. #FF0000)
– la notation RGB. Cette notation représente le spectre lumineux et indique l’intensité du rouge R, du vert G et du bleu B (par ex. RGB(255,0,0).

Il est possible de récupérer les valeurs des couleurs spéciales grâce à un color picker (disponible sur Google).

On peut aussi gérer l’opacité de la couleur en ajoutant au mode RGB une 4ème valeur « A ». Cette valeur va de 1 : opaque à 0 : transparent.
On la note : RGBA(255, 0, 0 0.5) <– ici le rouge aura une opacité de 50%.

Attention : l’opacité est une valeur décimale, il faut bien penser à mettre un point et non pas une virgule !

Typographie

Il existe différentes propriétés que l’on peut utiliser pour gérer la typographie des textes.

– la couleur de texte (avec la même notation que vue précédemment).

color : valeur;

– le type de famille de typologie. Il est important de penser à mettre différentes typologies au cas où le navigateur ne puisse pas en charger certaines. Il est possible de retrouver les typologies prises en charge par la plupart des navigateurs sur internet : voir les « safe font« .

font-family : helvetica, sans-serif;

– la taille de la typographie.

font-size : 12px;

Il existe différentes unités de mesure : pixels, points, pourcentage.
Avec CSS3, une nouvelle unité de mesure est apparue : em. Elle donne une proportion par rapport à la taille de l’élément parent (1em correspond à une unité de la taille du parent).

– l’épaisseur des lettres.

font-weight : bold;   /*écriture en gras */
font-weight : bolder;  /*écriture en plus gras */

– la décoration du texte.

text-decoration : underline;  /* souligné */
text-decoration : line-through;  /* barré */

– mettre le texte en italique.

font-style : italic;

– changer la casse du texte.

text-transform : uppercase;  /*majuscule */
text-transform : lowercase;  /*minuscule */
Arrière-plan

En CSS, on peut ajouter directement une image de fond.

background-image : url("fichier.png");

Il est possible d’indiquer sa position.

background-position : x y;  /* x correspond à la longueur et y à la largeur */

La position peut aussi être généraliste en utilisant comme valeurs : left (à gauche), right (à droite), center (centré), top (en haut), bottom (en bas).

La taille de l’image peut être ajustée.

background-size : x y;  /* x correspond à la longueur et y à la largeur */

Les valeurs x et y sont exprimées en pixels ou en pourcentage.
La taille peut s’ajuster automatiquement en gardant le ratio d’origine en utilisant « auto » comme valeur.

Il est aussi possible de faire en sorte que l’image se répète.

background-repeat : valeur;

Ici les valeurs sont les suivantes :
– repeat : l’image se répète sur toute la largeur et la longueur de la page.
– repeat-x : l’image se répète uniquement de façon horizontale.
– repeat-y : l’image se répète uniquement de façon verticale.
– no-repeat : l’image ne se répète pas.

Il est possible de faire chevaucher plusieurs images de fond.

background-image : url("image1.png"), url("image2.png");

Dans ce cas, l’image 1 s’affichera en premier et l’image 2 s’affichera  derrière.

Pour simplifier l’écriture, on peut écrire toutes les propriétés sur une seule ligne.

background : url("image.png") position / size repeat ;

Voici les premiers concepts sur CSS que j’ai appris lors de ma formation.
Je continuerai dans les prochains posts… Le CSS est très fourni et demande d’acquérir de nombreuses notions ! 🙂

Categories
Apprentissage Formation HTML Web

Nouvelle formation, nouveau départ…

Cette fois, c’est fait : je me lance enfin dans une formation encadrée dans un centre de formation… Pour ce nouveau départ, j’entame donc une nouvelle formation !

Et pour ces premiers jours, nous reprenons les bases de HTML…

Qu’est ce que le langage HTML ?

Un langage de contenu

Le langage HTML est composé de différentes balises. Ces balises servent à indiquer quel contenu il y a sur la page. Elles sont écrites à l’aide de 2 chevrons : un ouvrant et un fermant.
Il existe 2 types de balises :
– Les balises paires. Elles sont composées d’une balise ouvrante et d’une balise fermante. La balise fermante a le même nom que l’ouvrante et contient un slash (/) juste après le chevron ouvrant. On peut ajouter du contenu dans ces balises.
– Les balises orphelines ou autofermantes. Ces balises se suffisent à elles-mêmes, elles ne contiennent donc pas de contenu. 

<!-- Balise Paire -->
<balise> ... </balise>

<!-- Balise orpheline -->
<balise />
anatomie d'un élément HTML
Construction d’une page HTML

La première balise, à ne pas oublier, est celle qui permet de dire au navigateur que tout le document à traiter est de type HTML.

<! DOCTYPE html>

La page est ensuite entièrement construite dans la balise <html>. Cette dernière a deux balises enfants : <head> et <body>.
Dans la balise <head>, on met toutes les informations concernant la page. Notamment les métadonnées de la page, avec la balise <meta> et plus précisément le type d’écriture (<meta charset>). Ainsi que le titre de la page (qui est affiché au niveau de l’onglet du navigateur) avec la balise <title>.
Dans la balise <body>, on met tout ce qui sera affiché sur la page. Comme les titres avec les balises type <h1> ou du texte avec des balises « paragraphe » type <p>.

<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre de la Page</title>
    </head>

    <body>
        <h1>Ma Page</h1>
        <p> Paragraphe du site </p>
    </body>
</html>

Chaque balise peut, si elle le nécessite, contenir des informations plus précises. Pour cela on ajoute des attributs à la balise.
Un attribut ne peut être utilisé qu’une seule fois dans chaque balise. Par contre chaque balise peut contenir plusieurs attributs.
La liste de tous les éléments est sur le site officiel MDN.


Un peu plus loin…

Pour aller un peu plus loin, voici quelques exemples de ce qu’il est aussi possible de faire en HTML

Les tableaux

En HTML, il est possible de créer des tableaux. On utilise alors la balise <table>...</table>.
le tableau se lit/se créé ligne par ligne avec les balises <tr>...</tr>.
Ces lignes sont ensuite décomposées en cellules de titre (<th>...</th>) ou de données (<td>...</td>).
Différents attributs permettent de modifier les lignes et/ou cellules du tableau créé.
Les tableaux sont utilisés pour montrer des tableaux sur les pages web. Ils servent aussi à faire la mise en page des e-mails ou des Newsletter.

<table>
    <tr>
        <th> Nom  </th>
        <th> Age  </th>
    </tr>
   <tr>
        <td> Paul  </td>
        <td> 33 ans  </td>
    </tr>
   <tr>
        <td> Anna  </td>
        <td> 25 ans  </td>
    </tr>
</table>
Les liens

Il est aussi possible de rajouter différents types de liens dans un fichier HTML : des liens externes, internes, de fichiers, mail ou téléphone.
La balise utilisée est <a>...</a>, avec comme attribut principal « href » (et « target »).
La principale différence entre les liens externes et internes est alors l’adresse que l’on ajoute dans l’attribut « href ». En effet, pour un lien externe, il est important de ne pas oublier de mettre le protocole utilisé. Sinon le lien sera considéré comme interne (le fichier se trouvant dans le même dossier).
Il est aussi possible de créer une ancre. C’est un lien qui permet de basculer directement vers un contenu spécifique (à l’aide de l’attribut « id ») de la page.

<!-- Lien externe -->
<a href="http://www.bgmp.fr/"> Lien externe </a>

<!-- Lien inxterne -->
<a href="fichier.html"> Lien interne </a>

<!-- ancre -->
<a href="#ici"> Ancre </a>
...
<div id="ici"> ... </div>

Les nouveautés du HTML 5…

Finalisée en octobre 2014, la version 5 du HTML apporte une nouvelle façon de coder les pages. En effet, de nouvelles balises sont créées pour apporter plus de lisibilité.

Ces nouvelles balises sont les suivantes :

<header> : correspond à un en-tête. Il y en a un principal, celui de la page. Il est toutefois possible d’en ajouter à d’autres endroits de la page (section, article, etc.)

<main> : cette balise permet de regrouper tout ce qui est important sur la page. C’est ce qui sera regardé en priorité par les navigateurs. Attention : Il ne doit y en avoir qu’un seul par page !

<section> : c’est un gros regroupement de sujet par thématique.

<article> : cette balise correspond à un élément que l’on peut sortir de la page et qui garde son sens, sa logique.

<footer> : c’est un pied de page. Ses caractéristiques sont les mêmes que le <header>.

<nav> : cette balise regroupe tous les éléments de navigation. C’est donc une liste de liens. Il y en a toujours un principal (celui du menu de la page !). Il est toutefois possible d’en ajouter à d’autres endroits de la page (en pied de page par ex.).

<asside> : correspond à du contenu complémentaire.

<figure> : cette balise permet de regrouper un ou plusieurs médias, comme par exemple une galerie.

<figcaption> : permet d’ajouter une légende à une figure. Attention : elle est obligatoirement intégrée dans la balise <figure>.

<time> : cette balise regroupe tout ce qui concerne le temps (date, heure, etc.). Elle représente un temps.

Voici quelques exemples de mises en page possible :