Développement web

Cours 04

Intégration

Une seule page HTML / CSS

Pas de JS ni de développement back

Maquettes

En situation réelle, le format des maquette dépend du logiciel utilisé (Sketch, Photoshop, Figma)

Dans le cadre de l'exercice et dans un souci de compatibilité, vous allez travailler avec une image et un psd

4 images vous sont aussi fournies dans le dossier images/

Télécharger les maquettes

Organisation

Il est important d'organiser les fichiers dès le début

Créez un dossier et appelez le du nom du projet integration-1

Créez les dossiers et fichiers comme tel


├── index.html
└── sources
    └── images
        └── ...
    └── css
        └── style.css

Nous avons nommé la page d'accueil index.html pas seulement par convention

Lorsqu'on accède à un site, si aucun fichier n'est spécifié, le serveur va automatiquement tenter de charger le fichier index.html

https://monsite.com => https://monsite.com/index.html

Ouvrez les fichiers index.html et style.css dans votre éditeur

Ajoutez ce code de base dans index.html


<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Intégration 1</title>
    </head>
    <body>
        
    </body>
</html>

Il existe deux façons d'intégrer une page HTML/CSS

  • Écrire tout le HTML en une fois puis s'occuper du CSS
    (plus efficace, nécessite de savoir à quoi va ressembler le CSS)
  • Écrire le HTML en parallèle du CSS
    (moins efficace, plus pratique quand on débute)

HTML

Pour garder un HTML propre

  • Bien indenter
  • Commenter les grandes parties
  • Bien nommer les classes
  • Aérer
  • Pensez au référencement

CSS

Pour garder un CSS propre

  • Bien séparer les différentes parties de la page
  • Commenter
  • Identifier des propriétés CSS qui s'appliquent sur toute la page
  • Ne pas laisser trainer de code dont on ne connait pas l'utilité
  • Choisir entre du CSS inline et block

Exemple de CSS inline


/* Global */
body { font-family: Helvetica,Arial; color: #cccccc; font-size: 14px; }
a { text-decoration: underline; color: #ff7800; }

/* Header */
header { height: 100px; padding-top:40px; text-align:center; background: #e7e8ed; }
header h1 { font-size: 22px; font-weight: bold; }

/* Description */
.description { padding: 100px; text-align: justify; }
.description p { font-style: italic; }
.description p.intro { font-weight: bold; color: #000000; }

Les sélecteurs sont faciles à comparer et le code est déjà compressé, mais il faut scroller horizontalement et il est difficile de s'y retrouver dans les propriétés

Exemple de CSS block


/* Global */
body
{
    font-family: Helvetica,Arial;
    color: #cccccc;
    font-size: 14px;
}
a
{
    text-decoration: underline;
    color: #ff7800;
}

/* Header */
header
{
    height: 100px;
    padding-top: 40px;
    text-align: center;
    background: #e7e8ed;
}
header h1
{
    font-size: 22px;
    font-weight: bold;
}

/* Description */
.description
{
    padding: 100px;
    text-align: justify;
}
.description p
{
    font-style: italic;
}
.description p.intro
{
    font-weight: bold;
    color: #000000;
}

Beaucoup plus lisible, mais il faut beaucoup scroller et on peut difficilement comparer les sélecteurs

ASTUCES

Pour qu'une image de fond prenne toute la largeur et la hauteur sans perdre son homothétie


.element
{
    background: url(../img/image.jpg);
    background-size: cover;
}

ASTUCES

Pour centrer un élément de type block horizontalement


.element
{
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

Pareil que


.element
{
    margin: 0 auto 0 auto;
}

ASTUCES

Pour centrer un élément au milieu d'un container


.container
{
    position: relative;
    width: 100%;
    height: 500px;
}

.container .element
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
}

ASTUCES

Pour qu'un élément prennent 1/3 à gauche et un autre élément prenne 2/3 à droite


.container
{
    width: 100%;
    height: 500px;
}

.container .left
{
    width: 33%;
    height: 100%;
    float: left;
}

.container .right
{
    width: 67%;
    height: 100%;
    float: right;
}

ASTUCES

N'oubliez pas de tester votre site régulièrement sur les différents navigateurs

Afin de savoir quels navigateurs tester, basez-vous sur les statistiques de visites de votre site (si déjà existant) ou sur des statistiques générales