Cours JS/HTML/CSS

ESCEN 2018-11

Outils

  • Visual Studio code (éditeur de texte)
  • Hyperjs (terminal)
  • Node.js (Environnement d'exécution de JS)
  • Npm (gestionnaire de dépendances)
  • serve (package npm : serveur web statique)

Révisions HTML

Squelette d'un fichier HTML

<!DOCTYPE html>

<html lang="fr">




  <head>


    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Titre apparaissant dans l'onglet</title> 

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

    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />


    <script src="main.js"></script>
  </head>
  <body>


    <script src="main.js"></script>
  </body>
</html>

<!DOCTYPE html>
 <!-- Balise html : Noeud racine du document HTML -->
<html lang="fr">
  <!-- Balise head :
       pour le titre du document,
       les meta-données,
       et les fichiers annexes (surtout CSS) -->
  <head>
    <!-- Jeu de caractère utilisé dans
         l'éditeur de texte ayant édité ce fichier -->
    <meta charset="utf-8" />
    <!-- Compatibilité pour les navigateur IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Titre du document -->
    <title>Titre apparaissant dans l'onglet</title> 
    <!-- Gestion du zoom du document -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Association d'une feuille de style -->
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <!-- Association d'un fichier JavaScript
         /!\ selon la spec HTML il doit être ici... -->
    <script src="main.js"></script>
  </head>
  <body>
    <!-- Association d'un fichier JavaScript
         /!\ selon la spec HTML il doit être ici... -->
    <script src="main.js"></script>
  </body>
</html>

Révisions CSS

  • Standard ouvert
  • Séparer contenu et forme
  • W3C
  • CSS 1 : 12/1996
  • CSS 2.0 : 05/1998
  • CSS 2.1 : 06/2011
  • CSS 2.2 : 2016
  • CSS 3 : modules
  • CSS 4 n'existe pas

Révisions CSS

  • Règle
    • Sélecteur(s)
    • Déclarations(s)
  • Déclaration
    • Propriété
    • Valeur(s)

/* Règle */

.classe { /* Sélecteur */

  background-color: #555; /* Déclaration */

  /* propriété: valeur(s); */

  background: #555 url(/chemin/de/croix.png) no-repeat center center;
}

Révisions CSS

/* Sélecteur universel */
*

/* Sélecteurs de type */
div

/* Sélecteurs descendants */
div span

/* Sélecteurs d'enfant */
ul > li

/* Les sélecteurs adjacents */
h2 + p

/* La pseudo-classe */ 
li:first-child

/* Les pseudo-classes de lien */
a:link
a:visited

/* Les pseudo-classes dynamiques */
a:active
a:hover
a:focus

/* La pseudo-classe :lang() */
h1:lang(fr)
/* Sélecteurs d'attribut */
abbr[title]

/* Sélecteurs d'attribut */
fieldset[foo="warning"]
label[foo~="warning"]
aside[lang|="en"]

/*************************
 *   Seulement en HTML   *
 *************************/

/* Sélecteurs de classe */
/* Identique à DIV[class~="warning"] */
.warning

/* Sélecteurs d'ID */
#myid

/* Les pseudo-éléments */
:first-line
:first-letter
:before
:after

Box model

Contenu

Padding

Border

Margin

Client - Serveur

Requête (Request)

Réponse (Response)

Client

Serveur

JavaScript

  • JavaScript est partout

Ressources

  • MDN Mozilla Developer Network https://developer.mozilla.org/fr/docs/Web

  • https://movethewebforward.org/

  • http://html5doctor.com/

  • https://scotch.io/

  • https://css-tricks.com/

  • https://www.alsacreations.com/

Ressources

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

cours-escen

By Stanislas Ormières

cours-escen

  • 515

More from Stanislas Ormières