Création de sites web - M2 Patrimoine, Musées et Multimédia - Université de Poitiers - Licence Creative Commons BY-NC-SA

Création de sites web

Deux semestres :

Premier semestre (15h)

  • Création de sites web statiques avec HTML et CSS
  • Évaluation : créez de votre propre CV en ligne
  • Date de rendu : vers la mi-janvier

Deuxième semestre (15h)

  • Création de sites web dynamiques avec Wordpress
  • Évaluation : créez un site sous Wordpress, en rapport avec le patrimoine, votre objet d'étude...
  • Date de rendu : vers la fin août

Un site web ?

Internet ≠ Web

Internet, c'est le réseau (ou plutôt des milliers de réseaux), l'infrastructure.

Conçu à la fin des années 60 sous le nom d'Arpanet.

Il renferme plusieurs services :

  • Le mail (inventé en 1971),
  • Le FTP (inventé en 1980),
  • Le web (inventé en 1989 par Tim Berners-Lee),
  • Et d'autres...

Le web est un service d'Internet, on parle donc de sites web.

Définition

Un ensemble de pages web liées entre elles sous le même nom de domaine par des liens hypertextes, stockées sur un serveur web connecté au réseau Internet (ou un réseau local), accessibles via un navigateur web.

Le nom de domaine est l'adresse de votre site et son domaine (fr, com, net, etc.).

  • Exemple de nom de domaine : univ-poitiers.fr

"Nom de domaine" ne doit pas être confondu avec "URL" :

Une page web peut contenir :

  • Du texte
  • Des images, des vidéos et autres enrichissements de contenus
  • Des fonctionnalités (formulaires de contact, de réservation, etc.)
  • Des liens hypertextes
  • ...

Il existe plusieurs types de sites web

Site vitrine (ou site de marque) :

Site catalogue :

  • Présenter ses gammes de produits et de services
  • LG

Site marchand (ou e-commerce) :

Site institutionnel :

  • Améliorer son image (grand public, presse, investisseurs)
  • Total

Site communautaire :

  • Donner accès à des ressources à un public ciblé
  • Alsacreations

Site intranet / extranet :

Structure d'un site web (statique)

Un site web est un ensemble de pages liées entre elles :

  • Organisées selon une arborescence logique
  • Exemple d'arborescence :

Chaque page est un fichier différent

  • Ce sont des fichiers HTML (par exemple : monfichier.html)
  • HTML signifie : HyperText Markup Language
  • On accède aux pages en indiquant leur nom dans la barre d'adresse du navigateur :
  • Exemple

Ces fichiers sont rangés dans des répertoires

  • Il y a toujours un répertoire principal, appelé "racine" du site
  • Et il peut y avoir des sous-répertoires
    • Il suffit de renseigner le nom du répertoire dans la barre d'adresse du navigateur, puis le nom du fichier HTML :
    • Exemple

Un site web a toujours une page d'accueil

  • C'est la porte d'entrée du site
  • Le fichier correspondant à la page d'accueil est toujours nommé "index.html"
  • Il est toujours situé dans le répertoire racine du site
  • Ce n'est vrai que pour un site statique

 

On peut aussi créer des fichiers "index.html" dans les sous-répertoires

Récap :

  • Une page web = Un fichier HTML
  • Les fichiers du site web sont dans un répertoire principal, dit "racine"
  • Les fichiers peuvent être rangés dans des sous-répertoires
  • Le fichier de page d'accueil du site est toujours nommé "index.html"
  • Le fichier de page d'accueil est placé à la racine du site

Structure d'une page web

On retrouve souvent les mêmes éléments de base :

Le haut de page (header)

  • Titre du site, le logo, infos pratiques...

Le menu principal

  • Pour naviguer entre les différentes pages du site

La zone de contenus

  • Textes, éléments graphiques et/ou interactifs, fonctionnalités

Le pied de page (footer)

  • Plan du site, infos de contact, mentions légales, etc.

Structure basique d'une page web :

Les pages d'un même site web gardent généralement une structure identique

Il faut garder une homogénité visuelle pour ne pas gêner l'internaute

Exemple d'un site avec une structure simple et homogène

Exemple d'un site "bord***que"

Les étapes de la création

1. Conception

  • L'analyse du besoin
  • La formalisation
  • Définition de l'arborescence
  • Rédaction des contenus
  • Conception des pages

L'étape de conception est primordiale !

2. Réalisation

  • Création graphique
  • Intégration HTML / CSS et du contenu
  • Développement des fonctionnalités
  • Optimisations (référencement naturel, accessibilité, performances)

3. Mise en production

  • Phase de tests (recettage)
  • Mise en ligne

Bases de HTML

"HTML" signifie "HyperText Markup Language".

Ce langage communique avec le navigateur web grâce à des balises.

Il permet d'indiquer au navigateur le type de contenu à afficher :

  • un paragraphe,
  • une liste à puces,
  • une image,
  • un lien hypertexte,
  • etc.

Il permet de structurer la page et lui donner un sens.

HTML, pas HTLM !

Acteurs du HTML

Le World Wide Web Consortium (W3C)

  • Organisme de standardisation fondé en 1994 par Tim Berners-Lee
  • Il valide la standardisation des différentes versions de HTML.
  • Devise : "Un seul web, partout et pour tous"
  • Site web du W3C

Le Web Hypertext Application Technology Working Group (WHAT Working Group)

  • Collaboration non-officielle des différents développeurs de navigateurs web
  • Développe de nouvelles fonctionnalités qu'il implémente dans les navigateurs avant même la validation par le W3C
  • A l'origine de la dernière version de HTML : HTML5
  • Site web du WHAT Working Group

Avec quoi écrire du HTML ?

En tout cas, pas avec Word !

  • Il existe des logiciels spécialisés (quasiment plus utilisés) (Dreamweaver...)
  • Un simple bloc notes suffit
  • Il existe des blocs notes avec des fonctionnalités avancées pour l'édition du HTML :
  • Notepad++, Brackets, Sublime Text

A quoi ça ressemble du HTML ?

HTML est un langage de balisage

Les balises servent à indiquer des informations au navigateur web :

  • Des métadonnées
  • Des données à afficher, et comment les afficher
  • Des informations sur la structure de la page
  • Des informations sémantiques sur la page

Une balise, ça ressemble à ça :

<p>Un paragraphe</p>

Et une page entière, ça ressemble à ça :

Pour ce résultat :

Inspecter le code d'une page web

On peut voir le code HTML de toute page web

Ces navigateurs disposent aussi d'un inspecteur d'éléments

  • Depuis Chrome et Firefox, activez le avec la touche F12

Fonctionnement des balises

Les balises ouvrantes/fermantes

Elles entourent le contenu visé :

<h1>Un titre</h1>
<p>Un paragraphe</p>

Les balises auto-fermantes

Elles n'entourent rien (pas besoin)

Un saut de ligne<br/>
<img src="monimage.jpg"/>
  • Notez que le slash se situe après l'instruction

Les attributs de balise

L'attribut donne des indications supplémentaires au navigateur.

On trouve plusieurs types d'attributs :

  • id
  • class
  • title
  • src
  • href
  • ...

Par exemple, pour une image :

<img src="monimage.jpg"/>
  • "src" est un attribut qui permet de cibler l'image désirée

Anatomie d'une page web

Une page web est toujours composée :

  • D'un doctype (balise <!doctype html>)
  • De la déclaration du début du document (balise <html></html>)
  • D'une en-tête (balise <head></head>)
  • D'une zone de contenus (balise <body></body>)

La balise <!doctype html>

Elle indique la version de HTML utilisée

  • C'est la première ligne de toute page web !
  • Avant HTML5, elle était très indigeste
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Maintenant elle est beaucoup plus simple.
<!doctype html>

La balise <html></html>

Elle marque le début du document HTML

  • Elle s'ouvre sous la balise <!doctype>
  • Elle se ferme à la toute fin du document HTML
<!doctype html>
<html>
</html>

La balise <head></head>

C'est l'entête de la page

On met cette balise entre la balise ouvrante et fermante <html>

  • Elle contient notamment les métadonnées (titre, mots-clés)
<!doctype html>
<html>
	<head>
		<!-- Métadonnées -->
	</head>
</html>

La balise <body></body>

C'est le contenu de la page

<!doctype html>
<html>
	<head>
		<!-- Métadonnées -->
	</head>
	<body>
		<!-- Contenu -->
	</body>
</html>

Astuces

Les commentaires

Pour commenter un document, utilisez la balise suivante :

<!-- Mon commentaire -->
  • Le contenu de la balise ne s'affichera pas sur la page web.
  • Idéal pour s'y retrouver, surtout quand on travaille à plusieurs.

L'indentation

Permet une meilleure lisibilité du code :

Code non-indenté Code indenté
  • Utilisez la touche tabulation !

La coloration syntaxique

Elle colore les balises du fichier HTML pour une meilleure lisibilité

C'est l'un des principaux intérêts de l'utilisation d'un éditeur de code

Votre première page web

Avant d'aller plus loin

Par défaut, Windows masque les extensions de fichiers

Il faut les afficher pour éviter des erreurs :

  • Allez dans Démarrer -> Ordinateur -> Organiser -> Options des dossiers et de recherche
  • Cliquez sur l’onglet « Affichage »
  • Cherchez la case « Masquer les extensions des fichiers dont le type est connu »
  • Décochez-la, et validez en cliquant sur OK.

Création du fichier HTML

  1. Créez un répertoire (sur votre bureau, ou une clé USB) que vous nommerez « site ».
  2. Entrez dans le répertoire, faites un clic droit, puis sélectionnez « Nouveau » -> « Document texte »
  3. Nommez-le « index.html » (sans les guillemets bien-sûr !)
  4. Votre fichier est prêt à être édité !

Edition du fichier HTML

  • Ouvrez votre fichier HTML avec Notepad++ et copiez y le code ci-dessous : 
<!doctype html>
<html>
	<head>
		<!-- Métadonnées -->
	</head>
	<body>
		<!-- Contenu -->
	</body>
</html>
  • Saisissez n'importe quoi entre les balises <body> et </body>
  • Enregistrez votre fichier.

Vous venez de créer votre première page web !

Ouvrez la dans votre navigateur :

  • Clic droit sur le fichier, puis "Ouvrir avec", et choisissez votre navigateur
  • Elle n'est bien sûr pas en ligne

Renseigner les métadonnées

Il y a plusieurs métadonnées à renseigner

  • Le codage des caractères
  • Le titre de la page
  • La description de la page
  • Les mots-clés de la page
  • Il y en a d'autres...

Le codage des caractères

  • En informatique, il existe plusieurs jeux de caractères (character sets)
  • Ces jeux de caractères ne prennent pas en charge les mêmes caractères
  • Il existe un jeu de caractères universel : UTF-8
  • On le renseigne avec la balise auto-fermante suivante : 
<meta charset="utf-8"/>

Le titre de la page

  • Il s’affiche dans l’onglet du navigateur
  • Il s’affiche aussi dans les résultats Google
  • Il doit être concis, et contenir des mots-clés importants
  • On le renseigne avec la balise ouvrante/fermante suivante : 
<title>Titre de ma page</title>

La description de la page

  • Destinée aux moteurs de recherche
  • Elle s’affiche aussi dans les résultats Google
  • Elle doit être concise, et contenir des mots-clés importants
  • On le renseigne avec la balise auto-fermante suivante : 
<meta name="description" content="Description de ma page"/>

Les mots-clés de la page

  • Destinés aux moteurs de recherche, mais quasiment plus pris en compte
  • On les sépare par une virgule
  • On les renseigne avec la balise auto-fermante suivante : 
<meta name="keywords" content="Un mot clé, un autre mot clé"/>

Récap

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Titre de ma page</title>
		<meta name="description" content="Description de ma page"/>
		<meta name="keywords" content="Un mot clé, un autre mot clé"/>
	</head>
	<body>
		<!-- Contenu -->
	</body>
</html>

Les balises de contenus

Les paragraphes

  • Il ne suffit pas de sauter des lignes pour créer des paragraphes.
  • Chaque paragraphe devra être entouré de la balise suivante : 
<p>Mon premier paragraphe</p>
<p>Mon deuxième paragraphe</p>				
<p>Mon troisième paragraphe</p>

Les sauts de ligne

  • Ils permettent de revenir à la ligne sans créer de nouveau paragraphe.
  • Chaque saut de ligne devra être déclaré avec la balise suivante : 
<br/>
<p>
	Ma première ligne<br/>
	Ma deuxième ligne
</p>

Les titres

  • Permet de hiérarchiser les contenus de la page
  • On hiérarchise avec la balise <h> accompagnée d'un chiffre de 1 à 6 
<h1>Un titre principal</h1>
<h2>Un titre de niveau 2</h2>
<h2>Un titre de niveau 3</h2>
Etc.

La mise en valeur du texte

  • Mettre en exergue avec <strong> 
<strong>Mon texte mis en exergue</strong>
  • Faire une emphase avec <em> 
<em>Une emphase</em>

Valeur sémantique et non visuelle !

Mettre en gras / en italique

  • Mettre en gras avec <b> 
<b>Mon texte mis en gras</b>
  • Mettre en italique avec <i> 
<i>Mon texte mis en italique</i>

HTML n'est pas fait pour du visuel. On fera ça en CSS.

Les listes à puce (non ordonnées)

  • On fait des listes à puces avec la balise <ul></ul>
  • Chaque élément de la liste est entouré de la balise <li></li> 
<ul>
	<li>Premier élément de liste</li>
	<li>Deuxième élément de liste</li>
	<li>Troisième élément de liste</li>
	<li>Quatrième élément de liste</li>
	<li>Cinquième élément de liste</li>
</ul>

Les listes ordonnées

  • Les puces sont remplacées par des numéros
  • On fait des listes ordonnées avec la balise <ol></ol>
  • Chaque élément de la liste est entouré de la balise <li></li> 
<ol>
	<li>Premier élément de liste</li>
	<li>Deuxième élément de liste</li>
	<li>Troisième élément de liste</li>
	<li>Quatrième élément de liste</li>
	<li>Cinquième élément de liste</li>
</ol>

Les listes ordonnées

L'attribut "type" permet de choisir le type de liste ordonnée

  • type="1" pour des nombres (par défaut)
  • type="A" pour des lettres en capitales
  • type="a" pour des lettres en basse casse
  • type="I" pour des chiffres romains 
<ol type="I">
	<li>Premier élément de liste</li>
	<li>Deuxième élément de liste</li>
	<li>Troisième élément de liste</li>
</ol>

Imbriquer des listes dans des listes

  • Regardez bien le code. On crée la "sous liste" à l'intérieur d'un élément de liste
<ul>
	<li>Premier élément de liste
		<ul>
			<li>Premier sous-élément de liste</li>
			<li>Deuxième sous-élément de liste</li>
		</ul>
	</li>
	<li>Deuxième élément de liste</li>
	<li>Troisième élément de liste</li>
</ul>

Les tableaux

Permettent d'organiser des informations en tableaux

Trois balises indispensables :

  • <table> qui va délimiter le tableau
  • <tr> qui désigne une ligne du tableau (table row)
  • <td> qui désigne une cellule d'une ligne (table data-cell)

Des balises sémantiques :

  • <thead> qui indique l'entête du tableau
  • <tbody> qui indique la zone de contenu du tableau

Les tableaux

Exemple de tableau :

<table>
	<thead>
		<tr>
			<td>Prénom</td>
			<td>Nom</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>Parker</td>
		</tr>
		<tr>
			<td>Bruce</td>
			<td>Wayne</td>
		</tr>
	</tbody>
</table>

Les tableaux

Ce qui donne :

Prénom Nom
Peter Parker
Bruce Wayne

Les tableaux

On peut changer la largeur du tableau avec l'attribut "width"

<table width="400">
	<thead>
		<tr>
			<td>Prénom</td>
			<td>Nom</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>Parker</td>
		</tr>
		<tr>
			<td>Bruce</td>
			<td>Wayne</td>
		</tr>
	</tbody>
</table>

Les tableaux

Ce qui donne :

Prénom Nom
Peter Parker
Bruce Wayne

Les liens hypertextes

Le lien hypertexte est un texte cliquable entouré de la balise <a>.

  • On accompagne cette balise de l'attribut "href", qui désigne l'adresse à laquelle on souhaite que le lien mène 
<a href="http://adresse.fr">Mon lien hypertexte</a>
  • On peut ajouter l'attribut "title" 
<a href="http://adresse.fr" title="Description du lien">Mon lien hypertexte</a>

Faire un lien vers un site externe

<a href="http://www.univ-poitiers.fr">Site de l'Université de Poitiers</a>

Faire un lien entre deux pages d'un même site

  • Lier les pages de votre site web entre elles
  • Ces pages peuvent être rangées dans des répertoires différents
  • Il va falloir indiquer le chemin vers le fichier HTML désiré
  • Deux manières : la méthode absolue et la méthode relative

La méthode absolue

  • Vous partez toujours du répertoire racine du site
  • L'adresse absolue commence par le signe "/"
<a href="/sous-repertoire/fichier.html">Lien vers fichier.html dans le répertoire "sous-repertoire"</a>
  • Vous pouvez faire simplement un lien vers la page d'accueil :
<a href="/">Lien vers la page d'accueil (index.html)</a>

La méthode relative

  • On part de l'endroit où on se trouve
  • Si depuis la racine du site, on veut cibler un fichier dans le sous-répertoire :
<a href="sous-repertoire/fichier.html">Lien vers fichier.html dans le répertoire "sous-repertoire"</a>
  • Si depuis un sous-répertoire, on veut cibler un fichier dans le répertoire racine :
<a href="../fichier.html">Lien vers un fichier du répertoire racine</a>

Plus d'explications du la méthode absolue et relative

Cas particulier en développement local

  • La méthode absolue sera compliquée à utiliser car la racine est "C:\"
  • Exemple : pour cibler un fichier dans un répertoire sur votre bureau :
  • C:\Utilisateurs\nomutilisateur\Bureau\monrepertoire\index.html
<a href="C:\Utilisateurs\nomutilisateur\Bureau\monrepertoire\index.html">Lien absolu en développement local</a>

Faire un lien vers un contenu d'une même page

On appelle ça une ancre

  • Il faut d'abord identifier le contenu ciblé, avec un attribut
<p id="cible">Contenu cible</p>
  • Puis on le cible dans le lien grace au signe "#"
<a href="#cible">Lien vers la cible</a>

Attention : un ID ne peut être utilisé qu'une fois dans la page

Les images

Méthode semblable aux liens hypertextes

  • Mais avec une autre balise (<img/>) et d'autres attributs
  • Contrairement aux liens hypertextes, la balise <img/> est auto-fermante
<img src="mon-image.jpg"/>
  • On va chercher le fichier cible de la même manière qu'un fichier HTML dans un lien hypertexte

Attributs supplémentaires

  • "alt" : texte alternatif, courte description, si l'image ne peut pas s'afficher
  • "width" : largeur de l'image en pixels
  • "height" : hauteur de l'image en pixels
<img src="mon-image.jpg" alt="texte alternatif" width="640" height="480"/>

Quel format pour mon image ?

  • On utilise des formats d'images compressés
  • JPEG (.jpg, .jpeg), PNG (.png), GIF (.gif), SVG (.svg)
  • Ces formats permettent d'avoir des images moins lourdes mais de qualité
  • La page pourra donc se charger plus rapidement

Voilà pour la base de HTML

Exercice 1

D'un fichier texte à une page web...

Consignes :

  • Téléchargez l'archive suivante : webetu.net/creaweb/exercices/01.zip
  • Dézippez l'archive
  • Le fichier "texte.txt" contient du texte brut
  • Faites en sorte qu'il ressemble à la capture "page.png" en insérant le code HTML nécessaire
  • N'oubliez pas les métadonnées !

Si besoin, le lien d'où est tiré le texte :

Exercice 2

Comprendre les liens hypertextes

Consignes :

  • Téléchargez l'archive ZIP ici : webetu.net/creaweb/exercices/02.zip
  • Extrayez les fichiers
  • Il y a plusieurs fichiers HTML (à la racine et dans des sous-répertoires)
  • Ouvrez-les dans votre éditeur, et dans le menu principal, faites en sorte que chaque fichier permettre d'accéder aux autres
  • Vous pouvez essayer la méthode absolue, mais je vous conseille la méthode relative ;)

Petite précision sur le nommage de vos fichiers

Les noms de fichiers ne contiennent que les caractères suivants :

  • Des lettres, sans accents, de préférence en majuscule
  • Des chiffres, quand nécessaire
  • Des tirets (tiret du 6) ou underscores (tiret du 8)

Ils ne contiennent PAS :

  • D'espaces
  • D'accents et autres caractères spéciaux ("?",";","$" et autres)
  • Et évitez les majuscules, vraiment.

Bases de CSS

CSS ?

CSS signifie "Cascading StyleSheets"

Ou "feuilles de styles en cascade" (on verra pourquoi)

C'est le langage qui sert à mettre en forme les pages web

La version actuelle de CSS est la 3

Il sert à passer des styles HTML par défaut...

...à des styles personnalisés pour de vraies mises en page :

Des possibilités infinies

Avec un même code HTML, CSS permet de faire des designs complètement différents :

  • CSS Zen Garden
  • Ce site illustre les possibilités offertes par CSS en proposant aux internautes de créer leur propre feuille de styles avec un même code HTML

La syntaxe de CSS

La syntaxe ressemble à ça :

element {
	propriété:valeur;
	propriété:valeur;
	propriété:valeur;
}

On peut lister les propriétés sur une seule ligne, même si ça peut être moins lisible. Peu importe :)

element {
	propriété:valeur; propriété:valeur; propriété:valeur;
}

Exemple de code CSS

Comment ça marche ?

HTML et CSS sont deux langages différents

Du CSS, ça se déclare.

3 méthodes pour déclarer du CSS :

  • Dans la balise <head></head>
  • Comme un attribut de balise
  • Dans un fichier externe

Mais on n'en retiendra qu'une (pour le moment)

  • Dans un fichier externe

Dans un fichier externe

Ce fichier externe, c'est une "feuille de styles".

On utilisera cette même feuille de styles sur chacune des pages du site :

  • Objectif : faciliter la maintenance du site
  • Si vous avez un site avec des titres rouges et que vous voulez les passer en bleu, vous n'aurez qu'à éditer la feuille de styles du site sans avoir à passer par toutes les pages.

On l'appelle dans la balise <head></head> avec la balise <link/>

  • Et les attributes href (comme pour les liens hypertexte) et rel="stylesheet"
<head>
	<meta charset="utf-8"/>
	<title>Titre de ma page</title>
	<meta description="Description de ma page"/>
	<meta keywords="Mots-clés, de ma page"/>
	<link href="monfichier.css" rel="stylesheet"/>
</head>

Essayons !

Téléchargez l'archive suivante en cliquant ici

La typographie

Couleur du texte

Avec la propriété "color" :

body {
color:#999;
}
  • On peut l'appliquer à tous les éléments pouvant accueillir du texte

A propos des couleurs en CSS

Deux manières principales de définir une couleur

  • En hexadécimal
    • #f4c242
  • En RGB
    • rgb(244, 194, 66)

On peut aussi les appeler par leur nom :

blue, red, yellow, etc.

Alignement du texte

Avec la propriété "text-align" :

body {
text-align:justify;
}

Quatre valeurs possibles :

  • left, right, center, justify

Taille du texte

Avec la propriété "font-size" :

body {
font-size:1em;
}

On la définit (entre autres) en "em"

Comprendre l'utilisation de la valeur "em"

body {
font-size:1em; // 1em est notre taille de base
}
h1 {
font-size:1.8em;
}
h2 {
font-size:1.5em;
}
h2, h4 {
font-size:1.2em;
}

Hauteur de ligne

Avec la propriété "line-height"

body {
font-size:1em; // 1em est notre taille de base
line-height:1.4em;
}
  • Si la taille du texte est définie "em" on définit aussi la hauteur de ligne en "em"
  • Attention à bien doser l'espacement entre les lignes !

Graisse du texte

Avec la propriété "font-weight" :

body {
font-weight:normal;
}

Plusieurs valeurs possibles :

Style du texte

Avec la propriété "font-style" :

body {
font-style:italic;
}

Plusieurs valeurs possibles :

Décoration du texte

Avec la propriété "text-decoration" :

body {
text-decoration:underline;
}

Plusieurs valeurs possibles :

Transformation du texte

Avec la propriété "text-transform" :

body {
text-transform:uppercase;
}

Plusieurs valeurs possibles :

Police de caractères

Avec la propriété "font-family" :

body {
font-family:Arial, Verdana, sans-serif;
}

Attention :

  • Seules les polices installées sur l'ordinateur de l'internaute pourront s'afficher
  • C'est pourquoi il est conseillé d'indiquer plusieurs polices
  • Mais il existe des moyens pour contourner cette limitation

Utiliser n'importe quelle police de caractères

Avec la propriété "@font-face"

@font-face {
	font-family: 'OpenSansRegular';
		url('fonts/open-sans/opensans-regular-webfont.ttf') format('truetype'),
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSansRegularBold';
		url('fonts/open-sans/opensans-bold-webfont.ttf') format('truetype'),
	font-weight: bold;
	font-style: normal;
}
  • Où télécharger des polices de caractères ?
  • Attention aux droits d'utilisation ! Certaines sont payantes

Avec Google Fonts

  • Cette solution est beaucoup plus simple !

Le principe de cascade

Hérédité et parentalité

Dans l'exemple ci-dessous :

<body>
	<ul>
		<li>Un élément de liste</li>
	</ul>	
<body>
  • <body> est parent de <ul> et <li>
  • <li> est enfant de <ul> et <body>
  • <ul> est parent de <li> et enfant de <body>

Les balises sont imbriquées

  • On met des balises dans des balises dans des balises, etc.
  • Cela crée une hiérarchie

En CSS, on applique le principe d'hérédité

La balise parente transmettra ses styles à ses balises enfant

  • Si vous définissez une couleur de texte à la balise <body>, les balises enfant hériteront de la même couleur
body {
color:red;
}
p { } /* La balise <p> est enfant de <body> : sauf indication contraire, le texte sera rouge lui aussi */

Mais on peut très bien "écraser" le style du parent

  • Il suffit d'indiquer la propriété souhaitée à la balise cible
body {
color:red; /* Rouge devient la couleur de texte par défaut de la page */
}
/* on écrase le style du parent */
p { 
color:green; /* Tous les paragraphes seront en vert */
}

On peut aussi cibler un élément imbriqué dans un autre élément

  • Il suffit de partir de l'élément parent pour arriver à la balise ciblée.
  • Par exemple, un élement de liste dans une liste : 
    ul li {
color:red;
}
  • Ou une balise <strong> dans un élément de liste : 
    ul li strong {
color:red;
}
  • Ou même une liste dans un élément de liste dans une liste (à s'y perdre !) : 
    ul li ul {
color:red;
}

Le cas des valeurs relatives

Les valeurs relatives sont basées sur la valeur du parent :

  • Dans l'exemple ci-dessous, on pourrait croire que la taille du texte dans <ul> est la même que celle de <body>
  • Pas du tout : <ul> est enfant de <body> et sa taille est relative à son parent.
  • Pour que la taille de police de <ul> soit la même, il aurait fallu indiquer 1em (c'est à dire la même taille que le parent), ou rien du tout 
body {
font-size:0.8em;
}
ul { 
font-size:0.8em;
}

Exercice 3

Jouons avec le principe de cascade

Les sélecteurs

Le type de balise

Le plus basique : pour cibler tous les éléments d'un même type

  • Par exemple 
    a { color:#f00; }
p { font-size:0.8em }

L'identifiant (#ID)

L'identifiant est représenté par le symbole dièse "#"

  • Vous donnez un identifiant à la balise que vous souhaitez cibler 
    <p id="intro">Mon paragraphe avec un identifiant</p>
  • Et vous ciblez cet identifiant dans votre CSS 
    #intro { color:#f00; }
  • Attention : un même identifiant par page (sinon c'est plus un identifiant)

La classe (.class)

La classe est représentée par le symbole point "."

  • Vous donnez une classe à la balise que vous souhaitez cibler, avec l'attribut "class" 
    <p class="citation">Mon paragraphe avec un identifiant</p>
  • Et vous ciblez cette classe dans votre CSS 
    .citation { color:#f00; }
  • On peut utiliser la même classe plusieurs fois par page
  • Très utile quand on a des éléments récurrents dans la page

Nommage des identifiants et des classes

On choisit les noms par leur rôle et non leur apparence

  • (Bah oui, leur apparence peut changer à l'avenir, alors que leur rôle...)

On reste simple !

  • Pas de nom à rallonge
  • Choisir un nom explicite

Pas de fantaisies, juste des lettres, chiffres et tirets

  • Si d'autres caractères sont autorisés, on privilégiera des caractères alpha-numériques et des tirets ou underscores.
  • Je préfère les tirets (le fameux tiret du 6) aux underscores (le tiret du 8)

La sélection descendante

Principe d'entonoir : vous partez d'un parent pour aller jusqu'à la balise ciblée

  • Par exemple, dans le cas d'un élément de liste : 
    ul li { color:#f00; }

On peut même mixer avec un identifiant ou une classe !

ul.maliste li { color:#f00; }
  • Le code ci-dessus va cibler uniquement les éléments de listes dans les listes à puce ayant la classe ".maliste"

Les pseudo-classes

La pseudo classe permet de cibler un élément sans avoir à ajouter de classe.

Elle cible son état, ou sa position dans une suite d'éléments.

On reconnait une pseudo classe parce qu'elle commence avec le symbole ":".

Exemples de pseudo-classes :

  • :hover
  • :visited
  • :first-child

:hover

  • Permet de sélectionner un élément au survol 
    a:hover { text-decoration:underline }
  • Principalement utilisé sur des liens, ou pour faire apparaître des élements masqués par défaut (menu déroulant par exemple)
  • Exemple : On change la couleur de fond au survol
    Survole moi !

:focus

  • Permet de sélectionner l'élément actif 
    a:focus { text-decoration:underline }
  • Utile lorsqu'on navigue au clavier pour savoir sur quel élément on se trouve

:active

  • Permet de sélectionner l'élément au moment du clic sur celui-ci 
    a:active { text-decoration:underline }
  • Exemple : On change la couleur de fond au clic
    Clique moi !

:visited

  • Permet de sélectionner les liens déjà visités 
    a:visited { text-decoration:underline; color:#F00; }
  • Par défaut, les liens visités s'affichent en souligné violet

:first-child

  • Permet de sélectionner le premier élément enfant 
    ul li:first-child { color:#f00 } /* Sélectionne le 1e élément de liste */

Attention : pour que ça fonctionne, il faut que les enfants directs du parent soient tous du même type (par exemple, que des <li> dans un parent <ul>)

  • Element de liste
  • Element de liste
  • Element de liste
  • Element de liste
  • Element de liste

:last-child

  • Permet de sélectionner le dernier élément enfant 
    ul li:last-child { color:#f00 } /* Sélectionne le dernier élément de liste */

Attention : pour que ça fonctionne, il faut que les enfants directs du parent soient tous du même type (par exemple, que des <li> dans un parent <ul>)

  • Element de liste
  • Element de liste
  • Element de liste
  • Element de liste
  • Element de liste

:nth-child(N)

  • Permet de sélectionner le Nième élément enfant 
    ul li:nth-child(2) { color:#f00 } /* Sélectionne le 2e élément de liste */

Attention : pour que ça fonctionne, il faut que les enfants directs du parent soient tous du même type (par exemple, que des <li> dans un parent <ul>)

  • Element de liste
  • Element de liste
  • Element de liste
  • Element de liste
  • Element de liste

Rien ne sert de vous tout lister ici...

Vous pouvez retrouver la majorité des sélecteurs sur cette page

  • Les sélecteurs de cette présentation sont à retenir en priorité.
  • Mais certains du lien ci-dessus pourront vous être bien utiles !

Exercice 4

On récapitule !

Infos utiles

  • Deux polices de caractères utilisées : Roboto et Merriweather
  • Trois couleurs utilisées : noir (#000), rouge (#cb3a3a) et bleu (#236386)
  • Faites bien attention aux classes, identifiants et aux imbrications

Résultat attendu

Voilà pour la base de CSS !

Mise en page avec HTML et CSS

Structure basique d'une page web

On divise souvent les pages en 4 parties distinctes :

  • Le haut de page (header)
  • Le menu principal
  • La zone de contenus
  • Le pied de page

Il faut penser la structure de son site comme un système de boites

  • On les aligne les unes à côté des autres
  • Et on peut mettre des boites à l'intérieur d'autres boites

Comment on les délimite, ces boites ?

Avec des balises HTML dites structurantes :

  • <section>
  • <header>
  • <footer>
  • <nav>
  • <div>
  • <article>
  • <aside>

Les balises structurantes

La balise <section>

  • Regroupe un ensemble de contenus de même thématique
  • Ou une partie de la page proposant une fonctionnalité spécifique
  • La section contient généralement un titre d'introduction

La balise <header>

  • Désigne une entête (de page, de section)
  • Peut contenir une introduction de de section
  • Ou encore des logos, ou éléments de navigation

La balise <footer>

  • Désigne un pied de page ou la conclusion d'une section
  • S'utilise de la même manière que <header></header>
  • Peut contenir des informations supplémentaires (mentions légales, etc.)
  • Ou encore des éléments de navigation (plan du site, ...)

La balise <nav>

  • Désigne un contenu servant à la navigation sur le site
  • Elle entoure généralement un menu (principal ou non)
  • Des listes de liens qui servent à naviguer sur le site

La balise <div>

  • C'est une balise structurante générique
  • Elle peut servir à n'importe quel endroit du site
  • Elle a longtemps été la seule vraie balise structurante

Si la balise <div> sert à tout faire...

...pourquoi s'embêter avec les autres ?

  • La balise <div> n'a aucune valeur sémantique
  • Elle n'a aucun sens pour le navigateur, les moteurs de recherche
  • Les autres balises permettent de leur indiquer le type de contenu

Ces balises sont de type "block"

Les balises de type block prennent toute la largeur de l'écran

Elles créent un retour à la ligne avant et après, en poussant les contenus suivants à la ligne.

On peut leur attribuer une largeur et une hauteur

  • On retrouve donc les balises de la slide précédente
  • Mais aussi des balises qu'on connaissait déjà : <p>, <ul>, <h1>...

Elles sont différentes des balises "inline"

Les balises "inline" ne provoquent pas de retour à la ligne.

  • Elles se trouvent OBLIGATOIREMENT à l'intérieur d'une balise de type block
  • On retrouve entre autres les balises <img/>, <a>, <em>, <strong>, <span>

Exemple de structure d'une page web

Cliquez sur l'image pour la voir en plus grand

Structurer sa page en HTML

Reprenons notre schéma

Voici la structure HTML correspondante :

<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Titre de ma page</title>
	<meta description="Description de ma page"/>
	<meta keywords="Mots-clés, de ma page"/>
</head>
<body>
	<header>	
		<!-- contenu de mon en-tête de page -->	
	</header>
	<nav>	
		<!-- contenu de mon menu -->	
	</nav>
	<section>	
		<!-- contenu principal -->	
	</section>
	<section>	
		<!-- contenu secondaire -->	
	</section>
	<footer>	
		<!-- contenu de mon pied de page -->	
	</footer>
</body>
</html>

Nous allons construire la mise en page à partir de ce code HTML

  1. Créez un répertoire sur votre clé USB ou ordinateur
  2. Nommez-le comme vous voulez
  3. Dans ce répertoire, créez un fichier "index.html"
  4. Copiez/collez le code de la slide précédente dans le fichier "index.html"

Nous avons la structure HTML de la page

Il faut maintenant la mettre en page grâce à CSS

  • Dans votre répertoire, créez un sous-repertoire "css"
  • Dans le sous-répertoire CSS, créez un fichier "styles.css"
  • Appelez le fichier CSS dans votre fichier "index.html" 
    <link href="css/styles.css" rel="stylesheet"/>

Tout est prêt

L'objectif est d'arriver à ce résultat :

Mettre en page en CSS

Rappelez-vous :

Les balises structurantes sont dites de type "block"

Voici quelques propriétés qu'on peut appliquer à ce type de balises :

  • une largeur
  • une hauteur
  • une couleur de fond
  • une image de fond
  • des marges externes
  • des marges internes
  • des bordures

Appliquer une largeur

La largeur s'applique avec la propriété "width"

balise {
	width:800px;
}
  • Notez que dans l’exemple, « balise » doit être remplacé par la ou les balise(s) effectivement ciblée(s) : header, nav, section, footer, …

La largeur peut s'exprimer en pixels ou en pourcentages

balise {
	width:800px;
}
balise {
	width:100%;
}
  • Pour rappel, les balises de type "block" prennent automatiquement toute la largeur disponible

Vous pouvez donner une largeur minimum et/ou maximum

  • Avec les propriétés "max-width" et "min-width" 
balise {
	 max-width:800px;
	 min-width:200px;
}

Appliquer une hauteur

La hauteur s'applique avec la propriété "height"

balise {
	height:200px;
}
  • Notez que dans l’exemple, « balise » doit être remplacé par la ou les balise(s) effectivement ciblée(s) : header, nav, section, footer, …

Le fonctionnement est le même qu'avec la propriété width

  • C'est juste un peu plus complexe de faire en sorte que la boite prenne toute la hauteur disponible (100%)
  • On ne verra pas ça dans le cours...

Appliquer une couleur de fond

On fait appel à la propriété "background-color"

balise {
	background-color:#000000;
}

Exemples

  • Pour que le fond d'une page soit gris, on ciblera "body" (la boite qui englobe tout l'écran) : 
    body {
	background-color:#dddddd;
}
  • Pour que le fond d'une boite soit rouge (le haut d'une page par exemple), on cible sa balise correspondante 
    header {
	background-color:#c34b4b;
}

Appliquer une image de fond

On fait appel à la propriété "background-image"

balise {
	background-color:#000000;
	background-image:url('../img/image.png');
}
  • La valeur « url » est un peu l’équivalent du « href » en HTML. Il va appeler l’image à l'endroit où elle se trouve.

On peut répéter l'image sur toute largeur et la hauteur d'une boite

Avec la propriété "background-repeat" :

background-repeat:repeat;

Les possibilités sont les suivantes

  • repeat : répète l'image sur toute la hauteur et sur toute la largeur
  • repeat-x : répète l'image sur toute la largeur
  • repeat-y : répète l'image sur toute la hauteur
  • no-repeat : ne répète pas l'image

On peut positionner l'image de fond dans la boite

Avec la propriété "background-position" :

background-position:center top;

Deux valeurs, la largeur (x) et la hauteur (y) séparées par une espace :

  • La largeur peut être : "center", "left", "right" ou une valeur en pixels
  • La hauteur peut être : "top", "bottom", "center", ou une valeur en pixels

Exemple :

header {
	background-color:#dddddd;			
	background-image:url(../img/monimage.png);
	background-position:center top;
	background-repeat:no-repeat;
}

Appliquer une marge externe

Avec la propriété "margin" :

balise {
	margin:50px;
}
  • Dans cet exemple, la marge sera de 50px de chaque côté de la boite

On peut aussi appliquer des marges différentes à chaque côté de la boite

  • Exemple avec une marge de 50px en haut, 40px à droite, 30px en bas et 20px à gauche 
    balise {
	margin:50px 40px 30px 20px;
}
  • Il suffit de séparer chaque valeur par une espace
  • La première est le haut, puis on suit le sens des aiguilles d'une montre

On peut aussi utiliser une méthode plus longue à écrire :

balise {
	margin-top:50px;
	margin-right:40px;
	margin-bottom:30px;
	margin-left:20px;
}

Et une autre, plus courte

  • Seulement si les valeurs haut/bas et gauche/droite sont identiques : 
balise {
	margin:50px 10px;
}
  • La première valeur correspond aux marges haute et basse
  • La deuxième valeur correspond aux marges droite et gauche

Appliquer une marge interne

Une marge interne ?

  • On voudrait éviter que nos contenus soient collés aux bords
  • On préfèrera ça :

Avec la propriété "padding" :

balise {
	padding:50px;
}
  • Ensuite, le fonctionnement est exactement le même que "margin"

Appliquer une bordure

Avec la propriété "border" :

balise {
	border:1px solid #ddd;
}

Cette propriété est composée de 3 valeurs séparées par des espaces :

  • La première, c’est l’épaisseur de la bordure, en pixels
  • La deuxième, c’est le type de bordure : un trait continu (solid), ou en pointillés (dashed, dotted)
  • La troisième, c’est la couleur : en hexadécimal ou en RGB

On peut aussi appliquer des bordures différentes à chaque côté de la boite

balise {
	border-left:1px solid #ddd;
	border-top:2px dotted #f00;
}

Dans cet exemple :

  • La boite aura une bordure gauche de 1px, solide et grise
  • La boite aura une bordure haute de 2px, en pontillés et rouge
  • Les deux autres côtés n'auront pas de bordure

A propos des marges internes et des bordures

Par défaut, les marges internes et les bordures modifient la taille des boites.

Par exemple

Pour un bloc de 800px de large avec un padding de 20px et une bordure de 1px de chaque côté, il faut ajouter à ces 800px de large :

  • 20px de marges internes à gauche et à droite
  • 1px de de bordures à gauche et à droite
  • Soit 800+20+20+1+1 = 842px

On se retrouve avec une boite de 842px au lieu des 800px souhaités de base. Cela pourrait poser des problèmes de mise en page.

Pour éviter cela, deux solutions :

  • Adapter la largeur (width) de la boite en prenant en compte l'espace en plus
  • Utiliser la propriété "box-sizing" avec la valeur "border-box" 
    balise {
	width:800px;
	padding:20px;
	border:1px solid #ddd
	box-sizing:border-box;
}
  • Cette propriété inclut les bordures et le padding dans les 800px

Centrer une boite horizontalement

Votre site ne fera généralement pas la largeur de votre écran.

Il va falloir le centrer sur l'écran, grâce à la propriété "margin".

  • L'idée est d'avoir la même marge à droite et à gauche...
  • Puisqu'on aura la même marge de chaque côté, notre boite sera centrée !

On fait ça avec la valeur "auto" :

balise {
	margin:0 auto;
}

Ce qui revient à écrire :

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

C'est parti pour l'intégration ! (1/2)

Pour rappel

L'objectif est d'arriver à ce résultat :

Le fond de page (body)

On souhaite que le fond de notre page soit gris.

  • On va donc cibler la balise <body> avec la propriété "background-color" : 
body {
	background-color:#ddd;
}

Ca, c'était facile.

Le haut de page (header) (1/2)

Voici les caractéristiques souhaitées pour notre header :

  • Il fait 800px de large
  • Il fait 200px de haut
  • Il a un fond rouge
  • Il est centré horizontalement sur la page
  • Il a une marge de 5px en haut et en bas

Autant de propriétés qu’on sait désormais traduire en CSS !

header {
	width:800px;
	height:200px;
	background:#c34b4b;
	margin:5px auto;
}

Le menu principal (nav)

Voici les caractéristiques souhaitées pour notre nav :

  • Il fait 800px de large
  • Il fait 50px de haut
  • Il a un fond rouge
  • Il est centré horizontalement sur la page
  • Il a une marge de 5px en haut et en bas

C'est quasiment le même code que pour le header !

Le pied de page (footer)

Les caractéristiques sont les mêmes que pour le header.

La zone de contenus (les sections)

Les choses se corsent !

On veut centrer nos deux boites en les gardant côte à côte.

Une solution :

  • Entourer ces deux boites d'une autre boite
  • C'est cette boite qui sera centrée

La solution en image :

Cette boite, c’est un conteneur.

  • Elle n’a aucune valeur sémantique
  • On utilise donc la balise <div> dans notre HTML : 
<div>
	<section>		
		<!-- contenu principal -->		
	</section>
	<section>		
		<!-- contenu secondaire -->		
	</section>
</div>

Ce conteneur, on va l'identifier avec un attribut ID

Il vaut mieux l'identifier parce qu'on risque d'avoir plusieurs conteneurs à différents endroits de notre site. On ne pourra donc pas mettre en forme notre conteneur en faisant appel à son type d'élément. Il faut le différencier en lui donnant un identifiant (ou une classe si vous pensez avoir besoin de ce conteneur là plusieurs fois sur votre page).

  • Le rôle de cette boite est de contenir, d'emballer d'autres boites
  • On les identifie souvent comme ceci : "container", ou encore "wrapper"
<div id="container">
	<section>		
		<!-- contenu principal -->		
	</section>
	<section>		
		<!-- contenu secondaire -->		
	</section>
</div>

Puis on cible ce conteneur par son identifiant dans notre CSS

#container {
	width:800px;
	background:#c34b4b;
	margin:5px auto;
}

Reste à mettre en forme nos deux <section>

  • Sur notre maquette, nos sections ont des largeurs et des couleurs de fond différentes.
  • Il va falloir les différencier de manière à les cibler individuellement en CSS.

On va commmencer par donner une classe à chacune de nos sections.

Pourquoi on leur donne une classe ?

Si on veut donner un style particulier à la première balise de section et un style particulier à la 2e, on ne pourra pas les cibler par leur type de balise (sauf en utilisant une pseudo-classe type "first-child"/"last-child"). Il faut donc être capable de les discriminer avec une classe, par exemple.

<div id="container">
	<section class="content">		
		<!-- contenu principal -->		
	</section>
	<section class="sidebar">		
		<!-- contenu secondaire -->		
	</section>
</div>

Dans le code ci-dessus, on a ajouté la classe "content" à notre première section, et la classe "sidebar" à notre 2e section.

On aurait pu leur donner un ID plutôt qu'une classe ?

Oui, si on estime n'avoir à utiliser ces identifiants une seule fois dans la page.

Nos sections ont des classes, on va pouvoir les mettre en forme individuellement en CSS

Cependant, les deux balises ont des caractéristiques communes, il serait dommage de les répéter deux fois.

Pour ces caractéristiques, nous allons donc cibler par type de balise, pour modifier toutes les balises de ce type : ici le type <section>.

  • Ici, nos deux balises <section> ont la même hauteur, donc :
section {
	height:500px;
}

Ensuite, nous allons définir la largeur et la couleur de chacune des sections.

  • Dans notre CSS :
.content {
width:550px;
background:rgba(255,255,255,0.5);
}
.sidebar {
width:250px;
background:rgba(0,0,0,0.5);
}

Ha, oui... On avait vu les couleurs en RGB, mais il existe aussi RGBA : c'est la même chose, sauf que la dernière valeur gère la transparence de la couleur, de 0 (transparent) à 1 (opaque).

Donc...

  • La section ayant la classe « content » fera 550px, et aura un fond blanc transparent, à moitié.
  • La section ayant la classe « sidebar » fera 250px et aura un fond noir transparent, à moitié également.

Enfin, on y est ! Admirons le résul... Mmm.

Si vous avez bien suivi les différentes étapes, voici ce que ça devrait donner :

La sidebar s’est fait la malle. C’est normal.

Pour rappel : les balises de section sont des balises de type « block ».

  • Par défaut, ces balises se placent les unes au-dessous des autres.
  • Il va donc falloir indiquer à notre navigateur qu’on souhaite les afficher côte à côte.
  • C’est ce que nous allons voir dans notre prochain chapitre sur le positionnement des blocs.

Le positionnement des blocs

La propriété "float"

Nous avons vu que nous avions un problème avec le positionnement du bloc « sidebar ». Il va falloir mettre nos deux sections côte à côte.

Il existe plusieurs manières de positionner des blocs. Nous allons voir les plus courantes. La première, c’est la propriété « float ».

Elle peut prendre 4 valeurs :

  • left
  • right
  • none (pour annuler le float sur une balise)
  • inherit (hérite de la propriété du parent)

Bien comprendre l’effet de « float »

Voici la représentation de nos deux sections dans un conteneur :

  • 1. Avant l’application de la propriété « float » (ce que nous avons actuellement) :
  • 2. Les deux blocs alignés à gauche :
  • 3. Le premier bloc aligné à gauche, le deuxième à droite :

Dans notre maquette, nous allons donc utiliser la propriété « float » pour placer nos deux sections côte à côte. La première va flotter à gauche, et la deuxième à droite :

.content {
width:550px;
background:rgba(255,255,255,0.5);
float:left;
}
.sidebar {
width:250px;
background:rgba(0,0,0,0.5);
float:right;
}

Tadaaa... Mais... C'est quoi le problème maintenant ?

Le problème, il vient de la div#container, celle qui emballe vos deux sections.

Quand on fait flotter deux éléments dans un conteneur, la hauteur du conteneur ne s'ajuste pas automatiquement au contenu.

Dans notre CSS, nous n'avons indiqué aucune hauteur à notre conteneur (il fait donc 0px de haut), et nous ne voulons pas le faire.

Pourquoi ne pas indiquer de hauteur à notre conteneur ?

Pour notre maquette d'exemple, nos sections ont une hauteur fixe (500px). On pourrait donner cette même hauteur à notre conteneur et le problème serait réglé.

En règle générale, la hauteur de vos sections ne sera pas fixe, puisqu'elle s'adaptera à la longueur de son contenu.

Il est donc impossible de savoir à l'avance quelle sera la hauteur de vos sections.

Ajuster la hauteur du conteneur grâce à la propriété "overflow"

La propriété overflow permet de gérer les débordements de contenus.

Si un contenu déborde, elle permet :

  • D'adapter la taille du conteneur (ce qu'on souhaite ici)
  • De ne pas changer la taille du conteneur mais de permettre de scroller dedans
  • De ne pas changer la taille du conteneur et de masquer le contenu qui déborde

Respectivement, ses propriétés sont :

  • auto
  • scroll
  • hidden

Dans notre cas, on souhaite adapter la taille du conteneur

On va donc lui appliquer la propriété "overflow:auto" :

#container {
	width:800px;
	background:#c34b4b;
	margin:5px auto;
	overflow:auto;
}

Cette fois, c'est la bonne !

La propriété "display"

Nous venons de voir le principe du « float » : cela permet déjà de faire pas mal de choses. Mais à vrai dire, ce n’est pas forcément la manière la plus propre de positionner des éléments (ça ne vous empêche pas de l’utiliser, je ne vous demande pas non plus de devenir des pros de l’intégration web).

Mais pour bien comprendre la positionnement, il est intéressant de s’initier à la propriété « display ».

Je vous ai déjà parlé de balises de type « block », et j’ai aussi évoqué les balises de type « inline ».

Nous avons vu que les balises de type « block » ont des caractéristiques propres : elles forment des boites, des espaces dimensionnables, et chacune provoque un retour à la ligne.

Les balises de type « inline », se positionnent les unes à côté des autres sans former de boites, puisqu'elles n'ont pas de dimensions à proprement parler.

Pour rappel, quelques balises de type "block" :

  • <div>, <section>, <nav>, <header>, <footer>, ...
  • <h1>, <h2>, ...
  • <ul>, <p>, <table>, ...

Et quelques balises de type "inline"

  • <a>, <strong>, <em>, <img/>, <br/>, ...

En CSS, il est possible de faire d’une balise « block » une balise « inline », et vice-versa. Tout cela grâce à la propriété « display » :

div {
	 display:inline;
}
a {
	 display:block;
}

Cette propriété peut prendre principalement 4 valeurs

  • block
  • inline
  • inline-block (gné ?)
  • none (permet tout simplement de masquer un élément)

On ne va pas approfondir plus que ça dans cette présentation, vous avez déjà beaucoup de choses à retenir.

Voici tout de même un bon lien pour aller plus loin avec cette propriété "display" :
https://la-cascade.io/la-difference-entre-block-et-inline/

A noter que nous allons utiliser cette propriété dans l'exercice qui va suivre :)

La propriété "position"

Encore une fois, l'idée n'est ni de vous bourrer (encore plus) le crane, ni de faire de vous des experts de CSS.

Je ne m'étalerai donc pas trop sur cette propriété, mais sachez qu'elle existe et qu'elle peut être utile.

La propriété "position" peut prendre trois valeurs :

  • relative : permet de décaler un élément par rapport à sa position actuelle ;
  • absolute : permet d’afficher un élément à n’importe quel endroit de la page ;
  • fixed : permet d’afficher un élément à n’importe quel endroit de la page, et qu’il y reste même en scrollant (toujours affiché sur l’écran).

Pour l’utilisation, je préfère vous donner quelques liens :

Pas à pas : intégrons une vraie page web !

Suivez le guide !

Dans ce chapitre, nous allons intégrer une vraie page web, avec une vraie mise en page, des images et tout.

Je vais tout vous expliquer pas à pas, et normalement, si certaines choses étaient un peu floues, elle devraient devenir plus claires après cet exercice.

Il y a deux/trois petites choses en plus qu'on n'a pas vues avant, je vous les expliquerai en cours de route :)

 

L'idée, c'est de mettre en pratique ce que vous avez appris mais en vous faisant un peu réfléchir. A chaque étape, vous trouverez le code qui vous permettra d'obtenir le rendu désiré, mais il sera masqué par défaut. Vous pourrez l'afficher, mais je vous conseille d'exercer votre réflexion car il n'y a rien de tel pour bien comprendre le code.

La maquette

Voici la maquette que nous allons intégrer (clique dessus pour l'avoir en grand format).

Les fichiers

Téléchargez l'archive contenant tous les fichiers nécessaires en cliquant sur le lien ci-dessous :

Télécharger l'archive

Première étape : analysons la maquette

Cette étape est très importante avant se lancer dans la structure HTML.

Il faut observer les différentes zones de notre maquette.

On peut noter 7 sections principales qui sont :

  • Un haut de page, avec une image et un titre
  • Un menu principal
  • Une section bandeau avec une image du château
  • Une section de présentation, en deux colonnes
  • Une section d'actualités, en quatre colonnes
  • Une section d'informations générales, en deux colonnes
  • Et un pied de page (vide, mais déjà quand tu auras fait tout le reste ce sera pas mal :p)

    • Cette analyse de la page va nous donner une première idée de notre code HTML.

    On aura :

    • Un élément <header>
    • Un élément <nav>
    • Quatre éléments <section> à suivre
    • Un élément <footer>

    On se lance ?

On se lance !

Normalement, vous avez téléchargé l'archive contenant tous les fichiers pour l'exercice.

  • N'hésitez pas à la copier sur votre clé USB.

Cette archive contient un fichier "index.html", et deux sous-repertoires ("css", qui contient un fichier "styles.css" et "img", qui contient les fichiers images).

Editons notre code HTML

Ouvrez votre fichier "index.html".

N'oubliez pas, dans Notepad++, de changer l'encodage du fichier en "UTF-8 (Sans BOM)" pour ne pas avoir de problème d'affichage des accents par la suite.

1. On crée la structure de base de notre fichier HTML

Vous la connaissez, mais je vous la remets ici pour être sûrs de partir sur de bonnes bases :)

<!doctype html>
<html>
	<head>
		<!-- Métadonnées -->
	</head>
	<body>
		<!-- Contenu -->
	</body>
</html>

2. On renseigne les métadonnées

Pour rappel, ça se passe dans la balise <head> et on va renseigner :

  • l'encodage des caractères
  • le titre de la page
  • la description de la page
  • les mots-clés de la page

Je vous laisse essayer de vous débrouiller tout seul pour renseigner ces éléments, mais je vous mets le code ci-dessous si vous avez besoin :

  • Afficher / Masquer le code
  • <!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de ma page</title>
		<meta name="description" content="Description de la page">
		<meta name="keywords" content="Mots, clés, de la page">
	</head>
	<body>
		<!-- Contenu -->
	</body>
</html>

Ca a été ? Alors on peut passer à la suite !

3. On structure notre page

Maintenant qu'on a nos méta-données, on va pouvoir passer à la structure proprement dite de notre page. C'est à dire que nous allons renseigner les balises qui nous permettrons de délimiter les différentes parties de notre page web.

3.1 Le haut de page

Le haut de page est composé d'une image, ainsi que d'un titre.

Je vous laisse réfléchir un peu, en vous donnant la réponse plus bas pour vous aiguiller :p

On est sur du très simple : un haut de page, dans lequel on trouve une image et un titre... Comment le traduisez-vous en HTML ?

  • Afficher / Masquer le code
  • <body>
	<header id="main-header">
		<img src="img/logo.jpg" alt="Château d'Angers"/>
		<h1>Le château d'Angers</h1>
	</header>
</body>
  • Explications
    • Le haut de page est représenté par la balise <header>. On lui a ajouté un identifiant, ça pourrait nous être pratique plus tard dans le CSS, même si ce n'est pas forcément nécessaire. Mais c'est toujours bien d'identifier les différentes sections de ses pages web.
    • L'image, c'est du basique. On n'oublie pas le texte alternatif. On verra plus tard comment l'arrondir !
    • Le titre, c'est du H1, car il paraît logique que hiérarchiquement, c'est lui qui sera le plus important.
    • C'est tout !

3.2 Le menu principal

Pour rappel, il faut voir un menu comme une LISTE de liens ;) Pour le reste, je vous laisse réfléchir mais je vous mets le code ci-dessous.

  • Afficher / Masquer le code
  • <body>
	<header id="main-header">
		<img src="img/logo.jpg" alt="Château d'Angers"/>
		<h1>Le château d'Angers</h1>
	</header>
	<nav id="main-nav">
		<ul>
			<li><a href="#presentation">Présentation</a></li>
			<li><a href="#actualites">Actualités</a></li>
			<li><a href="#visiter">Visiter le château</a></li>
		</ul>
	</nav>	
</body>
  • Explications
    • Un menu principal, c'est un élément de navigation. On le délimite donc avec la balise <nav>. Comme le header, on lui a assigné un identifiant.
    • Comme indiqué plus haut, un menu est une liste de lien. Une liste ! Il y a une balise pour ça (même deux) : <ul> et <li>
    • Puis on met les liens à l'intérieur de chaque list item, du classique.
    • Facile non ?

3.3 La première section

On a vu dans l'analyse de la maquette qu'on pouvait découper le contenu de la page (mis à par le haut de page, le menu principal et le pied de page) en quatre sections.

Ici, on souhaite intégrer la première. On ne fait pour le moment que du HTML donc on ne s'occupe pas du visuel. Le code final est assez simple, même si il faut penser à quelque chose en particulier.

  • Afficher / Masquer le code
  • <body>
	<header id="main-header">
		<img src="img/logo.jpg" alt="Château d'Angers"/>
		<h1>Le château d'Angers</h1>
	</header>
	<nav id="main-nav">
		<ul>
			<li><a href="#presentation">Présentation</a></li>
			<li><a href="#actualites">Actualités</a></li>
			<li><a href="#visiter">Visiter le château</a></li>
		</ul>
	</nav>	
	<section id="bandeau">	
		<div class="content">
			<img src="img/bandeau.jpg" alt=""/>
		</div>
	</section>
</body>
  • Explications
    • On entoure notre section d'une balise <section> (logique non ?). On lui met un ID, là c'est important car vu qu'on aura plusieurs sections, ça permettra de l'identifier en CSS pour la styler elle et elle seule.
    • Mais on ajoute une balise <div> juste après. Pourquoi ? Vous voyez sur la maquette : on souhaitera que notre section fasse toute la largeur de la page (toute la partie grisée). Mais le contenu devra être centré ! C'est cette balise div que nous centrerons via notre CSS !
    • Cette div, on lui a donné une classe "content", parce qu'on va la réutiliser dans les sections suivantes, et c'est intéressant de pouvoir la cibler en CSS avec sa classe. Pour le coup on n'a pas mis un ID, mais une classe, vu qu'on en aura plusieurs dans la page. Je vous rappelle qu'un identifiant ne peut être utilisé qu'une fois dans une page web.
    • Reste à intégrer l'image, vous devez savoir faire.
    • Tadaaa !

3.4 La deuxième section

Ca se complique un peu ! Je sentais que vous commenciez à vous ennuyer :p

Premièrement on aura deux éléments côte à côte. Aucune incidence en HTML si ce n'est qu'il va falloir délimiter chaque élément pour en faire des boites qui pourront se positionner côte à côte toute à l'heure.

Donc on a à gauche un bloc de texte, avec un titre et trois paragraphes. A droite, un bloc grisé avec un titre et des données qu'il serait peut-être judicieux d'intégrer dans... un tableau !

  • Afficher / Masquer le code
  • <body>
	<header id="main-header">
		<img src="img/logo.jpg" alt="Château d'Angers"/>
		<h1>Le château d'Angers</h1>
	</header>
	<nav id="main-nav">
		<ul>
			<li><a href="#presentation">Présentation</a></li>
			<li><a href="#actualites">Actualités</a></li>
			<li><a href="#visiter">Visiter le château</a></li>
		</ul>
	</nav>	
	<section id="bandeau">	
		<div class="content">
			<img src="img/bandeau.jpg" alt=""/>
		</div>
	</section>
	<section id="presentation">	
		<div class="content">
			<h2>Présentation du château</h2>
			<div class="text">
				<p>Le château d'Angers, aussi appelé château des ducs d'Anjou, est situé dans la ville d’Angers dans le département de Maine-et-Loire en France.</p>
				<p>La forteresse est édifiée sur un promontoire de schiste ardoisier qui domine la Maine. Le site est occupé dès l’antiquité du fait de sa position défensive stratégique. Par la suite, les comtes d'Anjou y installent leurs demeures, jusqu'à la fin de l'empire Plantagenêt qui voit le royaume de France conquérir le comté d'Anjou.</p>
				<p>Louis IX fait construire le château actuel au XIIIe siècle tandis que les ducs d'Anjou le transforment en résidence seigneuriale au XVe siècle. Yolande d'Aragon y donne naissance à René d'Anjou. Au XVIIe siècle, à la suite des troubles des guerres de religion, le roi ordonne la destruction du château, mais seule la partie supérieure des tours est détruite. Il est par la suite transformé en prison, puis en garnison et dépôt de munition pendant la Seconde Guerre mondiale. Au début du XXIe siècle, il héberge la tenture de l'Apocalypse et est un des sites touristiques les plus visités de Maine-et-Loire. Son ouverture au tourisme est gérée par le Centre des monuments nationaux.</p>
			</div>
			<div class="infos">			
				<h3>Fiche technique</h3>
				<table>							
					<tr>
						<td>Période</td>
						<td>Médiéval</td>
					</tr>
					<tr>
						<td>Type</td>
						<td>Forteresse</td>
					</tr>
					<tr>
						<td>Début constr.</td>
						<td>XIIIe siècle</td>
					</tr>
					<tr>
						<td>Fin constr.</td>
						<td>XVIe siècle</td>
					</tr>
					<tr>
						<td>Destination initiale</td>
						<td>Résidence et défense</td>
					</tr>
					<tr>
						<td>Protection</td>
						<td>Classé MH (1875, 1913)</td>
					</tr>
					<tr>
						<td>Lieu</td>
						<td>Angers (49), France</td>
					</tr>			
				</table>				
			</div>
		</div>
	</section>
</body>
  • Explications
    • Donc, évidemment on utilise une balise <section> pour délimiter notre section. On peut lui mettre un identifiant.
    • On ajoute aussi notre <div> et sa classe "content" pour centrer tout le contenu qu'elle entoure dans notre CSS.
    • Ensuite on s'attaque à nos deux élements.
    • Le bloc de texte, je l'ai entouré d'une div avec une classe "text".
    • Idem pour le bloc "fiche technique" : une div, et une classe, ici "infos". Vous noterez qu'on aura exactement le même type de bloc plus bas dans la page avec les infos pratiques. On pourra donc utiliser une même classe pour ces deux éléments.
    • Pour le bloc de texte, on a un titre, qui n'est pas un H1, mais qui arrive hiérarchiquement juste en-dessous. H2 donc. Puis trois paragraphes, c'est très simple.
    • Pour le bloc "Fiche technique", on a aussi un titre. Ici, il me paraissait hiérarchiquement en-dessous de notre H2, donc j'ai utilisé un H3. Ensuite on fait un tableau classique. On verra comment mettre en gras les intitulés en CSS.

3.5 La troisième section

Et si on montait la difficulté d'encore un cran ?

Là on n'a plus deux éléments côte à côte mais quatre, avec un peu plus de choses dedans... Avant de vous jeter sur la solution, réfléchissez un peu à ce que ça pourrait donner en HTML :)

  • Afficher / Masquer le code
  • <!-- J'ai enlevé le code précédent qui commençait à être long mais imaginez qu'on continue notre page HTML -->
	<section id="actualites">		
		<div class="content">
			<h2>Actualités</h2>
			<div class="actu">			
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>			
			</div>
			<div class="actu">			
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>			
			</div>
			<div class="actu">			
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>			
			</div>
			<div class="actu">			
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>			
			</div>
		</div>
	</section>
  • Explications
    • Toujours le même principe : on utilise une balise <section> pour délimiter notre section. On peut lui mettre un identifiant.
    • On ajoute aussi notre <div> et sa classe "content" pour centrer tout le contenu qu'elle entoure dans notre CSS.
    • Ensuite on s'attaque à nos quatre élements, qui finalement seront tous les mêmes. On va donc faire le premier, puis le copier/coller.
    • Chaque bloc d'actualité est composé : d'une image, d'un titre, et de deux paragraphes, dont un avec un lien.
    • On est sur du grand classique, pas besoin d'en faire un pavé. Juste une précision sur le niveau de titre : H3 c'est bien, mais si ça se trouve on aurait pu mettre du H2. Ou alors, en considérant que le titre d'une actualité est peut-être plus important que notre titre de fiche technique, on pourrait passer ce dernier en H4. Plusieurs possibilités donc mais on va rester sur du H3 aux deux endroits.

3.5 La quatrième section

C'est d'une simplicité monstrueuse tant elle ressemble à la deuxième section !

Je vais juste vous apprendre à intégrer une Google Map.

- Allez sur ce lien : Vers Google Maps
- Cliquez sur "Partager" dans le volet à gauche de la page. Une fenêtre s'ouvre.
- Cliquez sur l'onglet "Intégrer la carte". - Changez "Moyenne" pour "Taille personnalisée". Notre future carte fera 600 x 300. - Copiez le code généré dans le champ de texte, et collez-le dans votre HTML. C'est tout :)

  • Afficher / Masquer le code
  • <!-- J'ai enlevé le code précédent qui commençait à être long mais imaginez qu'on continue notre page HTML -->
	<section id="visiter">
		<div class="content">
			<h2>Visiter le château</h2>
			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2697.021852346613!2d-0.5621886841106488!3d47.4700036053968!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480878c6fd07f131%3A0x689453eed1cc89ea!2sCh%C3%A2teau+d'Angers!5e0!3m2!1sfr!2sfr!4v1453153966667" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
			<div>			
				<h3>Infos pratiques</h3>
				<p>
					<span class="bold">Adresse :</span><br/>
					2 Promenade du Bout du Monde<br/>		
					49100 Angers
				</p>
				<p>
					<span class="bold">Numéro de téléphone :</span><br/>
					02 41 86 48 77
				</p>
				<p>
					<span class="bold">Horaires d'ouverture :</span><br/>
					Du lundi au dimanche, de 9h30 à 18h30
				</p>				
			</div>
		</div>
	</section>

3.6 Le pied de page

Je n'ai pas fait grand chose à ce niveau mais n'hésitez pas à vous entrainer à intégrer des listes de liens par exemple, ou des images.

Le code HTML en entier

<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Le château d'Angers</title>
</head>
<body>
	<header id="main-header">
		<img src="img/logo.jpg" alt="Château d'Angers"/>
		<h1>Le château d'Angers</h1>
	</header>
	<nav id="main-nav">
		<ul>
			<li><a href="#presentation">Présentation</a></li>
			<li><a href="#actualites">Actualités</a></li>
			<li><a href="#visiter">Visiter le château</a></li>
		</ul>
	</nav>
	<section id="bandeau">
		<div class="content">
			<img src="img/bandeau.jpg" alt=""/>
		</div>
	</section>
	<section id="presentation">
		<div class="content">
			<h2>Présentation du château</h2>
			<div class="text">
				<p>Le château d'Angers, aussi appelé château des ducs d'Anjou, est situé dans la ville d’Angers dans le département de Maine-et-Loire en France.</p>
				<p>La forteresse est édifiée sur un promontoire de schiste ardoisier qui domine la Maine. Le site est occupé dès l’antiquité du fait de sa position défensive stratégique. Par la suite, les comtes d'Anjou y installent leurs demeures, jusqu'à la fin de l'empire Plantagenêt qui voit le royaume de France conquérir le comté d'Anjou.</p>
				<p>Louis IX fait construire le château actuel au XIIIe siècle tandis que les ducs d'Anjou le transforment en résidence seigneuriale au XVe siècle. Yolande d'Aragon y donne naissance à René d'Anjou. Au XVIIe siècle, à la suite des troubles des guerres de religion, le roi ordonne la destruction du château, mais seule la partie supérieure des tours est détruite. Il est par la suite transformé en prison, puis en garnison et dépôt de munition pendant la Seconde Guerre mondiale. Au début du XXIe siècle, il héberge la tenture de l'Apocalypse et est un des sites touristiques les plus visités de Maine-et-Loire. Son ouverture au tourisme est gérée par le Centre des monuments nationaux.</p>
			</div>
			<div class="infos">
				<h3>Fiche technique</h3>
				<table>
					<tr>
						<td>Période</td>
						<td>Médiéval</td>
					</tr>
					<tr>
						<td>Type</td>
						<td>Forteresse</td>
					</tr>
					<tr>
						<td>Début constr.</td>
						<td>XIIIe siècle</td>
					</tr>
					<tr>
						<td>Fin constr.</td>
						<td>XVIe siècle</td>
					</tr>
					<tr>
						<td>Destination initiale</td>
						<td>Résidence et défense</td>
					</tr>
					<tr>
						<td>Protection</td>
						<td>Classé MH (1875, 1913)</td>
					</tr>
					<tr>
						<td>Lieu</td>
						<td>Angers (49), France</td>
					</tr>
				</table>
			</div>
		</div>
	</section>
	<section id="actualites">
		<div class="content">
			<h2>Actualités</h2>
			<div class="actu">
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>
			</div>
			<div class="actu">
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>
			</div>
			<div class="actu">
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>
			</div>
			<div class="actu">
				<img src="img/actu.jpg" alt="Texte alternatif"/>
				<h3>Titre de l'actualité</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
				<p><a href="#">Lire la suite</a></p>
			</div>
		</div>
	</section>
	<section id="visiter">
		<div class="content">
			<h2>Visiter le château</h2>
			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2697.021852346613!2d-0.5621886841106488!3d47.4700036053968!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480878c6fd07f131%3A0x689453eed1cc89ea!2sCh%C3%A2teau+d'Angers!5e0!3m2!1sfr!2sfr!4v1453153966667" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
			<div class="infos">
				<h3>Infos pratiques</h3>
				<p>
					<span class="bold">Adresse :</span><br/>
					2 Promenade du Bout du Monde<br/>		
					49100 Angers
				</p>
				<p>
					<span class="bold">Numéro de téléphone :</span><br/>
					02 41 86 48 77
				</p>
				<p>
					<span class="bold">Horaires d'ouverture :</span><br/>
					Du lundi au dimanche, de 9h30 à 18h30
				</p>
			</div>
		</div>
	</section>
	<footer>
	</footer>
</body>
</html>

Au tour du CSS !

Maintenant qu'on a notre code HTML, on va pouvoir mettre en page grâce à CSS.

Dans le sous-répertoire CSS, vous devez avoir un fichier "styles.css" : ouvrez-le dans votre éditeur.

Reste à lier la feuille de styles à notre fichier HTML.

Lier le fichier CSS au fichier HTML

Vous devez savoir faire, alors je vous regarde.

Mais je vous mets la solution ci-dessous :)

  • Afficher / Masquer le code
  • <!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Le château d'Angers</title>
	<link href="css/styles.css" rel="stylesheet"/>
</head>

Edition du CSS : les styles généraux

Il n'y a pas beaucoup de styles généreaux mais concrètement, voilà ce qu'on va éditer :

  • On va préciser la taille du texte par défaut à 1em
  • La police de caractères principale est "Roboto" (qui n'est pas installée sur les ordinateurs. Il va donc falloir l'embarquer avec Google Fonts)
  • La graisse de la police est de 300
  • La couleur par défaut est #48585f
  • On va supprimer la marge par défaut de l'élément body (par défaut, body a toujours une marge qui lui empêche de se coller aux bords de la fenêtre)
  • Pareil, on va s'assurer qu'il n'y aura aucune marge interne.

Edition du CSS : le <header>

Dans le header, il y a deux éléments : une image et un titre.

On va d'abord mettre en forme notre bloc header : pas grand chose à faire si ce n'est mettre une marge haute de 20px pour que notre header ne se retrouve pas trop collé à la fenêtre du navigateur. On va aussi indiquer qu'on souhaite centrer le texte, ce qui aura pour effet de centrer l'image et le titre.

#main-header {
    margin-top: 20px;
    text-align: center;
}

L'image

Ensuite, on va mettre en forme notre image. Vous avez vu, elle est en noir et blanc alors que je vous l'ai donnée en couleurs, et ronde alors qu'elle est carré normalement. Pas besoin d'ouvrir Photoshop, vous allez voir.

On va dans un premier temps lui donner des dimensions : 200px de large et 200px de haut (ça ne devrait pas vous poser de problème).

Passer l'image en noir et blanc avec la propriété "filter" :

La propriété "filter" est très puissante, puisqu'elle permet d'éditer certaines valeurs d'une image, comme sa luminosité, son contraste, sa netteté ou encore sa saturation.

Nous, on souhaite passer l'image en noir et blanc, on va donc utiliser la valeur "grayscale(1)", qui signifie que le niveau de gris sera au maximum, zéro indiquant qu'on souhaite les couleurs initiales.

#main-header img {
	filter:grayscale(1);
}

Plus d'infos sur la propriété "filter"

Arrondir une image avec la propriété "border-radius" :

Une autre fonctionnalité intéressante de CSS, c'est la possibilité de créer des bords arrondis. Parfois plus esthétiques qu'un angle droit classique, les bords arrondis sont très utilisés en CSS.

On peut détourner cette fonctionnalité pour arrondir complètement des images : il suffit de faire des bords arrondis assez grands pour qu'ils forment un cercle.

Ici, on a une image de 200px par 200px. Vu qu'elle a quatre bords, il faudra que chaque arrondi fasse au moins 100px pour former un rond. Je vous montre :

#main-header img {
	filter:grayscale(1);
	border-radius:100px;
}

Et voilà, notre image forme maintenant un cercle !

Le titre

Reste à mettre le titre en forme. Voici les informations pour votre CSS :

  • Taille de caractères de 2.5em
  • Graisse de caractères normale (attention, les titres sont en gras par défaut !)
  • Police de caractères : Bree Serif (même principe que pour Roboto, à retrouver sur Google Fonts)
  • Couleur : #c8a517
  • Toutes les lettres en capitales
  • Afficher / Masquer le code
  • h1 {
	font-size: 2.5em;
	font-weight: normal;
	font-family: Bree Serif;
	color: #c8a517;
	text-transform: uppercase;
}

Ha oui, il y a aussi la barre de séparation :D

Petite difficulté ici, surtout qu'on n'a pas vraiment vu comment faire. On pourrait très bien faire une div et la styler mais ce ne serait pas une très bonne solution. Ce qu'on veut, c'est qu'APRES chaque H1, cette barre de séparation apparaisse.

Si j'ai mis APRES en capitales, ce n'est pas pour rien, car nous utiliser le pseudo-élément ":after". Comme ceci :

h1:after {
	...
}

Ensuite, il ne reste plus qu'à styler ce qu'on souhaite voir apparaître après notre titre, à savoir :

  • Une boite de 150px de large sur 5px de haut
  • Couleur de fond : #c8a517
  • Une marge haute et basse de 20px
  • Affichée en block
  • Centrée sur la page
  • Afficher / Masquer le code
  • h1:after {
	width: 150px;
	height: 5px;
	background: #c8a517;
	display: block;
	margin: 20px auto;
	content: " ";
}
  • Explications
    • Vous noterez qu'on ajoute aussi une propriété "content". Même vide, elle doit toujours être présente quand on utilise ":after" ou ":before"
    • Pour que notre élément accepte des dimensions, il faut l'afficher au format bloc
    • Et pour le centrer, il faut lui donner des marges automatiques sur les côtés

Normalement c'est bon pour notre header !

Le menu principal

On continue avec l'intégration du menu principal. Plutôt simple normalement.

On a mis notre liste dans un élément <nav> mais pas besoin de le mettre en forme, on va directement passer à notre élément <ul>.

Mise en forme de l'élément <ul>

Comme tout élément block, on va pouvoir mettre en forme notre <ul> en lui donnant :

  • Une largeur de 1000px (ce sera la largeur de notre site)
  • Une hauteur de 50px (pas obligatoire mais on peut le renseigner, sinon ce serait soit sur les éléments de liste, soit sur les liens hypertexte)
  • Aucune marge, mais des marges automatiques sur les côtés pour la centrer sur la page
  • Aucun padding
  • Un texte centré

Mise en forme de éléments de liste (<li>)

Pas grand chose à faire de ce côté, si ce n'est les aligner sur une seule ligne. Car par défaut les éléments de liste s'affichent les uns en dessous des autres.

Il faut donc juste changer leur mode d'affichage (display).

Mise en forme des liens hypertexte

Rien de bien compliqué, je vous indique ce qui est attendu :

  • Taille des caractères : 1.2em;
  • Police de caractères : Bree Serif;
  • Couleur : #48585f
  • Lettres en capitales
  • Pas de soulignage
  • Une marge sur les côtés de 10px
  • Afficher / Masquer le code
  • #main-nav ul li a {
	font-size: 1.2em;
	font-weight: normal;
	font-family: Bree Serif;
	color: #48585f;
	text-transform: uppercase;
	text-decoration: none;
	margin: 0 10px;
}

Et voilà pour notre navigation !

La première section (bandeau)

Très simple !

On veut une section avec un fond gris et une image dans un conteneur.

La section

Cette section a un identifiant, ça tombe bien on va pouvoir l'utiliser pour la cibler en CSS.

On va juste indiquer deux choses :

  • la hauteur (350px)
  • la couleur de fond en RGBA : rgba(178,188,193,0.5)

Mise en forme du conteneur "content"

Rappelez-vous, dans le HTML, on s'est dit qu'il fallait mettre un conteneur pour centrer tous les contenus de notre site. Il faut maintenant le mettre en forme, en indiquant :

  • Sa largeur : 1000px
  • Qu'on souhaite le centrer avec des marges automatiques
  • Et par défaut, on souhaitera que le texte soit justifié
  • Explications
    • Cette classe sera utilisée sur toutes les pages du site, pas dans un élément particulier. Donc on cible juste la classe sans préciser l'élémént parent.

Mise en forme de l'image

Ha bah non, rien à faire :)

La deuxième section (présentation)

Là, on a un titre, puis deux blocs : un de texte et un tableau.

Il va falloir mettre en forme le titre, puis faire flotter les deux blocs côte à côte.

Pas besoin de toucher à la section, ni au conteneur qui est déjà mis en forme grâce à sa classe "content".

Mise en forme du titre

Le titre a la mise en forme suivante :

  • Une taille de caractères de 1.8em
  • Graisse de police normale
  • Police de caractères : Bree Serif
  • Couleur : #c8a517
  • Toutes les lettres en capitales
  • Afficher / Masquer le code
  • h2 {
    font-size: 1.8em;
    font-weight: normal;
    font-family: Bree Serif;
    color: #c8a517;
    text-transform: uppercase;
}

Mise en forme du bloc de texte

Pour rappel, notre bloc de texte a la classe "text". C'est elle que nous allons utiliser pour cibler notre élément dans le CSS.

Il aura pour propriétés :

  • 600px de largeur
  • Il flotte à gauche du conteneur

Mise en forme du bloc "Fiche technique"

Pour rappel, notre bloc "Fiche technique" a la classe "infos". C'est elle que nous allons utiliser pour cibler notre élément dans le CSS.

Il aura pour propriétés :

  • 350px de largeur
  • Il flotte à droite du conteneur
  • Couleur de fond : rgba(178,188,193,0.25);
  • Une marge interne de 20px
  • Mais malgré la marge interne, le bloc devra toujours mesurer 350px de large ;)
  • Afficher / Masquer le code
  • .infos {
	width: 350px;
	float: right;
	background: rgba(178,188,193,0.25);
	padding: 20px;
	box-sizing: border-box;
}

On va aussi mettre en forme le titre H3 de ce bloc :

  • Centré
  • Taille de police : 1.2em
  • Graisse de caractères : normale
  • Police de caractères : Bree Serif
  • Couleur : #48585f
  • Capitales sur toutes les lettres
  • Aucune marge haute
  • Afficher / Masquer le code
  • .infos h3 {
	text-align: center;
	font-size: 1.2em;
	font-weight: normal;
	font-family: Bree Serif;
	color: #48585f;
	text-transform: uppercase;
	margin-top: 0;
}

Et c'est autour du tableau :

  • Le texte du tableau doit faire 0.9em
  • Chaque cellule doit faire 50% de large
  • La première cellule de chaque ligne doit être en gras

Pour cibler la première cellule de chaque ligne, il faudra utiliser le sélecteur :first-child.

  • Afficher / Masquer le code
  • .infos table {
	font-size: 0.9em;
}
.infos table td { 
	width:50%;
}
.infos table td:first-child {
	font-weight:bold;
}

La troisème section (actualites)

Le plus difficile, sans être extrêmement complexe.

On a une section sur fond gris, un titre gris, et quatre actualités qui se partagent les 1000px de large.

Mise en forme de la section

Pas grand chose à faire sur la section, mais tout de même, on va lui ajouter :

  • Une couleur de fond : rgba(178,188,193,0.5)
  • Une marge internet haute et basse
  • Et un petit truc pour corriger un problème d'affichage que vous aurez surement
  • Afficher / Masquer le code
  • #actualites {
	background:rgba(178,188,193,0.5);
	padding:20px 0;
	clear:both; /* Cette propriété règlera des bugs comme des boites qui reviennent mal à la ligne */
}

Mise en forme du titre

La seule différence avec les autres titres H2, c'est la couleur. Il va donc falloir indiquer : "dans la section ayant l'ID "actualites", affiche moi un titre en gris.

Mise en forme des blocs d'actualités

Chaque bloc d'actualité est composé d'une image, un titre, et deux paragraphes. Le tout dans un bloc sur fond blanc.

Les blocs d'actus ont les propriétés suivantes :

  • 235px de large (marge interne comprise !!!)
  • 10px de marge interne
  • 20px de marge externe droite
  • Couleur de fond : #fff
  • Chaque boite flotte à gauche
  • Le texte des boites est aligné à gauche
  • Afficher / Masquer le code
  • #actualites .actu {
    width: 235px;
    padding: 10px;
    margin-right: 20px;
    box-sizing: border-box;
    background: #fff;
    float: left;
    text-align: left;
}

On devrait déjà être pas mal, mais normalement, vous devriez vous retrouver avec trois actus sur la même ligne et la quatrième sur une deuxième ligne.

C'est normal : on a calculé pour que tout rentre dans les 1000px : 4 x 235px (largeur de la boite) + 3 x 20px (marge à droite) = 1000px.

Sauf que dans l'état actuel, on a une marge droite de trop, sur le dernier bloc. On va la supprimer sur ce dernier bloc en utilisant le sélecteur ":last-child" :

Et voilà ! On a bien nos quatre blocs côte à côte !

Reste à mettre le contenu des actualités en forme, mais comme vous devenez des experts, je vous laisse vous entrainer tout seul.

je vous mets de toute façon tout le CSS à dispo pour que vous puissiez le décortiquer en cas de besoin.

La quatrième section (visiter)

C'est simple, il faut dire que normalement c'est déjà quasiment fait. Pas besoin de s'étaler sur cette section :)

Le pied de page

Champ libre ! N'hésitez pas à essayer d'aligner des listes de liens par exemple.

Le CSS en entier

body {
	font-size:1em;
	font-family:Roboto;
	font-weight:300;
	color:#48585f;
	margin:0;
	padding:0;
}
#main-header  {
	text-align:center;
	margin-top:20px;
}
#main-header img {
	width:200px;
	height:200px;
	border-radius:100px;
	filter:grayscale(100%);
}
h1 {
	font-size:2.5em;
	font-weight:normal;
	font-family:Bree Serif;
	color:#c8a517;
	text-transform:uppercase;
}
h1:after {
	width: 150px;
	height: 5px;
	content: " ";
	background: #c8a517;
	display: block;
	margin: 20px auto;
}
h2 {
	font-size:1.8em;
	font-weight:normal;
	font-family:Bree Serif;
	color:#c8a517;
	text-transform:uppercase;
	display:block;
}
a {
	color:#c8a517;
}
.bold {
	font-weight:bold;
}
#main-nav ul {
	width:1000px;
	height:50px;
	margin:0 auto;
	padding:0;
	text-align:center;
}
#main-nav ul li {
	display:inline;
}
#main-nav ul li a {
	font-size:1.2em;
	font-weight:normal;
	font-family:Bree Serif;
	color:#48585f;
	text-transform:uppercase;
	text-decoration:none;
	margin:0 10px;
}
.content {
	width:1000px;
	margin:auto;
	text-align:justify;
}
.content p {
	margin:0 0 20px;
}
.text {
	width:600px;
	float:left;
}
.infos {
	width:350px;
	float:right;
	background:rgba(178,188,193,0.25);
	padding:20px;
	box-sizing:border-box;
}
.infos h3 {
	text-align:center;
	font-size:1.2em;
	font-weight:normal;
	font-family:Bree Serif;
	color:#48585f;
	text-transform:uppercase;
	margin-top:0;
}
.infos table {
	font-size:0.9em;
}
.infos table tr td {
	width:50%;
}
.infos table tr td:first-child {
	font-weight:bold;
}
#presentation {
	height:350px;
	background:rgba(178,188,193,0.5);
}
#actualites {
	background:rgba(178,188,193,0.5);
	clear:both;
	padding:20px 0;
}
#actualites h2 {
	color:#48585f;
}
#actualites h3 {
	font-family:Bree Serif;
	font-size:1.2em;
	font-weight:normal;
}
#actualites .content {
	overflow:auto;
}
#actualites .actu {
	width:235px;
	padding:10px;
	margin-right:20px;
	box-sizing:border-box;
	background:#fff;
	float:left;
	text-align:left;
}
#actualites .actu:last-child {
	margin:0px;
}
footer {
	height:300px;
	margin-top:50px;
	background:rgba(178,188,193,0.5);
}

C'est terminé !

Ouf :'/

Sans être des experts du HTML / CSS, vous devriez maintenant disposer de bases solides pour vous lancer dans la construction de votre propre site statique.

On aurait pu approfondir plein de points mais en 15h, vous ne referez pas Facebook.

Entrainez-vous !

Vous n'apprendrez jamais HTML et CSS sans pratiquer. Voici une maquette que vous pourriez essayer de reproduire :

(cliquez sur l'image pour accéder à la maquette intégrée)

Evaluation

Créez votre propre CV en ligne

Objectif : à partir d'une maquette donnée, la reproduire le plus fidèlement possible en HTML/CSS

Critères d'évaluation

  • 1. La ressemblance avec la maquette
  • 2. La propreté du HTML et du CSS
  • 3. En bonus, la prise de risques sur la page "Passion / Hobbies" : soyez inventif :)

Date de rendu

  • Dimanche 14 janvier grand max !

Mode de rendu

Envoyez-moi votre site à l'adresse suivante : romain.menard@univ-poitiers.fr

En cas de problème, une adresse de secours : romain.menard@ymail.com (pas gmail, ymail)

Attention !

Pour l'envoyer, il faudra le compresser au format zip. Sous Windows, faites un clic droit sur le répertoire contenant les fichiers de votre site, puis "Envoyer vers", puis "Dossier compressé".

La maquette

Une seule page à intégrer.

Vous pouvez la télécharger en faisant "clic droit" puis "Enregistrer l'image sous".

Téléchargez l'archive à l'adresse ci-dessous

Cliquez ici pour télécharger l'archive de l'exercice

Informations sur la maquette

Des informations sur la maquette sont disponibles en cliquant sur le lien ci-dessous :

Cliquez ici pour voir les informations sur la maquette

Les détails à ne pas oublier

  • Les métadonnées
  • Importer la police de caractères Nunito (graisses 300 et 700) via Google Fonts
  • Les titres en lettres capitales (en CSS hein)
  • La couleur de fond des éléments de menus survol
  • Et tout ce qui est décrit dans la page d'informations sur la maquette

La conception d'un site web

Penser le contenu du site avant toute chose

Une grosse erreur : se jeter directement sur la création graphique ou le choix d'un thème

Le contenu est à la base de votre site

  • Un site web est avant tout un support de communication
  • Qui dit communication dit :
    • Un émetteur -> Un message -> Un récepteur
  • Il faut d'abord étudier ces trois éléments

Quel émetteur ?

Qui émet le message ?

  • Une entreprise ? Un musée ? Un office de tourisme ?

Si c'est une entreprise, ou un musée :

  • Quelle est sa taille ? (nombre d'employés, chiffre d'affaires)
  • Quelle est sa notoriété ? (locale ? nationale ? internationale ?)
  • Quelle concurrence ? Comment se positionne-t-elle par rapport à elle ?
  • Quels sont ses points forts, ses points faibles ?

En étudiant l'émetteur, on parvient à dégager les objectifs de communication.

Quel récepteur ?

Le récepteur, c'est le public cible :

  • Quel est son âge ?
  • Quel est son sexe ?
  • Quelle est sa position géographique ?
  • Quelle est sa catégorie socio-professionnelle ?
  • Quelle est son expérience avec l'outil web ?

Le profil du public cible aura une incidence sur le ton employé dans le texte, mais aussi dans l'apparence du site.

Quel message ?

Grâce aux questions précédentes, on saura :

  • Sur quoi communiquer (l'émetteur)
  • Et comment communiquer (le récepteur)

Quel est l'objectif du site auprès de l'internaute ?

  • L'internaute doit s'être informé sur la marque (vitrine)
    • Donner des informations, déclencher une prise de contact, du bouche à oreille, etc.
  • L'internaute doit s'être informé sur les produits de la marque (catalogue)
    • Déclenche une vente via un autre support en mettant les produits en valeur
  • L'internaute doit avoir une meilleure image de l'émetteur (institutionnel)
    • Déclenche un partenariat, un investissement, la fidélisation de l'internaute
  • L'internaute doit acheter des produits en ligne (boutique)

Que mettre en avant sur le site ?

Quels types de contenus en priorité (images, vidéos, textes) ?

Qu'est-ce que l'utilisateur doit faire sur le site ?

  • Le visiteur arrivera sur le site avec un objectif précis :
  • Comment y répondre en un minimum de clics, faire en sorte qu'il trouve facilement les informations dont il a besoin ?

Le plan du site

En listant les rubriques qu'il y aura sur votre site

Attention à bien les hiérarchiser :

  • Avec des rubriques principales (thématiques principales)
  • Et des sous-rubriques (segmentation des thématiques principales en plusieurs pages)

Exemple de plan du site : L'office de tourisme de Poitiers

L'arborescence du site

Du plan du site dépend l'arborescence des pages

  • On définit les rubriques principales
  • Puis les rubriques de niveau 2
  • Puis les rubriques de niveau 3
  • etc.

Elle donne un aperçu visuel de la hiérarchie des contenus

Elle donne aussi un aperçu du parcours de l'utilisateur sur le site

Un morceau de l'arborescence du site de l'OT de Poitiers

plan du site

La formalisation des besoins/des objectifs

Grâce à des "livrables"

  • La note d'intention
  • Le cahier des charges
  • Le zoning / Le Wireframe (ou Mockup)
  • Le storyboard

La note d'intention

C'est un document synthétique (2 ou 3 pages)

C'est elle qui initialise le projet

  • Elle reformule les besoins du client
  • Elle propose des solutions ergonomiques, techniques, etc...

Elle sert de support au cahier des charges

Plan type d'une note d'intention :

  1. Présentation générale
    1. Présentation du commanditaire
    2. Présentation du projet
    3. Présentation des objectifs
    4. Présentation du public cible
  2. Etat de l'art
  3. Concept proposé / Fonctionnalités
  4. Solution technique
  5. Arborescence proposée

Exemple de note d'intention

Le cahier des charges

Plus détaillé que la note d'intention, c'est le document référence du projet.

  • Il garantit une bonne compréhension entre le commanditaire et le prestataire.

Il explicite :

  • Les objectifs
  • L'arborescence
  • Le budget / Le planning
  • Les fonctionnalités et prestations attendues
  • Les maquettes du site
  • Etc...

Pour en savoir plus :

"Exemple de cahier des charges pour votre site internet"

Le zoning

C'est la première représentation visuelle de votre site.

Elle est schématique, aucune considération graphique.

L'objectif du zoning est de définir l'organisation de chaque page, et les fonctionnalités dans chacune des zones des pages

Un zoning, ce n'est pas ça

Un zoning, c'est ça

Ou ça

Choisir les bons outils

  • Le papier et le crayon
  • Word, mais pas idéal
  • Un outil en ligne : Draw.io
  • Un autre outil en ligne : Wireframe.cc
  • Encore un autre outil en ligne : Mocqups
  • Encore encore un autre outil en ligne : Cacoo
  • Un outil à installer sur son ordinateur : Pencil Project

Et ensuite ?

Il reste plusieurs étapes de conception :

  • La rédaction des contenus
  • La création graphique ou le choix du thème
  • L'intégration de la maquette si création graphique
  • Le développement des fonctionnalités / Installation et configuration d'extensions
  • La mise en ligne

La création graphique

En communication, le graphisme s'adapte à sa cible :

Sur le web, c'est la même chose

Site web de Skyrock - Site web de France Culture

D'où l'importance de définir sa cible en amont

Le graphisme découle :

  • du message qu'on souhaite faire passer
  • à qui on doit le faire passer (public cible)

Qu'est-ce qu'un bon graphisme sur le web ?

Il n'est pas forcément "beau"

  • Le "beau" ne veut rien dire

Il doit être fonctionnel

  • Il doit aider l'internaute à trouver le contenu et y accéder

Il doit être vecteur du message diffusé

  • En représentant la marque auprès de la cible

Il doit cependant répondre à des codes, à des tendances

Le "bon goût" en webdesign, c'est le respect de codes.

On acquiert ces codes grâce à de la veille.

Quelques sites pour votre veille :

Le choix des couleurs

Sur le web, les couleurs ont du sens

Quelle couleur pour quel élément de mon site ?

  • Le fond de la page
  • Les titres
  • Les liens hypertexte et boutons
  • Etc.

Il ne faut pas abuser du nombre de couleurs

  • Généralement deux ou trois couleurs, en harmonie
  • La couleur principale doit être sobre et cohérente avec le message
  • On peut se servir des couleurs d'un logo existant

Attention au contraste entre le texte et son arrière plan

  • Ce texte est absolument illisible
  • Ce texte aussi...

Outils pour vous aider dans le choix de vos couleurs

Le choix de la typographie (polices de caractères)

Choix de plus en plus important en graphisme web

  • Auparavant, le choix était limité
  • Depuis quelques années, on peut utiliser celles qu'on veut
  • Mais gare aux abus... Et aux fautes de goût

Limiter à trois polices maximum

  • Une pour les titres
  • Une pour le texte en général
  • Une pour des éléments divers à différencier

Choisir des polices lisibles

  • Certaines ne sont pas conçues pour de longs paragraphes
  • Laquelle des polices ci-dessus vous semble la plus adaptée ?

Choisir des polices en accord avec votre message

  • Les polices manuscrites représentent plus le luxe, le rafinement
  • D'autres apparaîtront plus dynamiques
  • Et d'autres seront plus sobre et passe partout
  • A vous de choisir !

La hiérarchisation visuelle du texte

En jouant sur la taille du texte : les titres seront généralement écrits plus grands que le reste

En jouant sur la g

Proscrivez le Comic Sans MS

  • C'est moche, et ça vous décrédibilise
  • Sauf si votre site s'adresse à des enfants (et encore)

Des ressources pour trouver la police de vos rêves

La largeur de votre site

Pendant longtemps, on choisissait des largeurs fixes. Aujourd'hui la largeur doit s'adapter à l'écran de l'internaute, car les formats et résolutions d'écran se multiplient (ordinateurs de bureau, tablettes, smartphones, etc.). Les sites qui s'adaptent à la largeur des écrans sont dits "adaptatifs" ou "responsive". C'est aujourd'hui une norme : on ne sort pas un site sans sa version adaptative. Si vous allez sur le site de l'Université de Poitiers, redimensionnez la fenêtre de votre navigateur pour arriver à un format type mobile, la mise en page va s'adapter.

Ergonomie et accessibilité

Ergonomie et accessibilité

Le graphisme web, ce n'est pas que de l'habillage.

Il doit permettre de faciliter l'accès à votre contenu

  • En mettant en valeur les élements de navigation du site
  • Grâce à des couleurs et des icones bien choisies
  • Grâce à des couleurs et des icones bien choisies
  • Et bien d'autres choses...

A lire impérativement : Principes à suivre pour un site web de qualité

L'interface du site doit de permettre à tout internaute de réaliser les tâches souhaitées de manière efficace et confortable.

Placer l'utilisateur au centre de la conception du site web.

Chaque utilisateur est différent

  • Ses attentes
  • Ses habitudes et connaissances
  • Son équipement
  • Son aptitude physique et mentale

Un site web ergonomique doit s'adapter à ces 4 critères

Lisibilité :

  • Hiérarchiser (titres, sous-titres, etc...)
  • Couleur du texte
  • Taille du texte
  • Police de caractères

Se repérer sur le site

  • En conservant une structure de page homogène
  • En hiérarchisant le contenu de la page
  • En mettant en place un fil d'ariane
  • En offrant la possibilité de revenir en arrière
  • En indiquant visuellement sur quelle rubrique on se trouve

Accéder facilement à l'information

  • Avec des liens vers les rubriques du site dès la page d'accueil
  • En proposant des intitulés de menus clairs et pertinents
  • En proposant un nombre de rubriques restreint dans un menu
  • En optant pour la règle des 3 clics
  • Avec un plan de site (en pied de page, ou page dédiée)

Accéder rapidement à l'information

  • En optimisant le temps de chargement des pages, par un code de qualité, des images redimensionnées et optimisées pour un affichage web, ect.

Faciliter la navigation

  • Un menu clair et visible
  • Des liens hypertextes visuellement identifiables
  • Des liens hypertextes aux intitulés explicites
  • Permettre la navigation au clavier

Accessibilité

  • Un site web doit pouvoir être consulté de tous, y compris les handicapés visuels, auditifs, moteurs, neurologiques et personnes âgées.
  • Des standards du W3C à respecter : depuis 1997, l'Initiative sur l'Accessibilité du Web
  • Une norme : WCAG

Pour aller plus loin

La rédaction pour le web

La rédaction pour le web

La lecture sur écran est plus lente que sur papier bien que la qualité des écrans se soit améliorée

Un internaute est confronté à une masse de contenus.

Il doit déterminer rapidement si le contenu est pertinent

Il faut donc optimiser sa lecture

Optimiser la lecture de l'internaute

Par la rédaction du texte

Par sa mise en forme

Par la rédaction du texte

Base de la rédaction web : la pyramide inversée

On écrit les informations importantes en premier :

Du plus général au plus spécifique

Les 5 W : Who, What, Where, When, Why

Faire des titres, des intertitres

Identifie le bloc de texte qui suit

Permet une coupure à l'internaute, à la fois visuelle et cognitive

Optimise le référencement sur les moteurs de recherche

Ecrire court et simple

Favorise une lecture rapide

De préférence : 5 phrases max. par paragraphe

Employez des mots courts, connus de la cible (pas trop de jargon)

Evitez les lourdeurs de langage "que","qui"...

Employez la forme active, adressez vous à l'internaute

Un texte long peut être indispensable

Une information peu nécessiter beaucoup de texte

C'est à l'internaute de choisir ou non de lire

Il faut lui optimiser sa lecture...

...et lui fournir une version imprimable

Par la mise en forme du texte

L'importance de la typographie

Ecrire assez gros, mais sans étouffer la page

Ne pas choisir n'importe quelle police

Limiter le nombre de polices (2, 3 maximum)

Faire correspondre la taille de police à la hiérarchie du contenu

Et banissez le Comic Sans MS : c'est moche et ça vous décrédibilise

Du contraste ! Pardon, du contraste

Il doit être fort (noir sur blanc ou gris clair = optimal)

N'écrivez pas par dessus des motifs

Evitez les applats de couleur flashy

Aérez votre texte, avec parcimonie

Interlignage suffisant, sans casser la continuité de la lecture

Ne pas trop espacer les mots

Ne pas trop espacer ni rapprocher les caractères

Mettez votre contenu en valeur

Utilisez les listes à puces

  • Pour ordonner, organiser et optimiser la lecture d'un texte

Préférez mettre du texte en gras au soulignement

  • Le soulignement est pour les liens hypertextes. Ne pas trop abuser du gras.

PROSCRIVEZ L'ECRITURE EN LETTRES CAPITALES

  • C'EST DIFFICILEMENT LISIBLE ET ON DIRAIT QUE VOUS CRIEZ (pas très accueillant)

Pas d'animations de texte...

Ne faites pas défiler votre texte

Et ne le faites pas clignoter !!!

Pour aller plus loin

Licence

Tout le contenu de ce site est sous licence Creative Commons BY-NC-SA

BY-NC-SA