- Qu'est-ce qu'un site web?
- Pourquoi créer un site web?
- Qu'est-ce que le HTML, le CSS et le Javascript?
- Qu'est-ce que le CSS et pourquoi l'utiliser?
- Syntaxe de base du CSS: sélecteurs, propriétés, valeurs
- Qu'est-ce que JavaScript et pourquoi l'utiliser?
- Syntaxe de base de JavaScript: variables, types de données, fonctions, boucles, conditions
- Qu'est-ce que jQuery et pourquoi l'utiliser?
- Comment intégrer jQuery dans un projet
- Syntaxe de base de jQuery
- Sélection d'éléments avec jQuery
- Modification des éléments et de leurs propriétés avec jQuery
- Utilisation de balises HTML supplémentaires: div, span, table, form, etc.
- Styles CSS avancés: transitions, transformations, animations
- Structure de la page de profil
- Intégration de CSS pour styliser la page de profil
- Affichage du nom d'utilisateur et du rang du joueur avec JavaScript/jQuery
- API: Définition et utilisation
- Requêtes Web: Comment elles fonctionnent
- Exemple d'une API de jeux vidéo
- Comment récupérer des données d'une API
- Affichage des données de l'API sur la page de profil du joueur
- Création d'un menu de navigation
- Liens entre les différentes pages du site
- Qu'est-ce que le SEO?
- Comment optimiser son site pour le référencement
Salut! On dirait que tu es prêt à entrer dans le monde passionnant de la création de sites web. C'est super cool! Mais avant de plonger directement dans le vif du sujet, prenons un moment pour comprendre ce qu'est réellement un site web.
Imagine un immense centre commercial. Ce centre commercial est rempli de boutiques. Chacune de ces boutiques est unique. Certaines vendent des vêtements, d'autres des jeux vidéo, certaines proposent même des films à regarder. Dans notre analogie, Internet est ce centre commercial géant. Et chaque boutique? Eh bien, c'est un site web.
Alors, qu'est-ce qu'un site web? C'est un peu comme une boutique virtuelle ou une maison sur Internet. Chaque site web a une adresse unique (qu'on appelle URL, comme "www.google.com") qui te permet de le trouver. Quand tu tapes cette adresse dans ton navigateur web (comme Chrome, Safari ou Firefox), tu es comme un visiteur qui entre dans cette boutique ou cette maison.
Un site web peut contenir toutes sortes de choses: des textes, des images, des vidéos, des jeux et même de la musique. Tu peux y trouver des informations (comme dans un livre ou un magazine), acheter des choses (comme dans une boutique en ligne), jouer à des jeux, ou même discuter avec tes amis.
Il y a une chose super importante à comprendre à propos des sites web. Ils sont faits de code. Oui, du code! Comme dans les jeux vidéo que tu aimes tant. Ce code est écrit dans des langages spécifiques, un peu comme le français ou l'anglais, mais pour les ordinateurs. Les trois langages principaux que nous allons apprendre sont HTML, CSS et Javascript. Ne t'inquiète pas si ces mots te semblent étranges pour l'instant. Nous allons tout décomposer ensemble, étape par étape.
Donc, pour résumer, un site web c'est une sorte de boutique ou de maison sur Internet. C'est un endroit où tu peux partager des informations, des idées, des jeux, et même vendre des choses. Et la partie la plus excitante? Nous allons apprendre à en créer un ensemble!
Maintenant, prêt à construire ta première maison virtuelle? C'est parti!
Alors, tu te demandes peut-être : pourquoi devrais-je créer un site web ? C'est une excellente question, et la réponse est vraiment passionnante !
Tu te souviens de notre centre commercial géant, Internet? Eh bien, créer un site web, c'est comme ouvrir ta propre boutique ou construire ta propre maison dans ce centre commercial. C'est un endroit que tu peux appeler le tien, où tu peux montrer ce que tu aimes, partager tes idées et tes créations avec le monde entier.
Penses-y un instant. Tu adores les jeux vidéo, n'est-ce pas ? Imagine avoir un site web où tu peux partager tes scores, parler de tes jeux préférés, ou même aider d'autres joueurs à améliorer leurs compétences. Cool, non ?
Voici quelques autres raisons pour lesquelles tu pourrais vouloir créer un site web :
- Exprimer ta créativité. Tu aimes dessiner ou écrire des histoires ? Tu pourrais partager ces talents avec le monde sur ton propre site web.
- Partager tes connaissances. Tu es super bon à Rocket League ? Tu pourrais créer des tutoriels ou des guides pour aider d'autres joueurs à s'améliorer.
- Te connecter avec d'autres. Un site web peut te permettre de rencontrer d'autres personnes qui partagent tes passions. Tu pourrais même créer une communauté en ligne.
- Apprendre de nouvelles compétences. Créer un site web te permet d'apprendre des compétences très utiles, comme le codage, qui pourraient même te mener à un emploi passionnant dans le futur.
- Montrer ton travail. Si tu as un hobby ou une passion, comme la photographie ou la musique, un site web peut être un endroit pour montrer ton travail et peut-être même te faire remarquer.
- Gagner de l'argent. À mesure que tu grandis et apprends, tu pourrais même trouver des moyens de gagner de l'argent grâce à ton site web, que ce soit en vendant des produits, en proposant des services ou en affichant des publicités.
Créer un site web, c'est comme construire un pont entre toi et le reste du monde. Et le meilleur ? Tu es aux commandes. Tu décides de ce que tu veux partager, comment tu veux le partager, et ce que tu veux accomplir.
Alors, prêt à construire ton propre pont ? On se retrouve à la prochaine étape !
Super, tu as décidé de construire ton propre site web ! Maintenant, pour y arriver, nous allons devoir utiliser trois outils essentiels : HTML, CSS et JavaScript. Ils sont comme les outils dans la boîte à outils d'un charpentier. Chaque outil a un rôle spécifique dans la construction de ton site web. Alors, voyons à quoi servent ces outils.
HTML signifie HyperText Markup Language. C'est le squelette de ton site web. Si tu penses à un site web comme à une maison, alors HTML serait comme les briques et le mortier qui donnent à la maison sa forme et sa structure.
Dans le HTML, nous utilisons des choses appelées "balises" pour créer différents éléments, comme des titres, des paragraphes, des images, des liens, et bien plus encore. Par exemple, pour créer un paragraphe, nous utiliserions la balise <p>. On peut même y insérer des images ou créer des liens qui mènent vers d'autres pages. C'est vraiment super cool!
CSS signifie Cascading Style Sheets. Si HTML est le squelette de ton site web, alors CSS serait la peinture, le papier peint, et les meubles qui rendent la maison belle et confortable.
CSS te permet de styliser ton site web. Tu peux choisir les couleurs, les polices, la taille des éléments, l'espacement entre les éléments, et même certains effets visuels cool ! Par exemple, si tu veux que le titre de ta page soit rouge, tu pourrais utiliser CSS pour le faire.
JavaScript est le troisième outil dans notre boîte à outils. Si HTML est le squelette de ton site web, et CSS l'habille, alors JavaScript serait le système électrique qui rend la maison fonctionnelle.
JavaScript ajoute de l'interactivité à ton site web. C'est grâce à JavaScript que tu peux avoir des choses comme des boutons qui font quelque chose quand on clique dessus, ou des formulaires qui envoient des informations. En gros, JavaScript permet à ton site web de réagir lorsque les visiteurs font certaines actions.
Donc, pour résumer, HTML, CSS et JavaScript sont les trois outils que nous allons utiliser pour construire ton site web. HTML donne la structure à ton site, CSS le rend beau, et JavaScript le rend interactif. Ces trois outils travaillent ensemble pour créer un site web fonctionnel et attrayant.
Alors, prêt à apprendre à utiliser ces outils et à construire ton propre site web ? Allons-y !
Maintenant que nous savons ce qu'est un site web et pourquoi tu pourrais vouloir en créer un, il est temps de faire un pas de plus et de commencer à apprendre comment en construire un. Nous allons commencer par le début : HTML.
Rappelle-toi, HTML est comme le squelette de ton site web. C'est ce qui lui donne sa structure. C'est comme les briques et le mortier d'une maison, ou les pièces d'un jeu de construction. Sans HTML, ton site web n'aurait pas de forme ni de structure.
Alors, comment commencer avec HTML? Eh bien, tout d'abord, tu vas avoir besoin de deux choses :
Un éditeur de texte : Il s'agit d'un programme sur ton ordinateur où tu peux écrire et modifier ton code. Il existe de nombreux éditeurs de texte gratuits que tu peux utiliser, comme Notepad++, Visual Studio Code ou Sublime Text.
Un navigateur web : Il s'agit du programme que tu utilises pour accéder à Internet (comme Chrome, Safari ou Firefox). Tu utiliseras ton navigateur web pour voir à quoi ressemble ton site web pendant que tu le construis.
Une fois que tu as ces deux choses, tu es prêt à commencer à construire ! Au cours de cette semaine, nous allons apprendre la structure de base d'un document HTML et comment utiliser différentes balises HTML pour créer différents éléments sur ton site web.
Rappelle-toi, il est normal de ne pas tout comprendre tout de suite. Comme pour toute nouvelle compétence, cela prend du temps et de la pratique. Alors, sois patient avec toi-même, et n'oublie pas de t'amuser en cours de route. Après tout, tu es en train de créer quelque chose de vraiment cool !
Avant de commencer à écrire du code HTML, nous devons préparer notre environnement de travail. C'est comme lorsque tu prépares ton espace avant de commencer à jouer à un jeu vidéo. Dans notre cas, l'environnement de travail comprend deux éléments principaux : un éditeur de texte et un navigateur web.
Un éditeur de texte est le logiciel que tu utilises pour écrire ton code. Il y a plusieurs éditeurs de texte que tu peux utiliser. Certains d'entre eux sont très basiques, comme Bloc-notes ou TextEdit. D'autres, comme Sublime Text, Atom ou Visual Studio Code, offrent plus de fonctionnalités, comme la coloration syntaxique qui colore différentes parties de ton code pour te permettre de le lire plus facilement.
Pour commencer, tu peux utiliser n'importe quel éditeur de texte qui est déjà installé sur ton ordinateur. Plus tard, si tu veux essayer quelque chose de plus avancé, tu pourras explorer d'autres options.
Un navigateur web est le logiciel que tu utilises pour visualiser ton site web. Les navigateurs web liront ton code HTML, CSS et JavaScript, et ils l'afficheront comme une page web. Les navigateurs les plus courants sont Chrome, Firefox, Safari et Edge.
Il est important de tester ton site web sur plusieurs navigateurs, car ils peuvent parfois afficher les choses de manière légèrement différente. Mais pour commencer, tu peux utiliser le navigateur que tu préfères.
Voilà, tu es maintenant prêt à installer et à configurer ton environnement de travail. Au cours de cette semaine, tu vas te familiariser avec ton éditeur de texte et ton navigateur web, et tu commenceras à créer tes premières pages web avec HTML. Prêt pour le défi? C'est parti !
Lorsque tu crées un site web, il est essentiel de comprendre comment organiser ton code HTML. La structure de base d'un document HTML sert de fondation à tout ton site web, un peu comme les fondations d'une maison.
Un document HTML a une structure bien définie qui ressemble un peu à une arborescence ou un ensemble de boîtes imbriquées les unes dans les autres. Pour visualiser cela, imagine un ensemble de poupées russes, où chaque poupée (ou chaque "boîte") contient une ou plusieurs autres poupées à l'intérieur.
Un document HTML typique commence avec la déclaration <!DOCTYPE html>. Cette déclaration indique au navigateur que le document est une page web et qu'il doit l'interpréter comme du HTML.
Ensuite, tout le reste du code de ta page web se trouve à l'intérieur d'une grande balise <html>. Cette balise englobe tout le contenu de ton site web.
À l'intérieur de la balise , il y a deux autres balises importantes : <head> et <body>.
La balise <head> est comme le cerveau de ton site web. Elle contient des informations sur la page qui ne sont pas directement visibles sur la page elle-même, mais qui sont utilisées par le navigateur et les moteurs de recherche. Par exemple, le titre de la page (qui s'affiche dans l'onglet du navigateur) est défini dans la balise <head>.
La balise <body> est comme le corps de ton site web. Elle contient tout le contenu qui s'affiche réellement sur la page, comme le texte, les images et les liens.
Voici à quoi ressemble la structure de base d'un document HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Informations sur la page -->
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>Ainsi, la structure de base d'un document HTML ressemble à un ensemble de boîtes imbriquées, chaque boîte contenant des informations spécifiques sur ta page web ou le contenu de ta page web. Comprendre cette structure est la première étape pour créer ton propre site web.
Les balises de structure sont le cadre qui donne à ton site web sa forme et sa structure. Ce sont les "fondations" de ton document HTML. Il existe plusieurs balises de structure clés que tu utiliseras dans presque tous les documents HTML que tu crées.
Voici quelques-unes des balises de structure les plus importantes :
<!DOCTYPE html>
Cette balise est toujours la première ligne d'un document HTML. Elle indique au navigateur que le document doit être interprété comme du HTML.
<html>
Cette balise englobe tout le contenu de ton site web. Elle est toujours placée juste après la déclaration <!DOCTYPE html>.
<head>
Cette balise contient des informations sur la page qui ne sont pas directement visibles sur la page elle-même, comme le titre de la page (qui s'affiche dans l'onglet du navigateur) et les liens vers les feuilles de style CSS.
<title>
Placée à l'intérieur de la balise `, cette balise définit le titre de la page, qui est affiché dans l'onglet du navigateur.
<body>
Cette balise contient tout le contenu visible de ta page web, comme le texte, les images, les liens, etc. Elle est placée juste après la balise <head>.
<header> <main> <footer>
Ces balises sont utilisées pour organiser le contenu à l'intérieur de la balise <body>. Le <header> est généralement utilisé pour le contenu en haut de la page (comme le titre du site et la navigation), le <main> pour le contenu principal de la page, et le <footer> pour le contenu en bas de la page (comme les informations de contact et les liens vers les médias sociaux).
Voici à quoi pourrait ressembler un exemple de document HTML utilisant ces balises de structure :
<!DOCTYPE html>
<html>
<head>
<title>Mon super site de jeux vidéo</title>
</head>
<body>
<header>
<!-- Contenu du header (navigation, etc.) -->
</header>
<main>
<!-- Contenu principal de la page -->
</main>
<footer>
<!-- Contenu du footer (informations de contact, etc.) -->
</footer>
</body>
</html>En utilisant ces balises de structure, tu peux organiser ton code de manière à ce qu'il soit facile à lire et à comprendre, à la fois pour toi et pour le navigateur web.
Une navigation claire et fonctionnelle est un élément crucial de tout site web. Elle permet aux visiteurs de ton site de se déplacer facilement entre les différentes pages et sections. Pour créer une navigation sur ton site web, tu vas utiliser quelques balises HTML spécifiques.
L'élément de base de la navigation est généralement une liste, que tu peux créer avec les balises <ul> (pour une liste non ordonnée, avec des points) ou <ol> (pour une liste ordonnée, avec des chiffres). Chaque élément de la liste est ensuite défini par une balise <li>. Ces balises seront expliquées plus en détail dans la section sur les balises de texte.
Exemples:
ul
- Élément de liste 1
- Élément de liste 2
ol
- Élément de liste 1
- Élément de liste 2
Mais avant d'aller plus loin, jetons un coup d'oeil à la balise <nav>. Cette balise est utilisée pour définir une section de navigation sur ta page web. Elle est souvent utilisée pour englober les éléments de menu principal de ton site web.
En utilisant la balise <nav>, tu peux indiquer aux navigateurs et aux outils d'accessibilité que la section qu'elle contient est destinée à la navigation. C'est une bonne pratique pour aider à rendre ton site plus accessible et plus compréhensible pour tous.
Voici un exemple de comment tu pourrais structurer une navigation simple avec ces balises :
<header>
<nav>
<ul>
<li><a href="/Page1.html">Page 1</a></li>
<li><a href="/Page2.html">Page 2</a></li>
<li><a href="/Page3.html">Page 3</a></li>
</ul>
</nav>
</header>Dans cet exemple, chaque élément de la liste est un lien vers une autre section de la page. Les liens sont créés avec la balise <a> et l'attribut href, qui seront expliqués plus en détail plus tard.
Comme tu peux le voir, avec quelques balises HTML simples, tu peux créer une navigation efficace pour ton site web. Dans les sections suivantes, nous allons explorer d'autres types de balises qui te permettront d'ajouter encore plus de contenu et de fonctionnalités à ton site.
Maintenant que tu as une idée de la structure de base d'un document HTML, il est temps d'ajouter du texte à ta page web. Il existe de nombreuses balises HTML que tu peux utiliser pour formater et structurer ton contenu écrit.
Voici quelques-unes des balises de texte les plus importantes :
<h1> à <h6>
Ces balises sont utilisées pour les titres et sous-titres. <h1> est généralement utilisé pour le titre principal de la page, et les balises <h2> à <h6> sont utilisées pour les sous-titres, avec <h2> étant plus important que <h3>, et ainsi de suite.
<p>
Cette balise est utilisée pour les paragraphes de texte. Chaque fois que tu veux commencer un nouveau paragraphe, tu utiliseras une nouvelle balise <p>.
<strong> et <em>
Ces balises sont utilisées pour mettre en évidence une partie de ton texte. <strong> rend le texte en gras et <em> le rend en italique.
<span>
Cette balise est comme une version en ligne de la balise <div>. Elle n'ajoute aucun formatage par défaut, mais elle est utile pour appliquer du style à une petite portion de texte ou pour grouper un petit ensemble d'éléments.
<ul> et <li>
Ces balises sont utilisées pour créer des listes non ordonnées (avec des puces). Chaque élément de la liste est enveloppé dans une balise <li>.
<ol>
Semblable à <ul>, cette balise est utilisée pour créer une liste, mais cette fois-ci, la liste est ordonnée (avec des numéros).
<br>
Permet de faire de saut de lignes forcés. Habituellement, les sauts de lignes sont gérés par les paragraphques, mais dans quelques cas, tu peux utiliser la balise <br> pour forcer un saut de ligne.
Voici un exemple de la façon dont tu pourrais utiliser ces balises pour ajouter et formater du texte sur ta page web :
<body>
<h1>Bienvenue sur mon site de jeux vidéo !</h1>
<p>Salut à tous ! Je suis un grand fan de jeux vidéo, et sur ce site, je vais partager mes aventures dans des jeux comme Rocket League, Apex Legends et Overwatch 2.</p>
<h2>Mes jeux préférés</h2>
<ol>
<li><strong>Rocket League</strong> : J'adore le mélange de football et de course automobile dans ce jeu.</li>
<li><span style="color: blue;"><em>Apex Legends</em></span> : Ce jeu a des combats intenses et des personnages vraiment cool.</li>
<li>Overwatch 2 : Ce jeu a une grande variété de héros et une action rapide.</li>
</ol>
</body>Dans cet exemple, j'ai utilisé la balise <span> pour changer la couleur du nom "Apex Legends" en bleu. Note que normalement, on évite d'utiliser le style en ligne (style="color: blue;") comme dans cet exemple, on préfère utiliser CSS pour ça, mais c'est juste pour te donner une idée de ce que tu peux faire avec <span>.
En utilisant ces balises de texte, tu peux rendre ton contenu écrit facile à lire et bien organisé, à la fois pour tes visiteurs et pour les moteurs de recherche. Dans les sections suivantes, nous explorerons d'autres types de balises qui te permettront d'ajouter encore plus de fonctionnalités à ton site.
Jusqu'à présent, nous avons parlé de la façon de structurer et de formater le contenu de ton site web. Mais qu'en est-il de l'interaction avec tes visiteurs ? C'est là que les balises de formulaire entrent en jeu.
Un formulaire HTML est un moyen pour les visiteurs de ton site de te fournir des informations. Ils peuvent remplir des champs de texte, choisir des options à partir de menus déroulants, cocher des cases, etc. Lorsqu'ils soumettent le formulaire, les informations qu'ils ont fournies sont envoyées pour être traitées.
Voici quelques-unes des balises de formulaire les plus importantes :
<form>
Cette balise est utilisée pour créer le formulaire lui-même. Tous les autres éléments de formulaire seront placés à l'intérieur de cette balise.
<input>
Cette balise est très polyvalente. Elle peut être utilisée pour créer des champs de texte, des boutons, des cases à cocher, des boutons radio et plus encore. Le type d'entrée est défini par l'attribut type.
<label>
Cette balise est utilisée pour fournir une description à un élément de formulaire. Elle est généralement associée à un élément d'entrée par l'attribut for.
<textarea>
Cette balise est utilisée pour créer un champ de texte multiligne. Elle est utile lorsque tu veux que tes visiteurs puissent fournir une grande quantité de texte, comme un commentaire ou une critique.
<select> et <option>
Ces balises sont utilisées pour créer un menu déroulant. <select> crée le menu lui-même, et chaque option du menu est définie par une balise <option>.
Voici un exemple de la façon dont tu pourrais utiliser ces balises pour créer un formulaire simple sur ta page web :
<h1>Dis-moi quel est ton jeu vidéo préféré !</h1>
<form>
<label for="name">Nom :</label><br>
<input type="text" id="name" name="name"><br>
<label for="game">Jeu vidéo préféré :</label><br>
<select id="game" name="game">
<option value="rocket">Rocket League</option>
<option value="apex">Apex Legends</option>
<option value="overwatch">Overwatch 2</option>
</select><br>
<input type="submit" value="Envoyer">
</form>Dans cet exemple, ton visiteur peut entrer son nom et choisir son jeu vidéo préféré à partir d'un menu déroulant. Lorsqu'il clique sur le bouton "Envoyer", les informations qu'il a fournies seront envoyées pour être traitées.
En utilisant ces balises de formulaire, tu peux créer des interactions intéressantes avec les visiteurs de ton site et recueillir des informations précieuses sur eux. Dans les sections suivantes, nous explorerons comment tu peux utiliser d'autres types de balises pour ajouter encore plus de fonctionnalités à ton site.
Utiliser les balises pour l'affichage d'éléments visuels : Donner vie à ton site web avec des images et des vidéos
Le contenu textuel est très important pour un site web, mais les éléments visuels comme les images et les vidéos sont tout aussi importants pour capturer l'attention de tes visiteurs et rendre ton site plus attrayant.
Il existe plusieurs balises HTML que tu peux utiliser pour ajouter des éléments visuels à ton site. Voici quelques-unes des plus importantes :
<img>
Cette balise est utilisée pour ajouter des images à ton site. Tu dois spécifier le chemin de l'image avec l'attribut src (qui est l'URL de l'image) et tu dois toujours inclure un attribut alt pour décrire l'image. C'est utile pour les visiteurs qui ne peuvent pas voir l'image et pour les moteurs de recherche.
<video>
Cette balise est utilisée pour ajouter des vidéos à ton site. Comme avec <img>, tu dois spécifier le chemin de la vidéo avec l'attribut src. Tu peux également inclure des attributs comme controls pour afficher les contrôles de lecture, et autoplay pour démarrer la vidéo automatiquement (mais fais attention avec celui-ci, car il peut être ennuyeux pour certains utilisateurs).
<figure> et <figcaption>
Ces balises sont utilisées pour grouper une image (ou une autre ressource visuelle) avec une légende. <figure> contient l'image et <figcaption> contient la légende.
Voici un exemple de la façon dont tu pourrais utiliser ces balises pour ajouter des éléments visuels à ta page web :
<h1>Bienvenue sur mon site de jeux vidéo !</h1>
<figure>
<img src="images/rocket-league.jpg" alt="Une voiture jouant au football dans Rocket League">
<figcaption>Voici une de mes voitures préférées dans Rocket League !</figcaption>
</figure>
<h2>Regarde-moi jouer à Apex Legends</h2>
<video src="videos/apex-legends.mp4" controls></video>Dans cet exemple, j'ai ajouté une image de Rocket League avec une légende, et une vidéo de moi jouant à Apex Legends. En utilisant ces balises, tu peux rendre ton site beaucoup plus intéressant et engageant pour tes visiteurs.
Avec toutes ces connaissances en main, tu es maintenant prêt à commencer à créer ton propre site web! Les semaines suivantes, nous approfondirons comment styliser ton site avec CSS et ajouter des interactions avec JavaScript. Alors, prépare-toi à aller plus loin dans le monde du développement web !
Maintenant que nous avons exploré le monde des balises HTML, il est temps de créer ton premier fichier HTML! Pour ce faire, nous allons utiliser un éditeur de code appelé Visual Studio Code (ou VS Code). C'est un outil gratuit et puissant qui est utilisé par beaucoup de développeurs web professionnels.
Voici comment tu peux créer ton premier fichier HTML dans VS Code :
-
Ouvre VS Code
Si tu ne l'as pas déjà fait, télécharge et installe VS Code à partir de leur site web officiel. Une fois que c'est fait, ouvre l'application. -
Crée un nouveau dossier pour ton projet
Dans VS Code, tu peux organiser ton travail en projets. Chaque projet est simplement un dossier sur ton ordinateur. Pour créer un nouveau dossier, tu peux aller dans le menu "Fichier" (ou "File" en anglais) en haut à gauche, puis sélectionner "Ouvrir un dossier..." (ou "Open Folder..." en anglais). Choisis un endroit sur ton ordinateur pour créer le nouveau dossier, donne-lui un nom (comme "MonPremierSiteWeb"), puis clique sur "Ouvrir" (ou "Open" en anglais). -
Crée ton fichier HTML
Maintenant que tu as un dossier pour ton projet, il est temps de créer ton fichier HTML. Dans VS Code, tu peux le faire en allant dans le menu "Fichier" (ou "File" en anglais), puis en sélectionnant "Nouveau Fichier" (ou "New File" en anglais). Un nouvel onglet s'ouvrira avec un fichier vide. -
Enregistre ton fichier HTML
Pour que VS Code reconnaisse que tu travailles sur un fichier HTML, tu dois l'enregistrer avec l'extension ".html". Pour ce faire, tu peux aller dans le menu "Fichier" (ou "File" en anglais), puis sélectionner "Enregistrer sous..." (ou "Save As..." en anglais). Assure-toi que ton dossier de projet est le dossier actuellement sélectionné, puis donne un nom à ton fichier. Par convention, la page d'accueil d'un site web est généralement nommée "index.html", donc nous allons utiliser ce nom. Assure-toi que le nom du fichier se termine par ".html", puis clique sur "Enregistrer" (ou "Save" en anglais).
Bravo! Tu as créé ton premier fichier HTML. Tu devrais maintenant voir un nouvel onglet dans VS Code avec le nom "index.html". Dans les sections suivantes, nous allons commencer à ajouter du contenu à ce fichier pour créer la page d'accueil de ton site web. Alors, prépare-toi à passer à la vitesse supérieure dans ta carrière de développeur web!
Prend l'histoire ci-dessous:
Chapitre 1 : La Création d'Overwatch
Les débuts d'un rêve
Il était une fois, une équipe de scientifiques et d'explorateurs de tous les coins du globe qui se réunissaient pour une cause commune : lutter contre l'effet des Omniaques sur le monde.
Les membres fondateurs de cette équipe étaient :
- Dr. Angela Ziegler, plus connue sous le nom de "Mercy"
- Gabriel Reyes, le commandant de l'équipe
- Jack Morrison, un soldat aguerri
L'essor d'Overwatch
Sous la direction de Reyes, l'équipe d'Overwatch a commencé à prendre de l'ampleur et à attirer d'autres talents.
- Torbjörn Lindholm, un ingénieur talentueux
- Ana Amari, une tireuse d'élite hors pair
- Reinhardt Wilhelm, un soldat fidèle et dévoué
Chacun de ces membres a apporté ses compétences uniques à l'équipe, la rendant plus forte et plus résiliente face aux défis à venir.
La première crise
La première grande épreuve à laquelle Overwatch a été confrontée a été la Crise des Omniaques. Cette rébellion de machines contre leurs créateurs humains a été un moment clé dans l'histoire de l'organisation.
- Les batailles ont fait rage dans le monde entier.
- Les membres d'Overwatch ont été mis à l'épreuve comme jamais auparavant.
- Malgré les difficultés, ils ont réussi à vaincre les Omniaques et à mettre fin à la crise.
Avec ces informations, l'exercice serait de mettre en pratique l'utilisation des balises pour structurer le texte. Crée un fichier overwatch.html et formatte le texte de l'histoire en balises web. Par exemple, "Chapitre 1 : La Création d'Overwatch" pourrait être entouré de la balise <h1>, les sous-titres tels que "Les débuts d'un rêve" de la balise <h2>, et les listes de noms des membres d'Overwatch de balises <ul> et <li>. Les paragraphes seraient alors encadrés par la balise <p>.
Félicitations pour avoir terminé la première semaine de notre aventure ensemble! Tu as fait d'énormes progrès et tu as maintenant une solide compréhension du HTML. Tu as franchi la première étape pour devenir un maître du web!
Mais le voyage ne fait que commencer! Cette semaine, nous allons te présenter une nouvelle compétence passionnante: le CSS! Le CSS, ou Cascading Style Sheets, est ce qui donne à ton site web une personnalité, du style et du piquant. Avec le CSS, tu peux transformer un simple document HTML en un chef-d'œuvre visuel. Si le HTML est le squelette de ton site web, le CSS est sa peau, ses cheveux, et sa belle robe ou son joli costume.
De plus, tu vas apprendre comment ces deux technologies, HTML et CSS, travaillent ensemble pour créer des sites web incroyables. Nous allons également travailler sur quelques projets amusants qui te permettront de mettre en pratique ce que tu as appris et d'expérimenter avec ton propre style.
Prépare-toi, attache ta ceinture et prépare-toi à entrer dans le monde coloré et créatif du CSS. Nous sommes ravis de te voir évoluer dans ton voyage pour devenir un développeur web! Allons-y ensemble!
Maintenant que tu as compris comment structurer une page web avec le HTML, il est temps d'aborder un autre aspect tout aussi important du développement web : le CSS.
CSS, qui signifie "Cascading Style Sheets" (Feuilles de style en cascade), est le langage que nous utilisons pour styliser les pages web. Il s'agit essentiellement du "maquillage" de ton site web : il détermine l'apparence de ton contenu HTML - les couleurs, les polices, les mises en page, et plus encore!
Pense au HTML comme à la structure de base d'une maison, alors que le CSS serait la peinture, les meubles, les rideaux et tout ce qui rend une maison agréable à vivre. Sans CSS, un site web serait comme une maison sans décoration, sans personnalité.
Voici un exemple basique de comment CSS peut être utilisé pour styliser une page web:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Bienvenue sur mon site web!</h1>
<p>Voici un paragraphe de texte. Tu remarqueras comment le CSS a modifié l'apparence de ce texte et du fond de cette page.</p>
</body>
</html>Dans cet exemple, nous avons un document HTML basique avec une balise <style> dans l'élément <head>. Cette balise contient notre CSS. Comme tu peux le voir, nous utilisons le CSS pour changer la couleur de fond de la page (body), centrer et changer la couleur de notre titre (h1), et changer la police et la taille de notre paragraphe (p).
Une police, dans le contexte du web, est un design spécifique de caractères, y compris les lettres, les chiffres et les symboles, que tu peux utiliser pour afficher du texte sur ton site web. Choisir la bonne police est crucial pour donner le bon ton à ton site. Par exemple, si tu veux que ton site web ait une allure professionnelle, tu pourrais choisir une police comme "Arial" ou "Times New Roman". Voici un exemple de comment tu pourrais changer la police de ton texte en CSS:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe avec la police "Times New Roman".</p>
</body>
</html>Dans cet exemple, nous utilisons la propriété font-family en CSS pour changer la police de notre paragraphe (p) à "Times New Roman".
Les derniers exemples sont des exemples de CSS intégrés directement dans un document HTML, mais le CSS est généralement stocké dans des fichiers externes .css. Avoir un fichier CSS séparé rend ton code plus organisé et plus facile à gérer, surtout lorsque tu travailles sur de grands projets. De plus, un fichier CSS externe peut être utilisé pour styliser plusieurs pages HTML, ce qui permet d'éviter de répéter le même code CSS dans chaque page.
Voici comment tu peux lier un fichier CSS externe à un document HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Bienvenue sur mon site web!</h1>
<p>Voici un paragraphe de texte. La mise en forme de ce texte et du fond de cette page est déterminée par le fichier CSS externe.</p>
</body>
</html>Dans cet exemple, la balise dans l'élément <head> indique au navigateur où trouver le fichier CSS (styles.css) à utiliser pour styliser la page. Toutes les règles CSS seraient alors définies dans ce fichier styles.css.
Bien que tu aies maintenant une compréhension de base du CSS en tant que langage de style pour le web, il est important de comprendre à quel point il peut être puissant et polyvalent.
L'une des principales utilisations du CSS est la mise en page des éléments sur une page web. Il permet d'aligner des éléments un à côté de l'autre, d'empiler des blocs, ou même de créer des grilles complexes. Par exemple, tu pourrais avoir une barre de navigation horizontale en haut de ta page, avec chaque élément de navigation affiché côte à côte. Voici comment tu pourrais le faire:
.nav-item {
display: inline-block;
}De plus, le CSS peut être utilisé pour créer des animations et des transitions pour dynamiser l'interface utilisateur. Par exemple, tu pourrais changer la couleur d'un bouton lorsque l'utilisateur passe la souris dessus. Cela peut être fait avec la pseudo-classe :hover en CSS:
button:hover {
background-color: #008CBA;
}Le CSS te permet aussi de contrôler l'affichage des éléments. Tu peux choisir de cacher certains éléments ou de les afficher en fonction de certaines conditions. Par exemple, tu pourrais cacher un menu déroulant jusqu'à ce que l'utilisateur clique sur un bouton:
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content {
display: block;
}En outre, le CSS donne un contrôle précis sur les dimensions des éléments. Tu peux définir la largeur, la hauteur, la marge, la bordure et le rembourrage de presque tous les éléments HTML. Par exemple, tu pourrais vouloir que ton en-tête occupe toute la largeur de la page, mais qu'il ait une hauteur fixe:
header {
width: 100%;
height: 80px;
}En somme, le CSS est un outil extrêmement puissant pour contrôler l'apparence et la mise en page de ton site web. Avec une bonne compréhension du CSS, tu peux créer des sites web attrayants et interactifs qui se démarquent de la foule. Alors, prêt à explorer plus en détail ce que le CSS a à offrir? Allez, c'est parti!
La puissance du CSS réside dans sa capacité à styliser précisément chaque élément de ta page web, et pour cela, tu as besoin de comprendre comment fonctionnent les sélecteurs, les propriétés et les valeurs. Allons y plonger!
Un sélecteur est l'outil que tu utilises pour choisir sur quels éléments de ta page HTML le CSS doit s'appliquer. Il y a trois types de sélecteurs de base : par balise, par classe et par ID.
C'est le type de sélecteur le plus basique. Il cible tous les éléments HTML qui utilisent une certaine balise. Par exemple, si tu écris:
p {
color: red;
}Tous les paragraphes de ta page seront colorés en rouge. Simple, non?
Pour cibler un groupe spécifique d'éléments, tu peux utiliser une classe. Tu ajoutes la classe à l'élément HTML avec l'attribut class et tu cibles cette classe dans ton CSS avec un point . devant son nom. Par exemple :
html
<p class="important">C'est une information importante.</p>
<p>C'est une information normale.</p>css
.important {
font-weight: bold;
color: red;
}Seul le paragraphe avec la classe important sera en gras et rouge. Les autres paragraphes ne seront pas affectés.
Si tu as besoin de cibler un seul élément spécifique, tu peux lui donner un ID avec l'attribut id et cibler cet ID dans ton CSS avec un signe dièse # devant son nom. Par exemple :
html
<p id="intro">C'est l'introduction de ma page.</p>css
#intro {
font-size: 20px;
color: blue;
}Seul le paragraphe avec l'ID intro aura une taille de police de 20px et sera coloré en bleu.
Maintenant que tu sais comment cibler tes éléments, il est temps de les styliser avec des propriétés et des valeurs. Une propriété est un aspect du style que tu veux changer, et une valeur est ce que tu veux que cet aspect soit.
Par exemple, dans color: blue;, color est la propriété (ce que tu veux changer) et blue est la valeur (ce que tu veux que ça soit). Il existe des dizaines de propriétés différentes que tu peux utiliser pour personnaliser presque tous les aspects du style de tes éléments.
Le CSS est un outil puissant qui te donne un contrôle total sur l'apparence de ton site web. En maîtrisant les sélecteurs, les propriétés et les valeurs, tu peux créer des designs étonnants et uniques qui captivent ton public. Alors, à toi de jouer!
Donner vie à un site web n'est pas seulement une question de balises et de contenu, mais aussi de design et d'esthétique. C'est là que le CSS entre en jeu, te permettant de peindre et de sculpter ton site comme tu le souhaites. On va explorer ensemble comment utiliser les couleurs, les formats et les espacements en CSS.
Couleurs
La couleur est une composante cruciale de l'apparence de ton site. En CSS, tu as plusieurs façons de spécifier les couleurs. Tu peux utiliser des noms de couleurs pré-définis, des valeurs hexadécimales, RGB (Rouge, Vert, Bleu) ou HSL (Teinte, Saturation, Luminosité).
Voici un exemple avec la propriété background-color (couleur d'arrière-plan) et color (couleur du texte) :
body {
background-color: #f2f2f2; /* Gris clair */
color: #333; /* Gris foncé */
}Dans cet exemple, nous avons utilisé des valeurs hexadécimales pour définir les couleurs.
Formats
Le format concerne la largeur et la hauteur de tes éléments HTML. En CSS, tu peux définir ces valeurs en utilisant différentes unités de mesure, notamment les pixels (px) et les pourcentages (%).
Les pixels sont une unité de mesure fixe. Lorsque tu définis la largeur ou la hauteur en pixels, l'élément aura toujours cette taille, peu importe la taille de l'écran.
Les pourcentages, en revanche, sont une unité de mesure relative. Lorsque tu définis la largeur ou la hauteur en pourcentage, la taille de l'élément sera proportionnelle à la taille de son conteneur parent.
Voici comment tu peux définir la largeur d'une image en pourcentage :
img {
width: 100%; /* L'image prendra toute la largeur de son conteneur */
}Espacements
En CSS, l'espacement fait référence à la marge (margin en anglais) et au rembourrage (padding en anglais). La marge est l'espace entre ton élément et les autres éléments autour de lui, tandis que le rembourrage est l'espace entre le contenu de ton élément et sa bordure.
Voici un exemple de comment tu peux utiliser la marge et le rembourrage :
p {
margin: 10px; /* Ajoute un espace de 10 pixels autour du paragraphe */
padding: 20px; /* Ajoute un espace de 20 pixels entre le texte et la bordure du paragraphe */
}Grâce à ces outils, tu peux commencer à personnaliser l'apparence de ton site web pour le rendre unique et attrayant pour tes visiteurs. C'est un aspect essentiel du développement web, alors n'hésite pas à expérimenter et à trouver le style qui te convient le mieux !
Si tu as déjà joué avec les options de formatage dans un logiciel de traitement de texte comme Word, tu sais combien il peut être amusant de changer la police, la taille, le style et la couleur de ton texte. Le CSS t'offre les mêmes possibilités, mais pour ton site web ! Jetons un coup d'oeil à ces outils.
Polices
La police de caractères, ou font en anglais, est l'apparence de ton texte. Le CSS te permet de spécifier la police utilisée pour le texte sur ton site web. Tu peux utiliser une police standard, ou même télécharger des polices personnalisées à partir de services comme Google Fonts. Voici un exemple :
body {
font-family: "Arial", sans-serif;
}Ici, nous spécifions que le texte de la page doit être affiché en Arial. Si cette police n'est pas disponible sur l'ordinateur de l'utilisateur, la police sans-serif par défaut sera utilisée à la place.
Graisse
La graisse, ou font-weight en anglais, fait référence à l'épaisseur de ton texte. Tu peux rendre ton texte plus épais (gras) ou plus fin (normal). Par exemple :
strong {
font-weight: bold; /* Le texte dans la balise <strong> sera en gras */
}Styles de texte
Le style de texte, ou font-style en anglais, te permet de rendre ton texte italique ou normal. Par exemple :
em {
font-style: italic; /* Le texte dans la balise <em> sera en italique */
}Décoration de texte
La décoration de texte, ou text-decoration en anglais, est utilisée pour ajouter une ligne sous le texte (souligné), au-dessus du texte (surchargé) ou à travers le texte (barré). Par exemple :
a {
text-decoration: underline; /* Les liens seront soulignés */
}Avec ces outils à ta disposition, tu peux vraiment faire en sorte que le texte sur ton site se démarque et attire l'attention de tes visiteurs. N'oublie pas, la manière dont tu présentes ton contenu est tout aussi importante que le contenu lui-même !
Un site web est plus qu'une simple page statique, c'est une plateforme interactive où les utilisateurs peuvent interagir avec différents éléments. Pour rendre cela possible, CSS propose des pseudo-classes qui changent le style d'un élément lorsque certaines conditions sont remplies. En voici quelques-unes que nous allons explorer.
Dans CSS, un "événement" n'est pas tout à fait ce que tu penses. Il ne s'agit pas d'une fête ou d'un match de foot, mais d'une action qu'un utilisateur effectue avec son curseur. Cela peut être le fait de placer le curseur sur un élément (appelé "hover" en anglais) ou de cliquer sur un élément (appelé "active" en anglais).
Hover
La pseudo-classe :hover te permet de changer le style d'un élément lorsque le curseur de la souris se trouve dessus. C'est un excellent moyen d'attirer l'attention sur des éléments importants ou interactifs. Par exemple :
button:hover {
background-color: blue; /* Le fond du bouton devient bleu lorsque tu places ton curseur dessus */
}Active
La pseudo-classe :active change le style d'un élément lorsque tu cliques dessus. C'est une façon géniale de donner un retour immédiat aux utilisateurs pour leur montrer qu'ils ont bien cliqué sur quelque chose. Par exemple :
button:active {
background-color: red; /* Le fond du bouton devient rouge lorsque tu cliques dessus */
}Focus
La pseudo-classe :focus est souvent utilisée sur les éléments de formulaire pour indiquer à l'utilisateur où il est en train d'entrer des données. Par exemple, lorsque tu cliques dans un champ de texte pour commencer à taper, cet élément est en "focus". En CSS, tu peux utiliser la pseudo-classe :focus pour changer le style de cet élément. Par exemple :
input:focus {
border: 2px solid blue; /* La bordure de l'input devient bleue lorsque tu commences à taper dedans */
}Visited
La pseudo-classe :visited te permet de changer le style des liens que l'utilisateur a déjà visités. C'est une bonne manière d'aider les utilisateurs à se rappeler les pages qu'ils ont déjà consultées. Par exemple :
a:visited {
color: purple; /* La couleur des liens visités devient violet */
}First-child et Last-child
Les pseudo-classes :first-child et :last-child permettent de styliser respectivement le premier et le dernier enfant d'un élément parent. Ces pseudo-classes sont très utiles lorsque tu veux appliquer un style particulier au premier ou au dernier élément d'une liste, par exemple :
li:first-child {
font-weight: bold; /* Le premier élément de la liste est en gras */
}
li:last-child {
color: red; /* La couleur du dernier élément de la liste est rouge */
}Il existe encore d'autres pseudo-classes intéressantes comme :nth-child, :not, :empty et bien d'autres. Chacune a sa propre utilité et peut être un outil puissant pour styliser ton site. Alors, n'hésite pas à explorer et à expérimenter pour créer un site qui te plaît vraiment !
Dans le monde du CSS, l'alignement des éléments est une partie cruciale de la conception de ton site web. Un des moyens de le faire est d'utiliser display: inline-block. Voyons ce que cela signifie.
Qu'est-ce qu'un élément inline-block ?
Un élément HTML est par défaut soit un élément en ligne (inline), soit un élément de bloc (block). Un élément en ligne ne commence pas sur une nouvelle ligne et n'occupe que l'espace nécessaire pour son contenu. Par exemple, une balise <span> est un élément en ligne.
À l'inverse, un élément de bloc commence sur une nouvelle ligne et occupe toute la largeur disponible. Par exemple, une balise <div> est un élément de bloc.
La propriété display: inline-block en CSS est un mélange des deux : elle permet à l'élément de se comporter comme un élément en ligne, mais en conservant certaines caractéristiques des éléments de bloc. C'est-à-dire que tu peux définir des dimensions (largeur et hauteur) et des marges comme pour un élément de bloc, mais l'élément ne commence pas sur une nouvelle ligne, il se place à la suite des autres éléments, comme un élément en ligne.
Voici un exemple de l'utilisation de display: inline-block :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier alignement avec inline-block</title>
<style>
.boite {
display: inline-block;
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="boite">Boite 1</div>
<div class="boite">Boite 2</div>
<div class="boite">Boite 3</div>
</body>
</html>Après avoir exploré le display: inline-block, nous allons maintenant voir une autre méthode pour aligner les éléments : Flex, ou flexbox. Flex est un modèle de mise en page CSS qui a été conçu spécialement pour créer des mises en page adaptatives et pour aligner les éléments dans des directions différentes, facilement et efficacement.
Qu'est-ce que Flex?
Flex, c'est un peu comme avoir des super pouvoirs pour aligner et répartir des éléments. C'est incroyablement flexible (d'où son nom) et une fois que tu l'auras appris, tu te demanderas comment tu as fait sans!
Pour utiliser flex, tu dois d'abord le déclarer sur un élément parent, qui devient alors un "conteneur flex". Tu peux le faire en ajoutant display: flex; à ton CSS pour cet élément.
.container {
display: flex;
}Maintenant, tous les enfants directs de cet élément seront traités comme des "éléments flex" et se comporteront selon les règles de flexbox.
Aligner avec Flex
Une des grandes choses avec flex, c'est qu'il te permet de contrôler l'alignement à la fois horizontalement (sur l'axe principal) et verticalement (sur l'axe transversal).
Pour l'alignement horizontal, tu peux utiliser justify-content:
.container {
display: flex;
justify-content: space-between;
}Avec space-between, les éléments seront espacés également, avec le premier élément au début du conteneur et le dernier élément à la fin.
Pour l'alignement vertical, tu peux utiliser align-items:
.container {
display: flex;
align-items: center;
}Avec center, tous les éléments seront centrés verticalement dans le conteneur.
Il y a beaucoup plus à apprendre sur flex, mais c'est un bon début. Commence par jouer avec ces propriétés et tu verras à quel point il est facile de créer des mises en page complexes et responsives avec flexbox!
Nous avons fait un excellent travail pour explorer le monde merveilleux du CSS. Nous avons découvert comment changer les couleurs, sculpter nos pages web, styliser nos textes, animer avec des pseudo-classes et organiser nos éléments. Maintenant, il est temps de rassembler tout cela et de l'appliquer à une vraie page HTML.
Dans ce chapitre, nous allons concrètement utiliser le CSS pour styliser notre site web de profil de jeu. Nous allons donner vie à notre page d'accueil, la rendre plus attrayante, plus organisée et plus interactive. Nous allons apprendre à lier notre fichier CSS à notre fichier HTML, à sélectionner des éléments spécifiques à styliser et à créer des styles globaux pour tout notre site.
C'est ici que l'art rencontre la pratique. Prépare-toi à mettre ta casquette de designer et à donner à ton site web un look digne de toi. C'est parti!
La beauté de la mise en page web réside dans sa division. Le HTML gère la structure et le CSS gère le style. Mais pour que le CSS puisse faire son travail, il doit être relié à la page HTML. C'est comme si le HTML était le squelette et le CSS était la peau et les vêtements. Comment pouvons-nous les relier ? C'est ce que nous allons découvrir dans ce chapitre.
- Créer un fichier CSS : Tout d'abord, nous avons besoin d'un endroit pour écrire nos règles CSS. Dans ton éditeur de code (Visual Studio Code), crée un nouveau fichier dans le même dossier que ton fichier HTML. Nommons-le
style.css. Tu peux le nommer comme tu veux, mais il est commun d'utiliser le nom "style" pour le fichier CSS principal. Assure-toi que l'extension du fichier est bien.css. - Lier le fichier CSS à notre HTML : Maintenant, il est temps de faire connaître à notre fichier HTML l'existence du fichier CSS. Pour ce faire, nous utilisons la balise
<link>. Elle se place généralement dans la section<head>de notre document HTML. La balise<link>a quelques attributs importants que nous devons définir :rel: Cet attribut définit la relation entre le fichier HTML et le fichier auquel il est lié. Pour les feuilles de style, nous utilisons la valeur "stylesheet".href: Cet attribut indique le chemin vers le fichier CSS. Si le fichier CSS se trouve dans le même dossier que le fichier HTML, il suffit d'écrire le nom du fichier. Sinon, nous devons spécifier le chemin complet.
Voici comment cela se présente :
<!DOCTYPE html>
<html>
<head>
<title>Mon site de jeu</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>Et voilà! Tu as maintenant relié ton fichier CSS à ton fichier HTML. Chaque fois que tu modifies le fichier CSS, les changements seront automatiquement appliqués à ta page HTML. C'est comme de la magie! Mais ce n'est pas vraiment de la magie, c'est simplement le pouvoir du développement web. Alors, commençons à jouer avec nos styles!
Maintenant que ton fichier CSS est lié à ton fichier HTML, il est temps de commencer à y ajouter du style! Pour commencer, nous allons créer des styles de base pour notre page d'accueil. Nous allons nous concentrer sur les éléments suivants : la couleur de fond, la police, la taille de la police et l'espacement.
- Couleur de fond : Dans ton fichier
style.css, ajoute une règle pour la balise body. Cette balise représente le corps de ton document HTML. Ajoute la propriétébackground-coloret donne-lui une valeur de ton choix. Par exemple :
body {
background-color: #FAEBD7; /* Cette couleur est appelée AntiqueWhite en anglais */
}Ceci appliquera la couleur de fond à toute la page.
- Police et taille de la police : Toujours dans ton fichier
style.css, ajoute une règle pour la balisep(paragraphes). Ajoute les propriétésfont-familyetfont-size:
p {
font-family: Arial, sans-serif; /* "Arial" est une police, et "sans-serif" est une police de secours au cas où "Arial" ne serait pas disponible */
font-size: 16px; /* "px" signifie "pixels". Tu peux aussi utiliser "em" ou "rem", qui sont des unités relatives */
}Ceci appliquera la police et la taille de la police à tous les paragraphes de la page.
- Espacement : Enfin, ajoutons un peu d'espacement autour de nos paragraphes pour qu'ils ne soient pas collés aux bords de la page. Ajoute la propriété "margin" à la règle pour la balise p :
p {
font-family: Arial, sans-serif;
font-size: 16px;
margin: 20px; /* Cela ajoutera un espacement de 20 pixels autour de chaque paragraphe */
}Maintenant, sauvegarde ton fichier CSS, puis ouvre ta page HTML dans un navigateur. Tu devrais voir les styles que tu as créés! C'est un excellent début, mais il y a encore beaucoup à apprendre. Alors, continuons à explorer le monde merveilleux du CSS!
Le web est rempli de boîtes. En fait, chaque élément HTML sur une page web est considéré comme une boîte dans le monde du CSS. Ça semble simple, n'est-ce pas? Mais attends-toi à une surprise : ces boîtes sont pleines de mystères et de magie!
Le "modèle de boîte" ou "Box Model" en anglais, est une règle fondamentale qui régit la façon dont les éléments HTML sont affichés et interagissent entre eux sur la page. Il englobe des concepts comme la marge (margin), la bordure (border), le remplissage (padding), et le contenu (content) lui-même. C'est un peu comme si chaque élément HTML était un cadeau emballé, avec le contenu du cadeau à l'intérieur, entouré de papier de soie (padding), puis emballé dans du papier cadeau (border), le tout dans un joli sac cadeau (margin).
Ce modèle est un outil très puissant qui te permettra de contrôler précisément l'aspect et la disposition de ta page web. Alors, prépare-toi à déballer le mystère de la boîte modèle CSS !
Imagine que tu es assis sur un canapé. Le rembourrage (ou padding en anglais) est le coussin moelleux qui te sépare des ressorts durs du canapé. Dans le monde du CSS, le padding est exactement cela - un espace rempli qui sépare le contenu d'un élément de sa bordure.
#exemple {
padding: 10px;
}Dans cet exemple, le contenu de l'élément avec l'identifiant exemple a un espace de 10 pixels tout autour, séparant le contenu de la bordure. C'est comme si tu avais ajouté un coussin de 10 pixels entre le texte et la bordure de ton élément.
Le padding augmente la taille totale de l'élément. Par exemple, si ton élément a une largeur de 100 pixels et que tu ajoutes un padding de 10 pixels, la largeur totale de ton élément sera maintenant de 120 pixels (100 pixels de largeur + 10 pixels de padding à gauche + 10 pixels de padding à droite).
Mais ce n'est pas tout! Tu peux également spécifier différents montants de padding pour chaque côté de l'élément en utilisant les propriétés padding-top, padding-right, padding-bottom et padding-left. Par exemple :
#exemple {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}Ici, l'élément a un padding de 10 pixels en haut et en bas, et un padding de 20 pixels à gauche et à droite. Tu peux aussi le simplifier en une seule ligne comme ceci:
#exemple {
padding: 10px 20px;
}C'est le même que l'exemple précédent. Le premier nombre s'applique au haut et au bas, et le deuxième nombre s'applique à la droite et à la gauche.
Le padding est une partie cruciale du modèle de boîte CSS, et il joue un rôle essentiel pour donner de l'espace et du confort à ton contenu, comme un coussin moelleux sur un canapé.
Si le padding est le coussin doux qui sépare ton contenu de la structure extérieure, la bordure (ou border en anglais) est le cadre solide qui entoure cet espace moelleux. C'est comme le bois ou le métal qui entoure le rembourrage et le contenu d'un meuble.
Dans CSS, la bordure est ce qui encadre et délimite ton élément. Tu peux définir sa largeur, son style (comme solide, pointillé, etc.) et sa couleur.
Voici comment tu peux définir une bordure :
#exemple {
border: 2px solid black;
}Dans cet exemple, l'élément avec l'identifiant exemple a une bordure solide, noire et de 2 pixels d'épaisseur.
Tu peux également définir les bordures de chaque côté individuellement avec border-top, border-right, border-bottom et border-left. Par exemple :
#exemple {
border-top: 2px solid black;
border-right: 1px dashed red;
border-bottom: 2px solid black;
border-left: 1px dashed red;
}Ici, l'élément a une bordure en haut et en bas qui est solide, noire et de 2 pixels d'épaisseur, et une bordure à droite et à gauche qui est pointillée, rouge et de 1 pixel d'épaisseur.
Comme le padding, la bordure augmente la taille totale de l'élément. Si ton élément a une largeur de 100 pixels, un padding de 10 pixels et une bordure de 2 pixels, la largeur totale sera maintenant de 124 pixels.
La bordure est une partie essentielle du modèle de boîte CSS. Elle ajoute de la structure et aide à distinguer ton contenu du reste de la page. Il est temps de jouer avec les bordures et de voir comment elles peuvent transformer l'apparence de ton site web !
Imagine que tu es dans une salle pleine de monde. Pour te sentir à l'aise, tu as besoin d'un certain espace personnel autour de toi, non? Dans le monde du CSS, c'est exactement ce que fait la marge, ou "margin" en anglais. La marge est l'espace entre ton élément et les autres éléments autour de lui.
Voici comment tu peux définir une marge pour ton élément :
#exemple {
margin: 10px;
}Dans cet exemple, l'élément avec l'identifiant exemple a une marge de 10 pixels tout autour. Comme avec le padding et la bordure, tu peux définir des marges différentes pour chaque côté de l'élément avec margin-top, margin-right, margin-bottom et margin-left. Par exemple :
#exemple {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}Ici, l'élément a une marge de 10 pixels en haut et en bas, et une marge de 20 pixels à droite et à gauche.
La marge n'affecte pas la taille de l'élément lui-même, mais elle influe sur l'espace qu'il prend sur la page. Si tu as une boîte avec une largeur de 100 pixels, une bordure de 2 pixels, un padding de 10 pixels et une marge de 20 pixels, la boîte aura besoin d'un espace total de 164 pixels de large sur la page.
La marge est un outil puissant pour contrôler l'espacement entre les éléments sur ta page. Avec elle, tu peux donner à chaque élément l'espace dont il a besoin pour briller !
Après avoir parlé des coussins (padding), des frontières (border) et de l'espace personnel (margin), nous arrivons enfin au cœur de la boîte : le contenu. En anglais, on le nomme "content".
Le contenu est l'information que tu veux afficher sur ton site web. Il peut s'agir de texte, d'images, de vidéos, de formulaires, ou de tout autre élément HTML que tu souhaites utiliser.
Voici un exemple d'élément de contenu :
<p id="exemple">Bonjour, je suis le contenu !</p>Et voici comment tu pourrais le styliser avec du CSS :
#exemple {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}Dans cet exemple, l'élément avec l'identifiant exemple a une largeur de 200 pixels et une hauteur de 100 pixels. C'est l'espace que le contenu a pour s'afficher. Autour de cet espace, nous ajoutons 10 pixels de coussin (padding), une bordure de 2 pixels, et 20 pixels d'espace personnel (margin).
Il est important de noter que la largeur et la hauteur définies dans le CSS sont celles de la zone de contenu, et non de la boîte entière. Ainsi, si tu ajoutes du padding, une bordure ou une marge à un élément, l'espace total qu'il prendra sur la page sera plus grand que la largeur et la hauteur que tu as définies.
Le contenu est le véritable héros de ton site web. Il est la raison pour laquelle les gens visitent ton site. Ainsi, lors de la conception de ton site, assure-toi que ton contenu a l'espace nécessaire pour briller, et que tout le reste (padding, border, margin) travaille ensemble pour le mettre en valeur.
Maintenant que nous avons appris comment les éléments HTML sont comme des boîtes que l'on peut modifier, il est temps de découvrir comment les empiler, les aligner et les positionner. Imagine-toi en train de construire une tour avec des blocs. Chaque bloc peut avoir sa propre taille, sa couleur, sa position, son orientation... C'est exactement ce que nous allons faire avec nos éléments HTML!
Les styles CSS offrent un grand nombre de possibilités pour positionner et aligner nos éléments, que ce soit côte à côte, les uns au-dessus des autres, centrés, alignés à gauche... Les possibilités sont infinies et ne sont limitées que par ta créativité!
Donc, attache ta ceinture, car nous allons plonger dans le monde fascinant de l'alignement et du positionnement CSS. Au cours de cette section, tu apprendras comment manœuvrer tes éléments HTML comme un vrai pro du CSS. Et rappelle-toi, la pratique est la clé. N'hésite pas à jouer avec ces nouvelles propriétés et à expérimenter par toi-même. C'est comme ça que tu deviendras un véritable maître du web!
Ah, les floats! Ils étaient une fois la base de la mise en page sur le web. Bien qu'ils soient un peu moins utilisés aujourd'hui grâce à l'apparition de nouvelles propriétés comme Flex et Grid, comprendre comment ils fonctionnent reste une compétence essentielle pour tout développeur web.
La propriété CSS float te permet de prendre un élément de ta page et de le "faire flotter" à droite ou à gauche de son conteneur, ce qui permet aux autres éléments de s'enrouler autour de lui. Ça peut être très utile, par exemple, pour aligner une image à droite ou à gauche d'un bloc de texte, comme dans un magazine.
Voici comment tu peux l'utiliser. Imaginons que tu as une image et du texte dans ton HTML :
<div class="conteneur">
<img src="https://picsum.photos/200" alt="Une belle image" class="flottant">
<p>Ceci est du texte qui entoure une belle image qui flotte à droite.</p>
</div>Dans ton fichier CSS, tu peux utiliser float pour faire flotter l'image à droite du texte :
.flottant {
float: right;
}Et voilà! L'image flotte maintenant à droite du texte, qui s'enroule autour d'elle. Simple, non?
Mais attention! Les éléments flottants peuvent parfois causer des problèmes si tu ne fais pas attention. Par exemple, si un élément flottant est le dernier enfant d'un conteneur, le conteneur peut "s'effondrer", c'est-à-dire ne pas avoir de hauteur. Pour résoudre ce problème, nous utilisons souvent une technique appelée "clearfix", que tu apprendras plus tard.
Dans le prochain chapitre, nous verrons comment aligner les éléments avec Flex, qui est une méthode plus moderne et plus flexible pour organiser ton contenu.
Alignement avec Flex en rangée (row)
L'un des avantages majeurs de l'utilisation de Flex est sa simplicité pour organiser les éléments sur l'axe horizontal, également appelé "row" ou rangée. Il s'agit de la disposition par défaut de Flex.
Pour illustrer ceci, prenons un exemple d'une liste d'éléments que tu souhaites aligner horizontalement :
<div class="conteneur-flex">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>Pour obtenir une mise en page horizontale, tu peux utiliser la propriété display: flex; sur le conteneur :
.conteneur-flex {
display: flex;
}Par défaut, les conteneur ayant display: flex; sans avoir de propriétés flex-direction sont considérer comme flex-direction: row;. C'est aussi simple que ça ! Tes éléments sont maintenant alignés horizontalement.
Maintenant, si tu veux changer l'espace entre les éléments, ou comment ils sont répartis le long de la ligne, tu peux utiliser la propriété justify-content. Par exemple, justify-content: space-between; répartit uniformément l'espace entre les éléments :
.conteneur-flex {
display: flex;
justify-content: space-between;
}Cela crée un bel espacement égal entre chaque élément. Note que l'espace supplémentaire n'est pas ajouté à l'extrémité des éléments, uniquement entre eux.
Dans la prochaine section, nous allons explorer comment utiliser flex-direction: column; pour organiser les éléments verticalement.
Alignement avec Flex en colonne (column)
Après avoir exploré comment aligner les éléments horizontalement avec Flex, passons maintenant à la manière dont nous pouvons organiser les éléments verticalement. C'est là qu'intervient la propriété flex-direction: column;.
Imaginons que tu as une série d'éléments que tu souhaites empiler verticalement. Voici comment tu peux organiser ton HTML :
<div class="conteneur-flex">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>Pour mettre en place un alignement vertical, tu peux simplement définir la direction du flex sur ta classe de conteneur de cette manière :
.conteneur-flex {
display: flex;
flex-direction: column;
}Et voilà, tes éléments sont maintenant empilés verticalement !
Similaire à l'alignement horizontal, tu peux également ajuster l'espacement entre tes éléments en utilisant la propriété justify-content. Par exemple, pour avoir un espacement égal entre les éléments, tu peux faire :
.conteneur-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}Avec Flexbox, la création d'une mise en page attrayante et flexible devient un jeu d'enfant.
Les propriétés à utiliser dans les conteneurs flex
Après avoir vu comment aligner nos éléments en rangées avec flex-drection: row; et en colonnes avec flex-drection: column;, explorons maintenant comment aligner des éléments à l'intérieur de ces espaces flexibles. C'est là qu'interviennent les propriétés align-items et justify-content.
Dans un conteneur Flex, align-items est utilisé pour aligner les éléments le long de l'axe transversal (l'axe perpendiculaire à l'axe principal). Par exemple, si ton conteneur Flex est une rangée (flex-direction: row;), alors align-items va contrôler l'alignement vertical de tes éléments.
En revanche, justify-content est utilisé pour aligner les éléments le long de l'axe principal (l'axe dans le sens du flex-direction). Ainsi, si ton conteneur Flex est une rangée, alors justify-content va contrôler l'alignement horizontal de tes éléments.
Voici comment cela pourrait ressembler dans ton CSS :
.conteneur-flex {
display: flex;
flex-direction: row; /* ou column */
justify-content: center; /* alignement horizontal pour row, vertical pour column */
align-items: center; /* alignement vertical pour row, horizontal pour column */
}Avec ce code, tous les éléments à l'intérieur du conteneur Flex seront centrés à la fois verticalement et horizontalement. C'est ce qui rend Flex si puissant et flexible !
N'hésite pas à jouer avec les différentes valeurs de justify-content (comme flex-start, flex-end, space-between, space-around, space-evenly) et align-items (comme flex-start, flex-end, center, baseline, stretch) pour voir comment elles affectent l'alignement de tes éléments.
En conclusion, l'alignement avec Flex est une puissante fonctionnalité qui rend la mise en page de ton site web bien plus facile. Dans la section suivante, nous allons passer à un autre outil d'alignement puissant : CSS Grid.
Alignement avec Grid
Après avoir exploré la flexibilité offerte par Flexbox, passons maintenant à CSS Grid. Ce système de mise en page bidimensionnel est particulièrement utile lorsque tu as besoin de positionner des éléments en colonnes et en rangées.
Comme pour Flexbox, nous commençons par définir un conteneur Grid en utilisant la propriété display: grid;. Ensuite, nous pouvons définir la structure de notre grille à l'aide des propriétés grid-template-columns et grid-template-rows.
Par exemple, si tu veux une grille de deux colonnes et trois rangées, ton code CSS ressemblerait à ceci :
.conteneur-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* Deux colonnes de taille égale */
grid-template-rows: 1fr 1fr 1fr; /* Trois rangées de taille égale */
}Dans cet exemple, 1fr signifie "un fraction" de l'espace disponible. En utilisant fr comme unité, tu peux facilement diviser ton espace de grille de manière égale, quelle que soit la taille de l'écran.
Pour positionner des éléments dans la grille, nous utilisons les propriétés grid-column et grid-row. Par exemple, pour positionner un élément dans la première colonne et la deuxième rangée, nous pourrions faire :
.item-grid {
grid-column: 1;
grid-row: 2;
}CSS Grid offre un grand nombre de propriétés pour contrôler l'alignement et le positionnement des éléments, ce qui le rend extrêmement flexible pour créer presque n'importe quelle mise en page. Par exemple, justify-items, align-items, justify-content, et align-content peuvent être utilisés pour aligner les éléments à l'intérieur du conteneur de grille, tandis que justify-self et align-self peuvent être utilisés pour aligner les éléments individuellement.
Avec CSS Grid, tu as une grande flexibilité pour créer des designs complexes et responsives. Dans la section suivante, nous allons explorer les différentes manières de positionner des éléments sur ta page avec les positions relative et absolute.
Position Relative et Absolute
La position des éléments dans le document peut être contrôlée de manière plus précise en utilisant les propriétés de positionnement CSS, à savoir position: relative; et position: absolute;.
Position relative
La propriété position: relative; déplace un élément par rapport à sa position normale dans le flux du document. Par exemple, si tu veux déplacer un élément 20 pixels vers la droite et 10 pixels vers le bas, tu peux le faire comme ceci :
.element {
position: relative;
top: 10px;
right: -20px;
} Note que l'utilisation de top et right ne retire pas l'élément de son flux normal, c'est-à-dire que l'espace qu'il aurait normalement occupé reste réservé.
Position absolute
La propriété position: absolute; permet de positionner un élément n'importe où sur la page. Quand un élément est positionné de manière absolue, tous les autres éléments de la page se comporteront comme s'il n'existait pas. Cela signifie qu'ils ne réserveront pas d'espace pour lui.
Un élément avec une position absolue est positionné par rapport à son ancêtre positionné le plus proche. Si un élément positionné absolument n'a pas d'ancêtre positionné, il se positionnera par rapport au document HTML entier. Par exemple, si tu veux positionner un élément en bas à droite de la page, tu peux le faire comme ceci :
.element {
position: absolute;
bottom: 0;
right: 0;
}En utilisant position: relative; et position: absolute;, tu peux contrôler la position de tes éléments avec une grande précision. Cela te permet de créer des designs plus complexes et d'ajuster parfaitement la position de tes éléments. Dans la prochaine section, nous allons explorer comment mettre en pratique ces techniques de positionnement en travaillant sur des projets concrets.
Félicitations pour avoir atteint la troisième semaine de notre aventure ensemble dans le développement web! Tu as bien avancé, maîtrisant l'art de la structure avec HTML et de l'esthétique avec CSS. Prêt pour le prochain niveau ? C'est le moment d'ajouter de l'interactivité à tes créations. Bienvenue dans le monde de JavaScript et jQuery !
JavaScript est un langage de programmation utilisé pour rendre les sites web interactifs. Que ce soit pour animer un menu déroulant, valider des données de formulaire, charger du contenu dynamiquement ou créer un jeu en ligne, JavaScript est à la base de tout cela.
jQuery, d'autre part, est une bibliothèque de JavaScript populaire qui simplifie l'écriture de JavaScript. Avec jQuery, tu peux écrire moins de code, tout en faisant plus. Il facilite le travail avec le DOM (Document Object Model), gère efficacement les événements, crée des animations et inclut même des fonctionnalités AJAX pour charger du contenu de manière asynchrone.
Cette semaine, tu seras initié à la syntaxe de base de JavaScript, à l'utilisation de jQuery pour manipuler facilement le DOM, et tu commenceras à ajouter des éléments interactifs à ton site. Que l'aventure continue !