Tutoriel n°1 : Le Codage Manuel
Apprendre à coder à la main, c'est comprendre comment fonctionne Internet. C'est la méthode qui offre la plus grande liberté.
⚠️ Rappel important pour la mise en ligne
Dans nos exemples, nous utilisons l'adresse je.cree.mon.site.free.fr.
Vous devez impérativement remplacer "je.cree.mon.site" par votre propre LOGIN Free (celui que vous utilisez pour vous connecter à votre interface de gestion).
Sur la page je.cree.mon.site.free.fr vous pourrez voir le résultat obtenu, votre page perso devrait être identique.
Phase 1 : Les outils indispensables
Pas besoin de logiciel complexe ou payant. Pour coder, il vous faut simplement un éditeur de texte spécialisé.
- Geany (Linux)
- Notepad++ (Windows) : Simple et léger.
- Visual Studio Code (Windows/Mac) : L'outil des pros.
- Le Bloc-notes : Possible, mais fortement déconseillé car il n'affiche pas les couleurs du code.
Phase 2 : Votre premier fichier HTML
Ouvrez votre éditeur, créez un nouveau document et copiez-collez le code suivant :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma Page de Test</title>
</head>
<body>
<h1>Bienvenue sur mon site !</h1>
<p>Ceci est ma première page créée manuellement.</p>
</body>
</html>
🔍 Comprendre les balises utilisées :
| Balise | À quoi ça sert ? |
|---|---|
| <!DOCTYPE html> | Indique au navigateur que c'est un document HTML5 moderne. |
| <html lang="fr"> | La racine de la page. "lang=fr" précise que le site est en français. |
| <head> | Le "cerveau" du site : contient les infos invisibles (titre de l'onglet, réglages). |
| <meta charset="UTF-8"> | Essentiel pour afficher correctement les accents (é, à, ç). |
| <title> | Le nom qui s'affiche dans l'onglet de votre navigateur. |
| <body> | Le "corps" du site : contient tout ce qui est visible sur l'écran. |
| <h1> | Le titre principal de la page. |
| <p> | Définit un paragraphe de texte. |
En HTML, la plupart des balises fonctionnent par paire : une ouvrante <body> et une fermante </body>. Tout ce qui se trouve entre les deux subit l'effet de la balise !
Important : Enregistrez ce fichier sous le nom exact index.html.
Phase 3 : Mise en ligne sur Free
Utilisez un logiciel FTP (comme TransFreeBox client FTP simplifié) pour envoyer vos fichiers :
- Connectez-vous à votre compte.
- À la racine, de votre site.
- Transferrer votre fichier
index.htmlà l'intérieur.
Phase 4 : Améliorer le design
Ouvrez votre fichier index.html et remplacez tout par le code suivant pour ajouter du style (CSS) :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma Page Stylisée</title>
<style>
body {
background-image: url('image-fond.jpg');
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.container {
text-align: center;
background: rgba(0, 0, 0, 0.5);
padding: 40px;
border-radius: 15px;
border: 2px solid #0ea5e9;
}
h1 {
font-size: 3em;
margin-bottom: 10px;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="container">
<h1>BIENVENUE</h1>
<p>Cette page démontre la puissance du codage manuel.</p>
</div>
</body>
</html>
🎨 Décryptage du design CSS (Brillance et Mise en page):
| Propriété CSS | Effet sur votre page |
|---|---|
| background-image | Indique au navigateur quelle image utiliser en fond d'écran. |
| background-size: cover | Force l'image à remplir tout l'écran sans se déformer, peu importe la taille de la fenêtre. |
| display: flex | Active le mode "Flexible" : c'est ce qui permet de centrer les éléments très facilement. |
| justify-content & align-items | Travaillent ensemble pour placer votre texte exactement au milieu (horizontal et vertical). |
| rgba(0, 0, 0, 0.5) | Définit une couleur noire avec 50% de transparence. C'est l'effet "verre fumé". |
| text-shadow | Ajoute une ombre sous les lettres. Cela donne du relief et aide à lire le texte sur l'image. |
| border-radius | Sert à arrondir les angles des bordures pour un aspect plus moderne. |
⌨️ Les symboles clés du CSS :
| Symbole | Nom | Rôle dans le code |
|---|---|---|
| { } | Accolades | Elles encadrent toutes les règles de style d'une balise. |
| : | Deux-points | Sépare le nom de la propriété (ex: color) de sa valeur (ex: white). |
| ; | Point-virgule | Indispensable ! Il indique la fin d'une instruction. |
| . | Le point | Placé devant un mot (ex: .container), il désigne une "classe" personnalisée. |
; ou d'une accolade fermante } peut empêcher tout le design de votre page de s'afficher correctement.
Important : Enregistrez ce fichier index.html.
Phase 3 : Mise en ligne sur Free
Utilisez un logiciel FTP (comme TransFreeBox client FTP simplifié) pour envoyer vos fichiers :
- Connectez-vous à votre compte.
- À la racine, de votre site.
- Transferrer votre fichier
index.htmlà l'intérieur. - Transferrer le fichier
image-fond.jpgà l'intérieur.
Mise en ligne et Ressources
1. L'image de fond : Transférez l'image image-fond.jpg dans votre dossier /code/.
👉 Télécharger le fond bleu ici
2. Votre login : Rappelez-vous de bien vérifier vos URLs avec votre propre identifiant Free.
🌱 Ce n'est que le début...
Félicitations, vous avez créé votre première page ! Mais gardez à l'esprit que ce n'est qu'un aperçu de ce qu'il est possible de réaliser.
Pour construire des sites vraiment professionnels, interactifs et complets, il vous faudra approfondir vos connaissances du code HTML et CSS.
Par la suite, vous découvrirez probablement le PHP, un langage puissant qui permet de rendre vos pages "intelligentes" (comme la gestion de formulaires, de bases de données ou de membres). Chaque ligne de code apprise est un pas de plus vers une liberté totale de création !