Créer sa première page en HTML et CSS
Mais c'est quoi le HTML ?
C’est en HTML que vous écrirez ce qui doit être affiché sur une page : du texte, des liens, des images… En “français”, cela consiste à dire par exemple : “Ceci est mon titre”, “Ceci est mon menu”, “Voici une image à afficher”, etc.
Et le CSS dans tout ça ?
La couche CSS permet d’appliquer à une page HTML des modifications d’apparence.
Le CSS a besoin d’une base en HTML pour fonctionner. C’est pour cela qu’on apprend d’abord à coder en HTML avant de s’occuper du style en CSS.
Les pages sans CSS sont donc pauvre graphiquement.
Le code CSS s’écrit dans une feuille de style représenté par un fichier style.css
Comment créer sa première page en HTML et CSS ?
Pour créer une page web en HTML, il suffit de créer un fichier ayant l’extension
.html. Ce fichier s’ouvre dans le navigateur web simplement en faisant un double-clic dessus.Pour l’éditer, il suffit de l’ouvrir avec un IDE (Notepad++, visual code, sublime Text…).
Code de base d'une page HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<meta name="description" content="Description de la page">
<meta name="keywords" content="mots-clés, de, la, page">
<meta name="author" content="Auteur de la page">
<meta name="robots" content="index">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
</head>
<body>
<header>
</header>
<main>
<h1>Ma première page HTML</h1>
<p>Ceci est un paragraphe de texte.</p>
</main>
<footer>
</footer>
</body>
</html>
Que veut dire ce code ?
- On déclare le type de document via la balise doctype.
- On détermine la langue de la page HTML.
- On ouvre la balise HEAD et on y ajoute les balises de configurations de la page (Encodage, Titre, description, auteur, indexation, appel de style CSS, favicon…)
- On ouvre la balise BODY qui accueillera le contenu de notre page HTML : Le Header, le Main et le Footer.