Créer un site web avec HTML et CSS
Bienvenue dans mon petit tutoriel d'HTML et CSS, ces langages sont très simples à apprendre et permettent de comprendre comment toutes les pages web sont créées.
Pour ceux qui ont plus de temps ou veulent plus d'informations, je conseille ce tutoriel html de openclassrooms.
Un fichier... HTML
English here!Exercice 1
Créez un fichier .html et affichez la page dans le navigateur Firefox :
Je m'appelle Robert !
Comment ça
va aujourd'hui cher lecteur ?
- sous linux, on a toujours un bon éditeur de texte, ouvrez l'éditeur de texte en appuyant sur la touche ⊞ Win, en tappant
textepuis en cliquant sur éditeur de texte, sous Windows on peut aussi télécharger notepad++, sous Mac, Window ou Linux, je conseile Atom, - écrivez le texte ci-dessus en passant plusieurs fois à la ligne,
- enregistrez le fichier en cliquant sur Fichier > Enregistrer (raccourci Ctrl+S),
- donnez un nom terminant par
.htmlcommebla.html, - allez dans le dossier
Documents/, créez un dossier avec votre nom et allez dedans, - ouvrez les fichiers en cliquant sur l'icône en bas du gestionnaire de fichiers,
- allez dans
Documents/robertoù bien sûrrobertest votre nom, vous y voyez votre fichier html ainsi que l'icône d'une planète, ce qui signifie que c'est une page web, double cliquezsur le fichier, ou clic droit > Ouvrir avec Firefox pour afficher votre page,- retournez dans l'éditeur de texte, modifiez le texte, enregistrez,
- retournez dans Firefox, rafraichissez la page en cliquant sur la flèche tournante en haut à gauche de l'écran (raccourci Ctrl+R).
Il est également possible d'aller sur codepen.io, de ne pas traduire la page en français, d'y cliquer sur Create → New Pen et d'y écrire dans le bloc HTML. L'interface peut être changée en cliquant sur Change View et en redimensionnant les panneaux CSS et JS dont nous n'avons pas encore besoin.
Quel est la différence entre votre code et la page ?
Réponse: La page ne passe pas à la ligne.
En fonction de votre navigateur, vous verrez peut-être que les accents ne passent pas bien, le code <meta charset="utf-8"/> que nous
verrons plus tard règle ce souci.
En HTML quand on passe à la ligne on fait des paragraphes, mais pour ça, on a besoin de savior ce qu'est une balise !
Exercice 2
Mettez un mot en gras avec <strong></strong> :
Je m'appelle <strong>Robert</strong> !
Comment ça
va aujourdhui cher lecteur ?
<strong> se lit commencer à mettre en gras
et </strong> se lit terminer de mettre en gras.
On parle de la balise strong.
On peut aussi dire que <strong> se lit ouverture de la balise strong
et </strong> se lit fermeture de la balise strong
Maintenant, à toi ! Met en italique un autre mot avec la balise <em></em> :
Je m'appelle <strong>Robert</strong> !
Comment ça
va <em>aujourdhui</em> cher lecteur ?
strong veut dire fort en anglais, donc mettre en gras c'est comme écrire plus fort, ou on le met fort en évidence,
em est le raccourci de emphase, on met le texte en évidence doucement, on le met en emphase.
Exercice 3
Faites des paragraphes avec <p></p> pour passer à la ligne :
<p>Je m'appelle Robert !</p>
<p>Comment ça
va aujourdhui cher lecteur ?</p>
Exercice 4
Entre les paragraphes, on met des titres, le premier niveau c'est h1 puis h2, h3... jusque h6.
<h1>Site de Robert</h1>
<p>Je m'appelle Robert !</p>
<h2>Études</h2>
<p>J'aime l'informatique.</p>
<p>J'ai fait mes études à l'ULB.</p>
<h2>Compétences non informatique</h2>
<p>Je sais jongler avec 3 balles.</p>
<p>Je danse avec beaucoup d'énergie.</p>
Exercice 5
On peut faire des listes à puces avec ul et des listes ordonnées avec ol.
Chaque élément de liste sera dans une balise <li>.
<p>Mes compétences informatiques :</p>
<ul>
<li>C++</li>
<li>Python</li>
<li>Java</li>
</ul>
<p>Comment faire un site web :</p>
<ol>
<li>Apprendre Html</li>
<li>Apprendre Css</li>
<li>Apprendre Python et Django ou Php</li>
</ol>
Exercice 6
On peut faire des liens avec <a href="cible_du_lien"></a>.
<!-- page1.html -->
<p>Va voir mon <a href="page2.html">autre</a> page
ou consulte <a href="https://robertvandeneynde.be">mon site</a> personnel.</p>
<!-- page2.html -->
<p>Wow !</p>
Exercice 7
On peut faire des liens internes avec id="nom" et href="#nom" :
<!-- page1.html -->
<p>Va voir ma <a href="#conclusion">conclusion</a> sur cette page
ou la <a href="page2.html#conclusion">conclusion</a> de l'autre page.</p>
<p>
Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici. Un long texte ici.
</p>
<h2 id="conclusion">Conclusion</h2>
<p>Les longs textes c'est rigolo.</p>
<!-- page2.html -->
<h1>Page 2</h1>
<h2 id="un-long-texte">Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2 id="conclusion">Conclusion</h2>
<p>Les longs textes c'est cool.</p>
Exercice 8
Insérer une image téléchargée d'internet avec <img src="nom.png"/>,
on peut imposer la taille en pixel avec height ou width.
<p>Une belle image ci-dessous.</p>
<figure>
<img src="banane.png" />
<img src="banane.png" height="100" />
</figure>
Exercice 9
Englobez le tout dans une balise body, puis rajouter un head
avec la balise <meta href="utf-8"/> pour gérer les accents,
et englobez le tout dans une balise html.
<html>
<head>
<meta charset="utf-8"/>
<title>Magie</title>
</head>
<body>
<h1>Site de Robert</h1>
<p>Je m'appelle Robert !</p>
<h2>Études</h2>
<p>J'aime l'informatique.</p>
<p>J'ai fait mes études à l'ULB.</p>
<h2>Compétences non informatique</h2>
<p>Je sais jongler avec 3 balles.</p>
<p>Je danse avec beaucoup d'énergie.</p>
</body>
</html>
Des couleurs et la mise en forme avec CSS
Exercice 10
Appliquer du css à une seule balise :
<h1>Site de Robert</h1>
<p style="color:green">Je m'appelle Robert !</p>
<h2>Études</h2>
<p>J'aime l'informatique.</p>
<p>J'ai fait mes études à l'ULB.</p>
Pour mettre plusieurs règles, séparez par un point-virgule :
<h1>Site de Robert</h1>
<p style="color:green; background:#fcc">Je m'appelle Robert !</p>
<h2>Études</h2>
<p>J'aime l'informatique.</p>
<p>J'ai fait mes études à l'ULB.</p>
Exercice 11
Pour cible une partie de texte, indiquer une balise span et pour grouper des paragraphes ou des titres on utilise div :
<h1>Site de Robert</h1>
<p style="color:green">Je m'appelle <span style="color:orange">Robert</span> !</p>
<h2>Études</h2>
<div style="color:red">
<p>J'aime l'informatique.</p>
<p>J'ai fait mes études à l'ULB.</p>
</div>
À la place de div, on peut aussi utiliser les éléments section, article, nav, aside et d'autres
pour mieux indiquer ce que l'on veut faire.
Exercice 12
CSS est plus utile quand l'on peut faire des règles générales, genre tous les paragraphes en bleus :
<html>
<head>
<meta charset="utf-8"/>
<title>Magie</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<h1>Site de Robert</h1>
<p>Je m'appelle Robert !</p>
<h2>Études</h2>
<p style="color:green">J'aime l'informatique.</p>
<p>J'ai fait mes études à l'ULB.</p>
<p>Mes compétences informatiques :</p>
<ul>
<li>C++</li>
<li>Python</li>
<li>Java</li>
</ul>
<h2>Compétences non informatique</h2>
<p>Je sais jongler avec 3 balles.</p>
<p>Je danse avec beaucoup d'énergie.</p>
</body>
</html>
Exercice 13
On peut créer des classes pour cibler certains éléments :
<html>
<head>
<meta charset="utf-8"/>
<title>Magie</title>
<style>
p {
color: blue;
}
.important {
color: red;
background: #fcc;
}
.grand {
font-size: 24px;
}
</style>
</head>
<body>
<h1>Site de Robert</h1>
<p>Je m'appelle Robert !</p>
<h2>Études</h2>
<p class="important">J'aime l'informatique.</p>
<p class="grand">J'ai fait mes études à l'ULB.</p>
<p>Mes compétences informatiques :</p>
<ul>
<li>C++</li>
<li class="important">Python</li>
<li>Java</li>
</ul>
<h2>Compétences non informatique</h2>
<p class="important grand">Je sais jongler avec 3 balles.</p>
<p>Je danse avec beaucoup d'énergie.</p>
</body>
</html>
Remarquez qu'on peut attribuer plusieurs classes en séparant les classes avec une espace.
Exercice 14
Finalement, il est plus structuré de mettre le css dans un fichier séparé.
<html>
<head>
<meta charset="utf-8"/>
<title>Magie</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
...
</body>
</html>
Exercice 15
Margin, border, padding et les outils de développement, clic droit sur un élément puis Inspecter (ou Examiner), on y voit les règles appliquées, le modèle de boîte et la possibilité de modifier en live ces attributs. Le raccourci clavier pour ouvrir est Ctrl+Shift+I.
<p>Hello, world.</p>
<p class="commentaire">J'aurais pu écrire en français <em>bonjour le monde</em> mais c'est moins stylé.</p>
.commentaire {
margin: 15px;
padding: 10px;
border: 1px solid black;
}
Essaie sur le paragraphe suivant et détermine pourquoi il est en italique !
J'aurais pu écrire en français bonjour le monde mais c'est moins stylé.
On peut spécifier uniquement un (ou plusieurs) côté(s) :
.commentaire {
margin-left: 15px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
border-left: 3px dotted #ccc;
}
Pour en savoir plus
Pour en savoir plus, je conseille ce tutoriel html de openclassrooms.