JDM

HTML_CSS

Liens_Web:

HTML

Rappel des balises courantes en HTML

  • <h1>Titre 1</h1> - pour vos titres les plus importants

  • <h2>Titre 2</h2> - pour les sous-titres

  • <h3>Titre 3</h3> … et ainsi de suite jusqu’à <h6>

  • <em>texte</em> permet de mettre l’accent sur une partie du texte

  • <strong>texte</strong> permet de mettre encore plus l’accent sur une partie de texte

  • <br /> permet d’insérer un saut de ligne (vous ne pouvez rien mettre à l’intérieur d’un élément br)

  • <a href= »https://djangogirls.org »>link</a> permet de créer un lien

  • <ul><li>premier item</li><li>second item</li></ul> permet de créer des listes, comme celle que nous sommes en train de faire !

  • <div></div> permet de créer une section au sein de la page


CSS

Liens_Web:

Sélecteur, pseudo-class et pseudo-elements

Liens_Web:

Positionnement et dimensionnement dans la fenêtre (ou dans la boite)

_images/dimensionnement.png
  • margin : Marge extérieur

  • padding : Marge intérieur

  • height : Hauteur

  • width : Largeur

Chaque dimensions peut être utilisée dans sa forme courte (dans le sens horaire) :

_images/rotation_propriete.PNG
p {
    margin:[top] [right] [bottom] [left]
    }

ex :
p {
    margin:3px 2px 3px 2px
    }

Chaque dimensions peut aussi être utilisée dans sa forme longue avec les mot clef top, right, bottom, left :

ex :
p {
    margin-top:3px;
    margin-right:2px;
    margin-bottom:3px;
    margin-left:2px;
    }

Couleurs

Liens_Web:

Le terme à recherche pour trouver les codes hexa des couleurs est :

flat color

Bootstrap

Liens_Web:

Utiliser Bootstrap Offline

Liens_Web:
  1. Télécharger le paquet Bootstrap puis copier les dossiers « JS » et « CSS » dans le dossier du projet.

  2. Ajouter les lignes suivantes dans le « HEAD » du html (en fonction des CSS désirés) :

    # CSS
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-grid.css" rel="stylesheet" />
    <link href="css/bootstrap-grid.min.css" rel="stylesheet" />
    <link href="css/bootstrap-reboot.css" rel="stylesheet" />
    <link href="css/bootstrap-reboot.min.css" rel="stylesheet" />
    
    # Javascript
    <script src="js/bootstrap.min.js"></script>