Bonjour à toi, jeune développeur ! Aujourd'hui, tu vas découvrir comment faire un site web classique. La finalité sera de pouvoir mettre votre site en public grâce à un hébergeur. Nous allons donc voir comment avec github, vous pouvez héberger votre site gratuitement (et bien plus).
- INTRODUCTION
- TABLE DES MATIÈRES
- PRÉ-REQUIS
- FONCTIONNEMENT D'UN SITE WEB
- CRÉER UN SITE WEB
- POUR LES PLUS COURAGEUX
- Un compte github
- Si vous n'en avez pas, rendez-vous sur github.com et créez-en un.
- Si vous êtes sous window
- Installer github desktop ici
- Un éditeur de texte
- Si vous n'en avez pas, je vous conseille Visual Studio Code.
- Un navigateur web
- Tout le monde en a un, donc pas besoin de le télécharger.
Un dépot est un endroit où vous pouvez stocker vos fichiers. Pour créer un nouveau dépôt, rendez-vous sur github.com et cliquez sur le bouton "New" en haut à droite. Pour pouvoir héberger votre site, vous devez créer un dépôt public. Pour cela, cochez la case "Public" et laissez le reste par défaut. Cliquez ensuite sur "Create repository". Il faut que vous appeliez votre dépôt "votre_nom_de_compte.github.io". Par exemple, si votre nom de compte est "toto", votre dépôt s'appellera "toto.github.io".
(Vous pouvez suivre le tutoriel en anglais ici)
A ce stade, vous avez un dépot vide qui est gérer par github-desktop. Pour le moment, il n'y a rien dedans.
Une fois que vous avez setup votre dépôt, vous pouvez commencer à créer votre site. Pour cela, vous devez créer un fichier nommé "index.html" dans votre dépôt Voici un exemple de code HTML :
<!DOCTYPE html>
<html>
<head>
<title>Mon premier site</title>
</head>
<body>
<h1>Bonjour à tous !</h1>
<p>Je suis un paragraphe</p>
</body>
</html>Grâce à github-desktop, vous pouvez voir les changements que vous avez fait. Cliquez sur "Commit to master" et écrivez un message de commit. Cliquez ensuite sur "Commit to master" et "Push origin".
Et maintenant, vous pouvez voir votre site en allant sur "votre_nom_de_compte.github.io" !
Un site web est composé de 3 parties :
- Le HTML
- Le CSS
- Le JavaScript
Le HTML est le langage qui permet de créer la structure de votre site. C'est grâce à lui que vous pouvez créer des paragraphes, des titres, des images, etc. Pour imager, le HTML est le squelette de votre site. Si vous voulez en savoir plus sur le HTML, je vous conseille de lire ce tutoriel.
Ou alors voici quelques exemples de balises HTML :
<!DOCTYPE html>
<html>
<head>
<title>Mon premier site</title>
</head>
<body>
<h1>Bonjour à tous !</h1>
<p>Je suis un paragraphe</p>
</body>
</html><a href="https://www.google.com">Cliquez ici pour aller sur google</a><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo de google"><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Il y a beaucoup d'autres balises HTML, mais je vous laisse découvrir par vous-même.
Le CSS est le langage qui permet de mettre du style à votre site. C'est grâce à lui que vous pouvez changer la couleur de votre texte, la taille de votre texte, etc. Pour imager, le CSS est la peau de votre site. Les fichiers css sont généralement nommés "style.css" et sont stockés dans un dossier nommé "css".
pour l'inclure dans une page HTML, vous devez ajouter cette ligne dans la balise <head> :
<link rel="stylesheet" href="css/style.css">href contient le chemin vers le fichier css.
Si vous voulez en savoir plus sur le CSS, je vous conseille de lire ce tutoriel. Ou alors voici quelques jeu online pour apprendre le CSS :
C'est pas vraiment ce qu'il manque comme jeu pour apprendre le CSS. Voici quelques exemples de code CSS :
h1 {
color: red;
}h1 {
font-size: 50px;
}body {
background-color: black;
}img {
width: 100px;
}Et plein d'autres choses encore.
Le JavaScript est le langage qui permet de rendre votre site dynamique. C'est grâce à lui que vous pouvez faire des animations, des formulaires, etc. Pour imager, le JavaScript est le cerveau de votre site. Les fichiers JavaScript sont généralement nommés "script.js" et sont stockés dans un dossier nommé "js". Le javascript est un langage très puissant, il vas vous permettre de faire intéragir votre site avec l'utilisateur, de faire des formulaires, de faire des animations, etc.
Pour inclure du JavaScript dans une page HTML, vous devez ajouter cette ligne dans la balise <head> :
<script src="js/script.js"></script>src contient le chemin vers le fichier JavaScript.
Si vous voulez en savoir plus sur le JavaScript, je vous conseille de lire ce tutoriel.
Maintenant que vous savez comment fonctionne un site web, vous pouvez commencer à créer le vôtre. Trouvez un thème qui vous plait, une idée de site, etc. et lancez-vous !
Voici quelques sites pour vous aider à créer votre site :
Si vous voulez trouvez des idées de site, vous pouvez aller sur Dribbble.
Si vous voulez trouver des thèmes pour votre site, vous pouvez aller sur ThemeForest.
Et voici une pelleté de site pour vous aider à créer votre site ou bien pour avoir des idées / code :
Pour les plus courageux vous pouvez faire ce qu'on appelle des call API. C'est à dire que vous pouvez faire des requêtes à des API pour récupérer des données et les afficher sur votre site. Vous pouvez donc intégrez des données de météo, images, gifs, etc. sur votre site.
Une API est une interface de programmation qui permet de récupérer des données. Elle est généralement gratuite et vous pouvez l'utiliser pour faire des requêtes à partir de votre site. Une API marche grâce à des URL et à des paramètres. Il existe plusieurs types de requètes (GET, POST, PUT, DELETE, etc.)
vous pouvez voir dans le dossier code/ des exemples de requêtes à des API.
Voici quelques api pour vous aider :