Web B2

Appearance

Templates HTML

Ce que nous avons vu ​

  • Structure d'un document HTML
  • Balises courantes
  • Mise en ligne sur Netlify
  • Architecture d'un projet web ou d'un site
  • Chemins relatifs et absolus
  • Création de plusieurs pages connectées entre elles
  • Feuilles de styles, règles CSS de base
  • Les classes (attribut HTML)
  • Comment cibler tel ou tel élément avec CSS

Aujourd'hui ​

Template HTML-CSS (aussi pour la semaine prochaine) ​

Sur base de ce qui a été vu au cours, téléchargez, modifiez et mettez en ligne sur Netlify le template HTML suivant : https://html5up.net/lens (téléchargez en haut à droite).

Vous pouvez en choisir un autre si vous le désirez mais celui proposé est relativement simple à prendre en main.

  • Remplacez les images par les vôtres (petits formats et grands formats) et modifiez leurs légendes et descriptions.
  • Modifiez les liens des réseaux sociaux.
  • Modifiez le titre et la description de la page et tout autre élément HTML que vous jugeriez nécessaire.
  • Ajoutez au moins une police de caractère supplémentaire.
  • Insérez un lien vers un PDF (téléchargement)
  • Testez.
  • Mettez le tout en ligne sur Netlify. Les précédents doivent rester accessibles. Pour rappel, ce que vous glissez dans la fenêtre de Netlify doit toujours être un dossier et un fichier nommé index.html doit toujours être présent à la racine de ce dossier.
  • Testez sur un téléphone ou une tablette.
  • Et enfin, copiez l'adresse de votre page dans ce fichier, à hauteur de votre nom (que vous prendrez soin de noter), et dans la colonne adéquate, correspondant à l'exercice.

Plusieurs classes ​

Si besoin, sachez qu'un élément html peut avoir plusieurs classes. Elles sont alors séparées par un espace dans l'attribut. Comme ceci:

WARNING

Une boîte qui possède deux classes. Une qui définit les paramètres généraux de la boîte (coins arrondis, bordure à gauche...), une autre pour la couleur (color, border-color, background...).

html
    <div class="custom-block warning">
        Une boîte qui possède deux classes. Une qui définit les paramètres généraux de la boîte, une autre pour la couleur (rouge, jaune ou vert)
    </div>

TIP

Classes: custom-block + tip

WARNING

Classes: custom-block + warning

DANGER

Classes: custom-block + danger

Essayez de noter sur une feuille de papier (ou dans un fichier) les différentes choses que vous aimeriez faire dans une page web ou les choses que vous voudriez que l'on voit. Vous pouvez pour cela utiliser le pad suivant : https://pads.domainepublic.net/p/css. C'est un document partagé entre nous.

On essaiera de partir de ce que vous aurez noté pour construire les cours suivants.