Commencer avec le web
Ayfoth
vous propose de réaliser la création suivante :
Bonjour,
si vous êtes là c'est pour commencer à coder des fiches et autres éléments de sites web, mais vous n'y connaissez rien ? Ne vous en faites pas, ici nous allons voir les bases.
Créer un site web ou autre contenu HTML n'est pas compliqué en soi mais il faut commencer par les bases, en effet sans connaissances avancées vous n'allez pas bâtir un nouveau Facebook ,il faut être réaliste. Et n'importe quel codage demande un peu de travail.
Installer les outils de base
Beaucoup d'outils sont disponibles, vous risquez d'être perdus entre tous éditeurs de code, les "frameworks" et autres outils en phase beta.
Ici je vais vous donner les seuls outils nécessaires à la conception d'une page html.
Vous aurez besoin d':
- un ordinateur (ça peut sembler évident)
- un éditeur de texte (Visual Studio Code, Atom, Sublime Text, Notepad ++) ou un éditeur hybride (Dreamweaver)
- un navigateur web (Firefox, Chrome, Opera, Safari, Internet Explorer, Microsoft Edge), vous devrez également tester vos contenus HTML sur un mobile et les vieux navigateurs (IE 8-10)
- un éditeur graphique (GIMP, Paint.net, Krita, Photoshop) pour réaliser vos propres images
- un système de contrôle de versions (dans le cas d'un site web completà), Git étant le plus connu
- un programme FTP (sert à gérer les fichiers de serveurs sur les anciens hébergements web, dans le cadre d'un site complet), Git les remplace de plus en plus. Cyberduck, Fetch et FileZilla sont les principaux programmes FTP.
- un système d'automatisation (Grunt ou Gulp) qui va automatisé les tâches répétitives comme la minimisation du code ou le lancement de tests
Mais dans l'immédiat vous aurez surtout besoin de :
- un éditeur de texte (Visual Studio Code étant celui que je vous recommande)
- deux navigateurs web moderne ( Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge (Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur)).
Ici je vais vous donner les seuls outils nécessaires à la conception d'une page html.
Vous aurez besoin d':
- un ordinateur (ça peut sembler évident)
- un éditeur de texte (Visual Studio Code, Atom, Sublime Text, Notepad ++) ou un éditeur hybride (Dreamweaver)
- un navigateur web (Firefox, Chrome, Opera, Safari, Internet Explorer, Microsoft Edge), vous devrez également tester vos contenus HTML sur un mobile et les vieux navigateurs (IE 8-10)
- un éditeur graphique (GIMP, Paint.net, Krita, Photoshop) pour réaliser vos propres images
- un système de contrôle de versions (dans le cas d'un site web completà), Git étant le plus connu
- un programme FTP (sert à gérer les fichiers de serveurs sur les anciens hébergements web, dans le cadre d'un site complet), Git les remplace de plus en plus. Cyberduck, Fetch et FileZilla sont les principaux programmes FTP.
- un système d'automatisation (Grunt ou Gulp) qui va automatisé les tâches répétitives comme la minimisation du code ou le lancement de tests
Mais dans l'immédiat vous aurez surtout besoin de :
- un éditeur de texte (Visual Studio Code étant celui que je vous recommande)
- deux navigateurs web moderne ( Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge (Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur)).
L'aspect de mon code
Ensuite vous devez réfléchir à l'aspect de votre code.
Pour commencer, posez-vous ces questions :
1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
Ensuite procédez à un petit schéma simplifier sur feuille de papier ou logiciel graphique.
Et il va falloir choisir vos ressources.
- Polices du texte (privilégiez les polices stockés dans Google Fonts)
- Couleurs du thème
- Images
Pour commencer, posez-vous ces questions :
1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
Ensuite procédez à un petit schéma simplifier sur feuille de papier ou logiciel graphique.
Et il va falloir choisir vos ressources.
- Polices du texte (privilégiez les polices stockés dans Google Fonts)
- Couleurs du thème
- Images
Gestion des fichiers
Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. C'est ce que nous allons voir dans cette étape.
Tout d'abord vous devez penser à un endroit sur votre ordinateur pour stocker vos fichiers HTML et autres fichiers en rapport avec vos codes.
Pour un exemple de site web voici les différents documents et dossiers que vous pourriez avoir besoin :
- index.html : ce document contiendra toutes les informations et le contenu de votre code
- un dossier images : un dossier utile pour stocker les images nécessaire à la conception de votre site web
- un dossier styles : un dossier utile pour stocker tous vos documents CSS (nécessaire pour générer l'aperçu de vos sites WEB)
- un dossier script : un dossier utile pour stocker tous vos scripts (javasctipt, PHP, etc)
Les chemins des fichiers.
Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie.
1. Copiez l'image précédemment choisie dans votre dossier images.
2. Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
</head>
<body>
<img src="" alt="Mon image de test">
</body>
</html>
3. La ligne qui contient <img src="" alt="Mon image de test"> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier images et ce dossier se situe dans le même dossier qu'index.html. Pour parcourir l'arborescence des fichiers depuis index.html jusqu'à l'image, le chemin à utiliser est images/votre‑fichier‑image. Par exemple, si l'image est nommée firefox‑icon.png, le chemin sera images/firefox-icon.png.
4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
5. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
Quelques règles générales à propos des chemins de fichier :
* Pour utiliser un fichier qui est dans le même répertoire que le fichier HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple mon-image.jpg).
* Pour faire référence à un fichier dans un sous‑répertoire, on écrira le nom du répertoire, suivi d'une barre oblique (/) suivi du nom du fichier. Par exemple : mon-sous-repertoire/mon-image.jpg.
* Pour faire référence à un fichier qui se situe dans le répertoire parent par rapport au fichier HTML, il faut écrire deux points (..). Par exemple, si votre fichier index.html se situe dans un sous-dossier de site-test et que mon-image.jpg se situe à l'intérieur de site-test, vous pouvez faire référence à votre image mon-image.jpg depuis index.html en écrivant ../mon-image.jpg.
* Ces différentes règles peuvent être combinées autant que nécessaire : par exemple ../sous-dossier/autre-sous-dossier/mon-image.jpg.
Tout d'abord vous devez penser à un endroit sur votre ordinateur pour stocker vos fichiers HTML et autres fichiers en rapport avec vos codes.
Pour un exemple de site web voici les différents documents et dossiers que vous pourriez avoir besoin :
- index.html : ce document contiendra toutes les informations et le contenu de votre code
- un dossier images : un dossier utile pour stocker les images nécessaire à la conception de votre site web
- un dossier styles : un dossier utile pour stocker tous vos documents CSS (nécessaire pour générer l'aperçu de vos sites WEB)
- un dossier script : un dossier utile pour stocker tous vos scripts (javasctipt, PHP, etc)
Les chemins des fichiers.
Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie.
1. Copiez l'image précédemment choisie dans votre dossier images.
2. Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
</head>
<body>
<img src="" alt="Mon image de test">
</body>
</html>
3. La ligne qui contient <img src="" alt="Mon image de test"> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier images et ce dossier se situe dans le même dossier qu'index.html. Pour parcourir l'arborescence des fichiers depuis index.html jusqu'à l'image, le chemin à utiliser est images/votre‑fichier‑image. Par exemple, si l'image est nommée firefox‑icon.png, le chemin sera images/firefox-icon.png.
4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
5. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
Quelques règles générales à propos des chemins de fichier :
* Pour utiliser un fichier qui est dans le même répertoire que le fichier HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple mon-image.jpg).
* Pour faire référence à un fichier dans un sous‑répertoire, on écrira le nom du répertoire, suivi d'une barre oblique (/) suivi du nom du fichier. Par exemple : mon-sous-repertoire/mon-image.jpg.
* Pour faire référence à un fichier qui se situe dans le répertoire parent par rapport au fichier HTML, il faut écrire deux points (..). Par exemple, si votre fichier index.html se situe dans un sous-dossier de site-test et que mon-image.jpg se situe à l'intérieur de site-test, vous pouvez faire référence à votre image mon-image.jpg depuis index.html en écrivant ../mon-image.jpg.
* Ces différentes règles peuvent être combinées autant que nécessaire : par exemple ../sous-dossier/autre-sous-dossier/mon-image.jpg.
Dans le prochain tuto nous verrons les bases du HTML.
Rendus
Personne n'a encore essayé ce tutoriel. Soyez le premier !
Commentaires
Répondre
Vous devez être inscrit et connecté pour pouvoir poster un commentaire.
Juste quelques remarques :
- Parler de FTP, de Git, d'automatisation... dans un tuto d'intro au HTML, tu vas faire fuir les gens :O Est-ce que ça ne serait pas plus simple de laisser ce paragraphe pour un tuto plus avancé ? Vu qu'on a vraiment pas besoin de ces outils pour commencer et que ça peut égarer les gens et faire penser que le code est plus compliqué qu'il n'y paraît =)
- Pourquoi deux navigateurs ? Un seul suffit pour afficher du code ; le deuxième peut être utile pour tester sous Firefox et Chromium-like que le rendu marche bien mais pour commencer un seul suffit.
- Peut-être inclure les liens de téléchargement de VSCode ? Et pour les navigateurs modernes, il ne me semble pas utile de mentionner Internet Explorer, que ce dernier sombre dans l'oubli de l'Internet, on ne s'en portera pas plus mal
Pour ma part, je pense que la section "installer les outils de base" peut être simplifiée : "vous avez juste besoin d'un éditeur de code ==> VSCode et d'un navigateur ==> Firefox/Chrome/Safari". Comme ça, la personne qui veut commencer voit direct les infos utiles o/
Peut-être aussi ajouter un mini-paragraphe pour expliquer rapidement ce que sont le HTML et le CSS ?
- Le HTML permet d'afficher des données dans la fenêtre du navigateur /* image exemple d'un truc en HTML pur */
- Le CSS permet de styliser le HTML pour lui donner un aspect graphique plus sympa /* image exemple du même truc avec du CSS pour que ça soit joli */
Comme ça ça introduit ton prochain tuto sur les bases du HTML !