Le HTML et le CSS

Pour commencer à concevoir un document imprimé avec les langages du web, revenons aux bases du HTML et du CSS. Ces notions sont indispensables pour comprendre comment structurer le contenu et le mettre en forme avant de l’exporter en PDF.

Outils nécessaires

Ces outils suffisent pour écrire le code, le tester et l’exporter plus tard en PDF.

Le HTML

Le HTML (HyperText Markup Language) sert à structurer le contenu : titres, paragraphes, images, liens, listes…

Un fichier HTML se crée simplement : 1. Ouvrez votre éditeur de code. 2. Créez un nouveau fichier et nommez-le index.html
ce nom est la convention pour la page d’accueil d’un site.

Syntaxe de base

Une balise HTML entoure un contenu :

<balise>contenu</balise>

Les balises peuvent contenir des attributs, sorte de paramètres de celles-ci, certains attributs sont spécifiques à la balise d'autres sont génériques.

<balise attribut="valeur">contenu</balise>

Structure minimale d’un document HTML5

<!DOCTYPE html>
    <html lang="fr"> 
    <head>   
        <meta charset="UTF-8">
        <title>Le titre de la page</title>
    </head> 
    <body>
        <!-- Ici ira le contenu visible -->
    </body>
</html>

<head> contient les métadonnées et les liens vers les feuilles de style (CSS). <body> contient tout ce qui s’affiche dans la page.

Insérer un texte

Pour insérer du texte, il faudra formatter votre texte en utilisant par exemple les balises <p></p> pour créer des paragraphes et les balises <h1></h1>, <h2></h2>… pour les titres

<h1>Titre principal</h1>
<p>Voici un paragraphe.</p>

Les balises de bases

Balise Rôle
<h1>…<h6> Titres de différents niveaux
<p> Paragraphe
<ul> Liste non ordonnée (à puces)
<li> Élément d’une liste
<a> Lien hypertexte
<img> Image
<figure> Encadrer une image et sa légende
<strong> Mettre en valeur du texte (gras)
<em> Mettre en valeur (italique)

Créer une liste

<ul>
    <li>un élément de la liste</li>
    <li>un autre élément</li>
</ul>

Insérer un lien

<a href="http://coucou.fr">texte du lien</a>

Insérer une image

<figure>
    <img src="images/monimage.jpg" alt="texte descriptif de l'image">
</figure>

Créer un menu

<nav>
    <ul>
        <li>À propos</li>
        <li>Projets</li>
        <li>Contact</li>
    </ul>
</nav>

Quelques ressources sur le HTML

Le CSS

Le CSS (Cascading Style Sheets) est le langage qui va permettre de designer une page web: choix des typographies, positionnement, couleurs, marges etc.

Ajouter une feuille de style

Créez un fichier appelé style.css et reliez-le à votre HTML en ajoutant dans la section <head> :

<link rel="stylesheet" href="style.css">

Modifier l’apparence d’un élément

En CSS, on cible un élément puis on lui attribue des propriétés

p{
    color: red;      /* Texte rouge */
    font-size: 18px; /* Taille du texte 
}

Quelques propriétés CSS de base

Propriété Fonction Exemple
color Couleur du texte color: blue;
background Couleur de fond background: #f0f0f0;
font-family Typographie font-family: Arial, sans-serif;
font-size Taille du texte font-size: 16px;
font-weight Graisse (épaisseur) du texte font-weight: bold;
margin Marges extérieures d’un bloc margin: 20px;
padding Marges intérieures d’un bloc padding: 10px;
width / height Largeur et hauteur d’un bloc width: 200px;

Classes et ID

Pour cibler des éléménts précis on peut utiliser soit l'attribut class soit l'attribut id.

L'ID est unique, la classe est réutilisable. Un seul ID par élément, une ou plusieurs class par élément.

<p id="paragraphe-unique">du texte</p>
<p class="paragraphe-rouge">encore du texte</p>

Il y a plusieurs manière de cibler un élément en css:

.cibler-une-classe{ propriété: valeur; }
 #cibler-une-id{ propriété: valeur; }
.parent .enfant{ propriété: valeur; }

Intégrer des typographies

Il existe plusieurs méthodes pour intégrer une typographie dans un site web

Utiliser des polices standards (Web Safe Fonts)

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)
    body { font-family: Georgia, serif; }

Utiliser Google Fonts

(tout en sachant que Google c’est le mal)
1) Aller sur https://fonts.google.com/, choisir la ou les typographies désirées.
2) Cliquer sur Get font en haut à droite, puis sur Get embed code. Choisir l'option @import.
3) Copier le code tout en haut de votre css. Exemple: @import url('https://fonts.googleapis.com/css2?family=Syne+Tactile&family=Syne:wght@400..800&display=swap');.
4) Appelez votre typographie dans votre css à l’endroit souhaité. Exemple: h1{ font-family: "Syne Tactile", sans-serif;}

Utiliser @font-face

Pour intégrer n’importe quelle typographie.
Pour cela, vous aurez besoin d’avoir la typographie souhaitée en format .woff et .woff2 Si vous n’avez que des fichiers .otf ou .ttf, vous pouvez convertir la typographie en format web sur https://transfonter.org/ par exemple (à condition que vous ayez bien les droits sur la typo).
Placez vos fichiers dans un dossier fonts au même endroit que votre fichier style.css. Tout en haut de votre fichier style.css, appelez votre typographie. 

@font-face {
    font-family: "Trickster";
    src: url("fonts/trickster.woff") format("woff"),
         url("fonts/trickster.woff2") format("woff2");
    font-weight: normal;
}

CSS tricks & tips

Quand un élément a une taille définie (width), margin : auto permet de centrer celui-ci horizontalement.

.element{   
  width: 50%;   
  margin: auto;
}

Pour positionner les éléments côte à côte, on peut utiliser les flexbox.

.parent{  
  display:flex; 
  justify-content:space-between; 
}

Plus d'infos sur les flexbox ici

On peut également utiliser les grilles css 

.container {
 display: grid;
 column-gap: 50px;
}

Plus d'infos sur les grille css ici

Quelques ressources sur le CSS

Exercice

En une seule page, designer et développer la page web d‘annonce et de présentation d’un colloque.
Télécharger le contenu pour l'exercice