Logo Polytech

Fonctionnement du site

  • Les différents sujets abordés sont listés dans la barre de navigation en haut de la page.
  • Chaque sujet contient plusieurs chapitres.
  • Chaque chapitre est composé de slides.
  • Chaque slide peut avoir plusieurs animations.
  • Utilisez les flèches de votre clavier pour naviguer à l'intérieur d'un sujet : les flèches horizontales permettent de passer d'une animation à l'autre ; les flèches verticales permettent de changer de slide.
  • Si le mode présentation n'est pas activé, toutes les slides du chapitre actif sont affichées et les flèches permettent uniquement de basculer d'un chapitre à l'autre.

Sommaire du cours (1/2)

  1. Introduction : Fonctionnement du web
  2. Introduction : Langages du web
  3. Statique : Balises HTML ; Sélecteurs et propriétés CSS
  4. Statique : Regroupement d'éléments ; Arbre HTML
  5. Statique : Position (absolute, relative, fixed)
  6. Statique : Display (grid, flex)

Sommaire du cours (2/2)

  1. Dynamique : Animations CSS
  2. Dynamique : Réagir aux évènements
  3. Dynamique : Modifier le HTML et le CSS
  4. Serveurs : Hébergement (serveur de fichiers VS web hosting)
  5. Serveurs : Node.js
  6. Serveurs : Logique métier (API, DB, Back-ends)
  7. Bonus : Architecture, UX, SEO, Astuces, ...

(Très courte) Histoire du web

  • 1989 : Tim Berners-Lee écrit un papier sur un moyen de partager des informations efficacement
  • 1990 : Développement des 3 concepts permettant la communication web :
    • Uniform Resource Locator (URL) pour localiser un document
    • HyperText Transfer Protocol (HTTP) pour communiquer avec un ordinateur distant
    • HyperText Markup Language (HTML) pour afficher les informations récupérées
    Avec ces 3 éléments, le World Wide Web (www) est né.
  • 1991 : La première page publique de l'histoire
  • ...
  • 2014 : Le HTML5 sort

Langages du web

HTML - Syntaxe

  • Le HTML permet d'afficher des informations (textes, images, vidéos, ...) à l'utilisateur
  • Il s'écrit avec des balises (tags en anglais) : <tagName propertyName1="propertyValue1" propertyName2="propertyValue2" ... > Content </tagName> par exemple : <a href="http://webtuto.ps8.academy" title="titre à afficher au survol"> Mon site </a> Note : certaines balises ne contiennent pas de contenu et n'ont donc pas de balise fermante. C'est le cas de img, meta, link et quelques autres.

HTML - Structure

  • Dans une page HTML, certaines balises sont obligatoires <!DOCTYPE html> déclare un fichier HTML5 <html lang="fr">balise initiale du HTML <head>...</head>contient le contenu invisible <body>...</body>contient le contenu visible </html> et on n'oublie pas de fermer la balise

HTML - Contenu - head (1/2)

  • <head> contient les éléments non-visuels d'une page web :
    • Le chargement des fichiers CSS et JS
    • Des liens vers des ressources externes
    • Des configurations
    • ...
  • <script> permet de charger du JS (ou un autre type supporté en spécifiant son attribut type <head> <script src="cheminVersLeScript"></script> <script>console.log("Hello World");</script> </head> Note : l'attribut async permet de charger le script de manière asynchrone et l'attribut defer indique que le script doit être chargé APRÈS la lecture du HTML.

HTML - Contenu - head (2/2)

  • <link> est utilisé pour récupérer un élément externe (en général un fichier CSS) : <link rel="stylesheet" href="cheminVersLaRessource">
  • <meta> contient une metadonnée de la page (description, encodage, ...). Ses attributs dépendent de la donnée représentée : <meta charset="UTF-8"> indique l'encodage <meta name="description" content="Lorem Ipsum">
  • <title>...</title> est le texte contenu dans l'onglet du navigateur. <title>Introduction</title>
  • <style>...</style> permet d'écrire du CSS directement dans le HTML.

HTML - Contenu - body

  • On peut distinguer 2 catégories de balises à l'intérieur de <body> :
    • Les balises structurantes dont on parlera dans la partie Pages web statiques
    • Les balises de contenu, dont voici une liste non-exhaustive des plus communes : Les titres sont représentés par les balises h1, h2, h3, ... <h1>Titre principal</h1>
      <p>Un paragraphe</p>
      <a href="URL" target="_blank">Un lien vers une autre page</a>
      <button>Un bouton</button>
      <img src="URL" alt="texte alternatif">
      <video controls src="URL">Une vidéo</video>

CSS - Syntaxe

  • Le CSS (Cascading StyleSheet) permet de définir le rendu visuel de la page, en allant de la couleur du texte au positionnement des éléments.
  • Il s'écrit soit dans une balise <style> à l'intérieur de la balise <head>, soit dans un fichier externe qui sera inclus au HTML grâce à la balise <link>
  • La syntaxe de CSS est de la forme : sélecteur { propriété_1: valeur_1; ... propriété_n: valeur_n; } par exemple : p { color: blue; text-decoration: underline; }

CSS - Sélecteurs (1/3)

  • Les sélecteurs permettent de définir les éléments HTML à récupérer.
  • Il n'est pas nécessaire de tous les apprendre par coeur ; par contre, il est utile de savoir lesquels existent pour pouvoir rechercher des infos en cas besoin.
  • Sélecteurs de base Pour sélectionner une balise, il suffit de noter son nom : p {...}
    Pour sélectionner une classe, il suffit de noter son nom précédé d'un point: .maClasse {...} Note : toutes les balises HTML présentes dans le body peuvent posséder un attribut class contenant une ou plusieurs classes séparées par des virgules.
    Pour sélectionner un id, il suffit de noter son nom précédé d'un hashtag: #monId {...} Note : toutes les balises HTML présentes dans le body peuvent posséder un attribut id contenant un seul id. De plus, l'id doit être unique dans toute la page

CSS - Sélecteurs (2/3)

  • Sélecteur d'hérédité : Pour sélectionner un descendant d'un élément, il suffit d'ajouter un espace : a p {...}
    Pour sélectionner un enfant direct d'un élément, on utilise > a>p {...}
    Pour sélectionner un élément précédé d'un autre au même niveau, il faut utiliser ~ : a~p {...}
    Pour sélectionner un élément directement précédé d'un autre au même niveau, il faut utiliser + : a+p {...}

CSS - Sélecteurs (3/3)

  • Autres concepts de sélecteurs : Il existe des fonctions plus complexes pour récupérer un élément, appelées pseudo-classes p:nth-child(3) {...} p:hover {...} Vous pouvez retrouver la liste complète des pseudo-classes ici.
    Pour sélectionner un élément devant respecter plusieurs critères, il suffit de coller les conditions : p.hello {...}
    Les sélecteurs peuvent être combinés : #abc p:nth-child(3) a.selected {...} Que va sélectionner le sélecteur ci-dessus ?

CSS - Sélecteurs - Priorité

  • Que se passe-t-il si plusieurs sélecteurs ciblent le même élément ? p { color: red; } body p { font-size: 12px; } Eh bien ils s'appliquent tous les 2.
  • Que se passe-t-il si plusieurs sélecteurs ciblent le même élément et changent la même propriété ? p { color: red; font-size: 16px; } body p { color: blue; } 2 choses : 1) les propriétés différentes s'appliquent toutes ; 2) Pour les propriétés communes, seules celles appartenant au sélecteur le plus prioritaire seront conservées.
  • Les sélecteurs sont triés par précision, dont l'ordre est : id >> classe >> balise >> attribut
  • Si un sélecteur est composé de multiples éléments, leur précision sera sommée.
  • Il est possible de forcer l'application d'une valeur lui en ajoutant !important

CSS - Propriétés - Textes

  • Il existe de nombreuses propriétés CSS pour modifier un texte, citons-en quelques-unes : selector { color: blue; background-color: #123456; font-size: 16px; font-family: "Roboto", "sans-serif"; font-weight: bold; font-style: italic; }

CSS - Propriétés - Couleurs

  • Les couleurs peuvent être définies de plusieurs façons :
    • Les navigateurs contiennent des couleurs prédéfinies que vous pouvez réutiliser : background-color: red;
    • On peut utiliser la décomposition RGB : background-color: rgb(255,0,0); Note: Il existe également la fonction rgba qui prend un 4ème paramètre, un réel entre 0 et 1 représentant la transparence.
    • On peut utiliser la décomposition RGB en hexadécimal : background-color: #FF0000; Note 1 : On peut rajouter 2 caractères pour représenter la transparence sur 256 niveaux, mais ce n'est pas reconnu par tous les navigateurs et donc peu recommandé. Note 2 : Il est possible de n'écrire que 3 chiffres, auquel cas ils seront dupliqués : #123 sera transformé en #112233.

CSS - Propriétés - Unités

  • Il existe de nombreuses unités utilisables en CSS : font-size: 12px; Pixels. Ça ne représente pas exactement les pixels de l'écran, mais l'idée est que c'est une valeur fixe. font-size: 89%; Pourcentage du même attribut du parent. Ne fonctionne que si le parent a défini une valeur. Utilisation déconseillée. font-size: 2vh; (ou 2vw) Viewport height (et viewport width). 1vh représente 1% de la hauteur du navigateur ; 1vw représente 1% de sa hauteur. font-size: 1.2em; (ou 1.2rem) 1em représente la valeur calculée de l'attribut ; 1rem est la valeur calculée de l'attribut de l'élément racine.
  • Il en existe quelques autres, mais beaucoup moins utilisées
  • Il existe également des fonctions permettant de manipuler plus précisément les unités : font-size: max(2vw, 12px); font-size: min(2vw, 12px); font-size: 12vmin; vw si vw<vh, sinon vh. font-size: 12vmax; vw si vw>vh, sinon vh. font-size: calc(2vw + 12px);

CSS - Propriétés - Dimensions (1/2)

Considérons le code HTML suivant :

<div> <p>Lorem Ipsum</p> </div>

Et le code CSS suivant :

div {border-color: red;} p {border-color: black;}

Voilà une représentation visuelle du résultat :
Image d'un p dans un div

CSS - Propriétés - Dimensions (2/2)

On va s'intéresser au paragraphe uniquement.

Que représente chacune des flèches pour le rectangle noir ?
Image d'un p dans un div

  • La flèche verte représente la marge extérieure p { margin: 20px; }
  • La flèche bleue représente la marge intérieure p { padding: 20px; }
  • La flèche rouge représente la largeur du paragraphe p { width: 300px; }
  • La flèche noire représente la hauteur du paragraphe p { height: 100px; }
  • Une valeur n'est pas fléchée, il s'agit de l'épaisseur de la bordure p { border: 5px black solid; }

CSS - Propriétés - Position

  • Vous avez appris dans la partie précédente à styliser un élément individuel ; il est maintenant temps d'apprendre à le positionner où l'on veut sur la page.
  • Positionner un élément revient à choisir des points d'ancrage définis (c'est-à-dire des endroits correspondant à gauche, droite, haut et bas) puis à déplacer l'élément de ces points d'ancrage.
  • Pour sélectionner les points d'ancrage d'un élément, il faut lui appliquer la propriété position, qui peut prendre 3 (+1) valeurs :
    • relative : les points d'ancrage correspondent à ceux de l'élément lui-même
    • absolute : les points d'ancrage correspondent à ceux du premier ascendant positionné
    • fixed : les points d'ancrage correspondent à ceux de la fenêtre du navigateur
  • Pour déplacer un élément par rapport à un point d'ancrage, il suffit de lui appliquer les propriétés top, right, left ou bottom : p { position: relative; top: 10px; left: 7px; }

Conclusion

  • Vous avez désormais les connaissances suffisantes pour styliser un élément individuel
  • Cependant, vous ne savez pas encore placer les éléments où vous le souhaitez sur votre page
  • C'est justement le sujet de la prochaine section : Pages web statiques

Exercice 0: Mise en place

  • Installez Visual Studio Code, Webstorm ou n'importe quel IDE vous permettant d'écrire du HTML/CSS/JS
  • Sur votre PC (où vous voulez) créez un dossier, et ouvrez-le dans votre IDE
  • Créez 2 fichiers à l'intérieur du dossier : index.html et style.css
  • Dans le fichier CSS, ajoutez ce code : * { background-color: red; }
  • Dans le fichier HTML, créez une structure HTML5 valide et chargez-y votre CSS
  • Ouvrez votre fichier index.html dans un navigateur (il suffit en général de double-cliquer dessus depuis l'explorateur)
  • Si la page ouverte est rouge, vous pouvez supprimer le contenu du fichier CSS et passer à la suite. Sinon, vous avez fait une erreur quelque part !

Exercice 1 : Reset

  • Créez un fichier reset.css et chargez-le dans votre page html.
  • Ajoutez un bouton à l'intérieur de votre body et rafraichissez l'onglet de votre navigateur contenant le fichier index.html
    • Vous devriez constater que le bouton a déjà un style qui lui est appliqué, pour qu'il ressemble... à un bouton. Pourquoi ?
    • À l'aide des DevTools de votre navigateur (clic-droit --> inspecter n'importe où sur la page), déterminez quelles sont les propriétés appliquées par défaut et ajoutez-les au fichier reset.css avec des valeurs permettant d'annuler ces styles par défaut. Vous avez réussi cette partie lorsqu'en rechargeant votre page, il n'y a plus aucun style par défaut appliqué au bouton.
    • Maintenant, dans votre fichier style.css, ajoutez de nouvelles propriétés ou modifiez les propriétés actuelles de votre bouton pour qu'il ait un design plus sympa (le résultat final n'est pas important, l'objectif est que vous vous habituiez à manipuler les propriétés CSS).
  • Répétez la même opération pour les balises a, p, h1, h2, (h3, h4,) ol et ul.
  • Le fichier reset.css est à garder sous la main et à enrichir à chaque occasion : il est en général bien plus simple de faire du CSS à partir d'un élément n'ayant aucun style appliqué plutôt que de jongler avec les valeurs par défaut aléatoires des navigateurs.