DIFFICULTÉ FACILE | 3 HEURES
Pour créer un site web, il faut utiliser 2 langages (qui ne sont pas vraiment des langages mais ça c'est un débat geeko-philosophique !)
- HTML (hypertext markup language) : c'est ce qui vous permettra de mettre du contenu dans votre site web (titres, paragraphes, images, liens). Il y a un premier niveau de mise en page, mais pas très esthétique !
- CSS (cascade style sheet) : c'est ce qui vous permettra de mettre en forme votre site web (couleurs, polices, alignements, mise en page) et le rendre plus beau !.
Toute la mise en forme esthétique de cette page web (fond bleu, gros titre blanc sur noir, petit titre sousligné, taille de police, justification du texte, espacements, affichage de la page centré sur 80% de la taille de votre écran, texte surligné en rose etc) est codé en CSS.
Pour un site web, il y a donc au minimum 2 fichiers :
- Un fichier html, que l'on nomme par convention index.html (votre navigateur internet est concu pour rechercher le fichier nommé index.html sur un serveur donné lorsque vous visitez un site web)
- Un fichier css, que l'on nomme en général style.css et qui devra être appelé dans le fichier html (c'est à dire que l'on va indiquer au navigateur, dans le fichier index.html, où aller chercher le fichier style.css pour qu'il puisse afficher la page web telle qu'on l'a voulue)
Pour de bonnes pratiques de programmation web, il est recommandé de ne jamais écrire de code css dans une page html.
Pourquoi ?
Imaginez que votre site web contient une vingtaine de pages (donc 20 fichiers html) et que soudainement vous décidez que le design ne vous plaît plus et vous voulez changer les couleurs, les polices, les tailles etc. Allez vous modifier le style css dans chacune des 20 pages html ? Non, c'est beaucoup trop fastidieux ! En programmation le moins est le mieux ! Heureusement, le style de TOUT votre site web est contenu dans un seul fichier css, donc un seul fichier à modifier pour changer complètement l'aspect de votre site web !
Un site sans CSS n'a aucune mise en page (ou presque).
Cliquez ici pour visiter le site sans CSS.
HTML : un langage de balises
Commençons par travailler dans le fichier index.html.
Chaque fichier html commence par les lignes suivantes :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon premier site web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Ces lignes permettent au navigateur de comprendre quel type d'alphabet afficher, quel type d'écran prendre en charge, où trouver votre feuille de style css, entre autre.
Tout le contenu de votre page web sera écrit entre les deux balises :
<body>
Contenu de votre site web (liens, images, textes, vidéos etc)
</body>
En effet, en HTML, tous les éléments (titres, paragraphes, liens, images, tableaux, listes etc) sont indiqués entre 2 balises.
Chaque balise peut se retrouver l'une dans l'autre, un peu comme une poupée russe.
Imaginez en effet une page web comme une poupée russe : la plus grosse poupée est obligatoirement la balise <html>, qui englobe les informations pour le navigateur et le contenu de votre page proprement dit, vient ensuite une plus petite poupée également obligatoire, la balise <body>, qui englobe tout ce qui sera affiché à l'écran. Puis, dans la balise body viendront plusieures autres petites poupées, des paragraphes, des titres, des images, etc....
Exemple :
<p> la balise p permet d'écrire un paragraphe </p>
Remarquez que la balise s'ouvre au début (<p>) et se ferme à la fin (</p>). C'est une balise dite "fermante". Il y en a beaucoup de différentes. Nous les verrons bientôt !
Certaines balises n'ont pas besoin d'être fermées, elles sont "non-fermantes". Il y en a très peu, nous en verrons 2.
Pourquoi des balises ?
Lorsque votre navigateur lit et interprète le code HTML, il sait comment afficher chaque élément : les titres en gros, les paragraphes plus petits, les liens sous-lignés, les images affichées... c'est la seule mise en page qu'offre le langage HTML, et cela permet une prise en charge pour les personnes malvoyantes et malentendantes.
Les balises permettent également à votre navigateur (explorer, chrome, firefox) de "comprendre" votre page web et quel est le contenu le plus important.
Les balises de titre :
<h1> Ceci est une balise de titre de niveau 1 </h1>
Exemple :
Ceci est un titre de niveau 1
voir sans CSS
<h2> Ceci est une balise de titre de niveau 2 </h2>
Exemple :
Ceci est un titre de niveau 2
voir sans CSS
<h3> Ceci est une balise de titre de niveau 3 </h3>
Exemple :
Ceci est un titre de niveau 3
voir sans CSS
Les balises de texte :
<p> Ceci est une balise de paragraphe </p>
Exemple :
Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe !
voir sans CSS
Ceci est une balise de retour <br>
à la ligne
Remarquez que cette balise n'est pas fermante ! Elle agit comme le fait d'appuyer sur la touche entrée dans un traitement de texte. Deux balises <br> à la suite sautera une ligne !
Exemple :
Ceci est un paragraphe !
Ceci est un
paragraphe ! Ceci
est un paragraphe !
voir sans CSS
<i> Ceci est une balise de texte italique </i>
Exemple :
Ce texte est en italique
Remarque : cette balise doit être elle même contenue dans un paragraphe pour être bien affichée par tous les types de navigateurs
Exemple de code :
<p> ouverture du paragraphe <i> texte en italique </i> fermeture du paragraphe </p>
Qui va s'afficher comme ceci :
ouverture du paragraphe texte en italique fin de l'italique puis fermeture du paragraphe
voir sans CSS
<strong> Ceci est une balise de texte gras </strong>
Exemple : je suis écrit en gras !
Remarque : cette balise doit être elle même contenue dans un paragraphe pour être bien affichée par tous les types de navigateurs
Exemple de code :
<p> ouverture du paragraphe <strong> texte gras </strong> fermeture du paragraphe </p>
Qui va s'afficher comme ceci :
ouverture du paragraphe texte gras fin de l'italique puis fermeture du paragraphe
voir sans CSS
Balises Utiles :
Les images
<img src = "http://url de l'image"> ceci affiche une image
Exemple de code (à partir d'une image trouvée sur google.ca) :
<img src = "http://juju.fouille.free.fr/drole%20(53).jpg">
Et voici le résultat affiché :
.jpg)
voir sans CSS
CSS : un langage de mise en forme
L'intégralité de la mise en forme de ce site est faite grâce au CSS
- le fond gris pâle
- les tailles et couleurs de police des titres de niveau 2 et 3
- la taille et couleur de police des titres et des liens
- l'alignement du texte (justifié pour les paragraphes, centré pour les titres)
- les exemples de code en rose
- les boîtes blanches
- le centrage des images
- etc
Mais c'est bien sur à vous de personnaliser votre site !
Mettre en place une feuille de style css
Mettre en forme une page web avec css est relativement simple.
Dans le fichier style.css, il suffira de rappeler le nom de la balise pour lui appliquer un style.
Il existe des centaines de style prédéfinis, parfois on se demande comment changer telle couleur, ou centrer tel élément. Allez donc visiter ce site web de temps en temps pour obtenir un glossaire des syles css disponibles avec des exemples de code :
w3scools.com
Voici un exemple. Je veux appliquer une couleur de fond à toute ma page web. La page web dans son entier étant comprise entre les balises <body> </body>.
body {
background-color: rgb(180, 200, 250);
}
Essayez de mettre de la couleur à vos titres ! Essayez la classe css "color".
Voici un glossaire de quelques classes css utiles pour de la mise en page de base :
Glossaire (extrèmement de base) des classes css les plus courantes :
- background-color : change la couleur de fond de la ¨boîte-balise¨
- background-image : insère une image de fond dans la ¨boîte-balise¨
- color : change la couleur de police de la ¨boîte-balise¨
- font-size : change la taille de police de la ¨boîte-balise¨
- text-align : change le type d'alignement du texte de la ¨boîte-balise¨
- text-decoration : permet de souligner, barrer etc le texte de la ¨boîte-balise¨
- margin : défini les marges de la ¨boîte-balise¨
- padding : comme les marges avec une légère différence
- width : défini la largeur de la ¨boîte-balise¨
A vous de jouer !
