Création des pages Nos Services et Accueil | Changer la police de votre texte



<div id="service-container"></div>

b) À l'intérieur du conteneur, insérons les différents services en utilisant la structure suivante pour chaque service :



<div class='service-item'>

<img src="images/branding.png" />

<h2>Branding</h2>

<p>Nous fournissons aux passionnés de technologie toutes les ressources nécessaires pour les aider à développer leurs compétences à travers nos différents ateliers.</p>

</div>

Vous pouvez dupliquer ce code pour ajouter d'autres services. N'oubliez pas de modifier les images, titres et descriptions pour correspondre à chaque service.

c) Utilisez des icônes provenant du site Flaticon pour ajouter une touche visuelle à vos services. Rendez-vous sur https://www.flaticon.com/ et recherchez les icônes appropriées à chaque service. Téléchargez les icônes au format SVG ou PNG, puis ajoutez-les à vos balises `<img>`.

2. Création de la page d'"Accueil" :

a) Commencez par créer une bannière avec un titre (h1), un paragraphe et un lien hypertexte.



<div id="home-banner">

<div class="banner-content">

<h1>Créons l'avenir</h1>

<p>Vous êtes fan des nouvelles technologies et vous souhaitez vous initier à la programmation ou approfondir vos connaissances. Développeur ou pas, vous êtes au bon endroit !</p>

<a href="apropos.html">Voir plus</a>

</div>

</div>

b) Pour personnaliser la police du texte, rendez-vous sur le site https://fonts.google.com/. Choisissez la police qui vous convient en cliquant sur le bouton "+" à côté de la police souhaitée. Une fois que vous avez sélectionné toutes les polices souhaitées, cliquez sur l'icône de téléchargement en bas à droite de l'écran. Dans la fenêtre de téléchargement, sélectionnez l'onglet "@import" et copiez le code fourni. Collez le code d'importation dans la section `<head>` de votre page HTML, juste avant la balise de fermeture `</head>`. Assurez-vous de remplacer "NOM_DE_LA_POLICE" par le nom de la police que vous avez choisie.

3. Ajout des différentes sections dans la page d'accueil :

Ajoutez les différentes sections (Apropos, Services, Blog, etc.) à votre page d'accueil en utilisant la structure HTML appropriée pour chaque section. Vous pouvez créer des divs distincts pour chaque section et y ajouter le contenu correspondant.

13 Juin 2023 0

Séances

1 - Introduction| Tout savoir sur les sites Web

Qu'est-ce qu'un site Web ? Un site web est un ensemble de pages web reliées entre elles par des liens hypertextes. Ces pages peuvent contenir du texte, des images, des vidéos, des fichiers audio, des formulaires et d'autres éléments interactifs. Les sites web sont accessibles via Internet et sont hébergés sur des serveurs web. Qu'est-ce qu'une page Web ? Une page web est un document HTML qui est affiché dans un navigateur web. Elle peut contenir du texte, des images, des vidéos, des liens hypertextes, des formulaires et d'autres éléments interactifs. Les pages web sont la base des sites web et peuvent être conçues pour diverses fins, telles que la présentation d'informations, la vente de produits ou de services, la communication avec les clients, la collaboration en ligne, etc. Lien hypertexte Un lien hypertexte est un élément cliquable présent sur une page web qui permet de diriger l'utilisateur vers une autre page web, un autre document ou une autre ressource en ligne. Les liens hypertextes sont généralement représentés par du texte souligné ou en couleur différente, mais ils peuvent également être des images ou des boutons. Comment fonctionne un site Web ? Un site web fonctionne en utilisant une combinaison de langages de programmation tels que HTML, CSS et JavaScript. Le navigateur web interprète ces langages pour afficher les pages web et les éléments interactifs sur l'écran de l'utilisateur. Le site web est hébergé sur un serveur web, qui peut être soit un serveur local, soit un serveur distant, accessible via Internet. Comment accéder à un site Internet ? Pour accéder à un site internet, vous devez ouvrir un navigateur web sur votre ordinateur ou votre appareil mobile, puis entrer l'adresse URL (Uniform Resource Locator) du site dans la barre d'adresse du navigateur. Vous pouvez également accéder à un site web en cliquant sur un lien hypertexte dans un autre site web ou dans un e-mail. Comment créer un site internet ? Pour créer un site internet, vous pouvez utiliser des logiciels de conception de sites web tels que WordPress, Wix, Squarespace, ou créer un site à partir de zéro en utilisant des langages de programmation tels que HTML, CSS et JavaScript. Vous devez également choisir un nom de domaine et un hébergement web pour rendre votre site accessible en ligne. Qu'est-ce que le HTML ? HTML (Hypertext Markup Language) est un langage de balisage utilisé pour créer des pages web. Il permet de structurer le contenu d'une page web en utilisant des balises pour définir les différents éléments tels que le texte, les images, les liens hypertextes, les formulaires, etc. C'est quoi CSS ? CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir l'apparence et la mise en page des pages web. Il permet de contrôler les couleurs, les polices, les marges, les bordures et les éléments de mise en page tels que les colonnes et les grilles. Quel est le rôle de HTML, CSS et JavaScript dans une page Web ? HTML (HyperText Markup Language) : HTML est le langage de balisage standard utilisé pour créer le contenu de base et la structure d'une page web. Il permet de définir le contenu de la page, tels que les textes, les images, les liens, les formulaires, etc., ainsi que d'organiser ce contenu en différentes sections et d'y ajouter des balises de méta-données pour décrire la page aux moteurs de recherche. CSS (Cascading Style Sheets) : CSS est un langage de style utilisé pour mettre en forme et styliser les éléments de la page web, tels que la couleur, la police, la taille, le positionnement, etc. Les feuilles de style CSS permettent de séparer la présentation visuelle du contenu HTML, ce qui facilite la maintenance et la mise à jour du site web. JavaScript : JavaScript est un langage de script utilisé pour rendre la page web interactive et dynamique en ajoutant des comportements et des fonctionnalités avancées. Il peut être utilisé pour manipuler et modifier le contenu HTML et CSS en temps réel, pour valider les formulaires, pour créer des animations, pour interagir avec les API et les bases de données, et pour créer des applications web complètes. En somme, HTML fournit la structure de base de la page web, CSS ajoute du style et de la présentation visuelle, tandis que JavaScript ajoute de l'interactivité et de la dynamique à la page web. Les trois technologies travaillent ensemble pour créer une expérience utilisateur riche et engageante sur le web. Qu'est-ce qu'une balise en HTML ? Une balise en HTML est un élément de code entouré de crochets angulaires (< et >) qui indique au navigateur comment afficher le contenu d'une page web. Par exemple, la balise <p> est utilisée pour définir un paragraphe de texte. Quels sont les types de balises en HTML (pair, orpheline) En HTML, il existe deux types de balises: les balises "pair" (aussi appelées "balises de conteneur") et les balises "orphelines" (aussi appelées "balises auto-fermantes"). Les balises "pair" : Ce type de balise a une balise d'ouverture et une balise de fermeture correspondante qui entourent le contenu de la balise. Par exemple, la balise <div> est une balise "pair" car elle s'ouvre avec <div> et se ferme avec </div>. Les balises "pair" sont utilisées pour encadrer le contenu et appliquer des styles à ce contenu. Voici quelques exemples de balises "pair" courantes: <div> pour créer des sections dans la page web <p> pour créer des paragraphes <h1> à <h6> pour créer des titres et sous-titres <ul> et <ol> pour créer des listes à puces et des listes numérotées <table> pour créer des tableaux Les balises "orphelines" : Ce type de balise ne nécessite qu'une balise unique et ne contient pas de contenu, car elle est destinée à être utilisée pour ajouter des éléments à une page web sans avoir besoin d'encadrer un contenu. Les balises "orphelines" sont également appelées "balises auto-fermantes", car elles se ferment elles-mêmes. Voici quelques exemples de balises "orphelines" courantes: <br> pour insérer une rupture de ligne <img> pour insérer des images <input> pour créer des champs de formulaire <meta> pour ajouter des informations sur la page qui ne sont pas visibles à l'utilisateur Quelles sont les balises de base d'une page web ? ~code~ <!DOCTYPE html> <html> <head> <title>Titre de la page</title> <link rel="stylesheet" type="text/css" href="..."> <script type="text/javascript" src="..."></script> </head> <body>  </body> </html> ~/code~ <!DOCTYPE html> : Cette balise déclare le type de document HTML utilisé pour la page web. Dans ce cas, il s'agit de HTML5. <html> : Cette balise contient tout le contenu de la page web. <head> : Cette balise contient des informations sur la page web telles que le titre, les liens vers les feuilles de style CSS, les scripts JavaScript et autres méta-données. <title> : Cette balise contient le titre de la page web qui est affiché dans l'onglet du navigateur et dans les résultats de recherche. <link> : Cette balise est utilisée pour lier une feuille de style CSS externe à la page web. L'attribut rel doit être défini à "stylesheet" et l'attribut href doit pointer vers le fichier CSS. <script> : Cette balise est utilisée pour lier un fichier JavaScript externe à la page web. L'attribut src doit pointer vers le fichier JavaScript. <body> : Cette balise contient le contenu visible de la page web. Il est important de noter que les balises <link> et <script> doivent être placées dans la section <head> de la page web pour que les navigateurs puissent les charger correctement avant d'afficher le contenu de la page. <html> : Cette balise indique que tout le contenu de la page est en HTML. <head> : Cette balise contient des informations sur la page, telles que le titre, les scripts et les feuilles de style CSS. <title> : Cette balise définit le titre de la page qui apparaît dans l'onglet du navigateur et dans les résultats de recherche. <body> : Cette balise contient tout le contenu visible de la page web. <div> : Cette balise est utilisée pour créer une section générique ou un conteneur pour un groupe d'éléments. <p> : Cette balise est utilisée pour définir un paragraphe. <a> : Cette balise est utilisée pour créer un lien hypertexte vers une autre page web ou une autre section de la même page. <img> : Cette balise est utilisée pour afficher des images sur la page web. <ul> : Cette balise est utilisée pour créer une liste non ordonnée. <ol> : Cette balise est utilisée pour créer une liste ordonnée. <li> : Cette balise est utilisée pour définir chaque élément de la liste créée avec les balises <ul> ou <ol>. <h1> à <h6> : Ces balises sont utilisées pour créer des titres et des sous-titres. <table> : Cette balise est utilisée pour créer un tableau sur la page web. <tr> : Cette balise est utilisée pour créer une rangée dans un tableau. <td> : Cette balise est utilisée pour définir une cellule dans un tableau. <form> : Cette balise est utilisée pour créer un formulaire qui permet à l'utilisateur d'envoyer des données à un serveur. <input> : Cette balise est utilisée pour créer un champ de formulaire dans lequel l'utilisateur peut saisir des données. <button> : Cette balise est utilisée pour créer un bouton cliquable. <b> : Cette balise est utilisée pour mettre en évidence du texte en gras. <h1> à <h6> : Ces balises sont utilisées pour définir les niveaux de titres ou de sous-titres sur la page web, allant du plus important avec <h1> au moins important avec <h6>. <li> : Cette balise est utilisée pour créer une liste d'éléments. <span> : Cette balise est utilisée pour mettre en évidence un texte avec une mise en forme particulière, telle que la couleur ou la police. <nav> : Cette balise est utilisée pour créer une section de navigation sur la page web. <video> : Cette balise est utilisée pour incorporer des fichiers vidéo sur la page web. <audio> : Cette balise est utilisée pour incorporer des fichiers audio sur la page web. Quelle est la différence entre un site web statique et un site web dynamique Un site web statique est un site qui ne change pas en fonction de l'utilisateur qui le visite. Le contenu est pré-écrit et affiché de la même manière pour tous les visiteurs. Les pages sont généralement écrites en HTML et CSS, et les images et autres fichiers médias sont stockés sur le serveur web. Un exemple de site web statique serait un site personnel avec des pages de biographie, de portfolio, et de contact. En revanche, un site web dynamique est un site qui peut changer en fonction de l'utilisateur qui le visite. Les pages sont générées à la volée en utilisant des langages de programmation côté serveur tels que PHP, Python ou Ruby. Le contenu est stocké dans une base de données et est récupéré en temps réel lorsqu'un utilisateur accède au site. Les exemples de sites web dynamiques comprennent les réseaux sociaux, les sites d'e-commerce et les applications web. En résumé, la principale différence entre un site web statique et un site web dynamique réside dans la façon dont le contenu est généré et affiché. Les sites web statiques ont un contenu fixe et sont créés en utilisant des fichiers HTML, CSS et des images. Les sites web dynamiques sont générés à la volée en utilisant des langages de programmation côté serveur et en accédant à des bases de données pour afficher du contenu dynamique. EXERCICE 1 https://carrefour.codingclubhaiti.com/archive/exercice-html/2/62 EXERCICE 2 Créer un CV en HTML https://carrefour.codingclubhaiti.com/archive/creer-un-cv-en-html/2/63

2 - Naviguez entre vos pages Web à l'aide des liens hypertexte

Un lien hypertexte en HTML est un élément qui permet aux utilisateurs de naviguer d'une page à une autre en cliquant sur un texte ou une image qui est marqué avec un code HTML spécifique. Les liens hypertextes sont souvent utilisés pour connecter des pages Web et permettre aux utilisateurs d'explorer facilement le contenu. Pour ajouter un lien hypertexte dans une page, vous pouvez utiliser la balise HTML "a". La balise "a" est généralement utilisée avec l'attribut "href", qui spécifie l'adresse de la page vers laquelle le lien pointe. Syntaxe ~code~ <a href="url de la page ou de la section">texte_à_afficher</a> ~/code~ Le code commence par la balise d'ouverture <a>, suivie de l'attribut href qui indique l'URL de la page de destination, puis le texte ou l'image à afficher, et enfin la balise de fermeture </a>. Il existe plusieurs types de liens dans une page web. Voici les principaux : -- Liens d'ancrage : ce sont des liens qui pointent vers une section spécifique de la même page ou vers une section spécifique d'une autre page web. Il faut ajouter un identifiant (id) à la section ciblée et le faire correspondre à la partie de l'URL du lien hypertexte précédée d'un symbole de dièse (#), comme ceci: ~code~ <a href="#section2">Aller à la section 2</a> <h2 id="section2">Section 2</h2> ~/code~ -- Liens interne : ce sont des liens qui permettent aux utilisateurs de naviguer vers différentes sections de votre site, tels que la page d'accueil, la page de contact, et autres. ~code~ <a href="service.html">Nos services</a> <a href="contact.html">Contactez-nous</a> ~/code~ -- Liens externes : ce sont des liens qui pointent vers des sites web externes à votre site. ~code~ <a href="https://www.facebook.com">Facebook</a> <a href="https://www.funtchat.com">Funtchat</a> ~/code~ Exercice | Liens hypertexte https://carrefour.codingclubhaiti.com/archive/exercice-html--liens-hypertexte/2/65

3 - Intégration de CSS dans une page HTML

b~Rectification HTML et CSS ne sont pas considérés comme des langages de programmation.~b HTML et CSS sont des langages de balisage et de style, respectivement. Bien qu'ils soient souvent utilisés pour développer des sites web, ils ne sont pas considérés comme des langages de programmation à part entière. HTML (Hypertext Markup Language) est utilisé pour structurer le contenu d'une page web, en définissant différents éléments tels que les titres, les paragraphes, les images, les liens, etc. Il permet également de créer des formulaires pour l'interaction avec l'utilisateur. CSS (Cascading Style Sheets) est utilisé pour définir la présentation visuelle d'une page web, en contrôlant les couleurs, les polices, les marges, les bordures et d'autres propriétés de style. Pour intégrer CSS dans une page HTML, vous pouvez utiliser trois méthodes principales : CSS en ligne: Dans cette méthode, le CSS est directement écrit à l'intérieur de l'élément HTML que vous voulez styler. Cela signifie que le style ne s'appliquera qu'à cet élément spécifique, et non à d'autres éléments de la page. ~code~ <p style="color: blue; font-size: 18px;">Ce texte sera en bleu et en taille 18px</p> ~/code~ CSS interne: Dans cette méthode, le CSS est inclus dans la section <head> de la page HTML, à l'aide de la balise <style>. Le CSS s'applique à tous les éléments de la page qui correspondent aux sélecteurs spécifiés. ~code~ <!DOCTYPE html> <html> <head> <title>Mon site web</title> <style> p { color: blue; font-size: 18px; } </style> </head> <body> <p>Ce texte sera en bleu et en taille 18px</p> <p>Ce texte sera également en bleu et en taille 18px</p> </body> </html> ~/code~ CSS externe: Dans cette méthode, le CSS est stocké dans un fichier externe, puis lié à la page HTML à l'aide de la balise <link>. Le fichier CSS peut contenir des règles de style pour tous les éléments de la page ou pour des éléments spécifiques à l'aide de sélecteurs. Fichier HTML ~code~ <!DOCTYPE html> <html> <head> <title>Mon site web</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Ce texte sera en bleu et en taille 18px</p> <p>Ce texte sera également en bleu et en taille 18px</p> </body> </html> ~/code~ Et dans un fichier externe nommé styles.css, nous pourrions avoir les règles de style suivantes: ~code~ p { color: blue; font-size: 18px; } ~/code~

4 - Utiliser les divs pour diviser une page en plusieurs sections

En développement web, un élément `<div>` est une balise HTML utilisée pour créer une section de contenu sur une page web. "Div" est une abréviation de "division" ou "diviser", et la balise `<div>` est utilisée pour diviser une page en plusieurs sections logiques. Par exemple, vous pouvez utiliser un élément `<div>` pour créer une section d'en-tête en haut de votre page, une section de contenu principal au milieu et une section de pied de page en bas. Les éléments `<div>` peuvent être stylisés avec CSS pour leur donner une apparence particulière en termes de taille, de position, de couleur et de style de bordure. En général, les éléments `<div>` sont souvent utilisés en conjonction avec d'autres balises HTML pour structurer et organiser le contenu d'une page web de manière logique et sémantique. Challenge Proposition de projet : 5 projets, 5 équipes. Délai maximum 6 mois pour les réaliser tous. https://carrefour.codingclubhaiti.com/archive/proposition-de-projchallenge--5-projets-5-equipes-delai-maximum-6-mois-pour-les-realiser-tous/1/68

5 - Faire l'entête d'un site de manière concrète HTML et CSS

Dans cette séance, nous allons commencer à créer concrètement le site internet du Coding Club Carrefour en utilisant les langages HTML, CSS et JavaScript. Ce site comprendra cinq pages principales : l'accueil, à propos de nous (qui sommes-nous, notre mission, notre vision), le blog, nos services et la page de contact. Bien que l'apprentissage des balises HTML telles que <div>, <p>, <a>, <h1> et autres soit important, créer un projet concret est encore mieux. Dans cette séance et les suivantes, nous allons apprendre les bases de ces langages de manière pratique. Profitez de cette formation pour améliorer vos projets au fur et à mesure que vous avancez dans la création de ce site web. Aujourd'hui, nous allons commencer par l'entête du site. Suivez les instructions pour créer l'entête de la page d'accueil et n'hésitez pas à poser des questions si vous avez des difficultés.

6 - Faire le pied de page d'un site Web en utilisant HTML et CSS Grid

Le CSS Grid est un module de mise en page en cascade (CSS) qui permet de créer des grilles flexibles et réactives pour organiser les éléments d'une page web. Il fournit un système de grille bidimensionnel, ce qui signifie que vous pouvez créer des mises en page en utilisant à la fois les colonnes et les lignes. Avec CSS Grid, vous pouvez diviser l'espace disponible en une grille de lignes et de colonnes, puis placer les éléments de votre page dans des cellules spécifiques de cette grille. Vous pouvez contrôler la taille des colonnes et des lignes individuelles, ainsi que l'espacement entre elles. De plus, CSS Grid offre une grande flexibilité pour organiser les éléments à travers la grille, en permettant la fusion de cellules, le placement automatique des éléments, le contrôle de l'ordre d'affichage et bien plus encore. Exemple ~code~ .grid-div { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; } .grid-item { grid-column:1 / 3; grid-row:1 / 3; } ~/code~ Ces lignes de code font référence à des propriétés CSS utilisées pour créer une grille dans une mise en page web. Voici une explication détaillée des différentes parties du code : 1. .grid-div : C'est une classe CSS qui est appliquée à un élément HTML spécifique (par exemple, une div) pour lui donner des propriétés de grille. 2. display: grid; : Cette propriété CSS indique que l'élément avec la classe .grid-div doit être affiché comme une grille. 3. grid-template-columns: repeat(4, 1fr); : Cette propriété définit le nombre de colonnes de la grille et leur taille. Ici, il y a 4 colonnes définies avec la valeur "1fr". La fonction repeat(4, 1fr) répète la valeur "1fr" quatre fois pour créer les quatre colonnes. 4. gap: 10px; : Cette propriété définit l'espace (ou la marge) entre les éléments de la grille. Ici, il y a un espace de 10 pixels entre les éléments. En résumé, la classe .grid-div crée une grille avec 4 colonnes de largeur égale et un espace de 10 pixels entre les éléments de la grille. 5. .grid-item : C'est une autre classe CSS qui est appliquée à un élément spécifique (par exemple, une div) pour lui donner des propriétés de placement dans la grille. 6. grid-column: 1 / 3; : Cette propriété spécifie la position des éléments dans la grille sur l'axe des colonnes. Ici, les éléments avec la classe .grid-item sont positionnés sur les colonnes 1 et 2 de la grille. 7. grid-row: 1 / 3; : Cette propriété spécifie la position des éléments dans la grille sur l'axe des lignes. Ici, les éléments avec la classe .grid-item sont positionnés sur les lignes 1 et 2 de la grille. En résumé, la classe .grid-item positionne les éléments dans la grille de sorte qu'ils occupent les deux premières colonnes et les deux premières lignes. Ces lignes de code sont utilisées pour créer une mise en page en grille responsive où les éléments peuvent être placés et alignés facilement. NB : Pour intégrer des icônes dans une page web, suivez les étapes suivantes : - Placez le code suivant à la fin de votre page, juste avant la balise de fermeture </body>, pour les activer : ~code~ <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> ~/code~ 1. Rendez-vous sur le site https://ionic.io/ionicons. 2. Recherchez et cliquez sur l'icône que vous souhaitez utiliser. 3. En bas de la page, cliquez sur le bouton de code pour copier le code correspondant à l'icône choisie. Voici un exemple d'utilisation : ~code~ <ion-icon name="call-outline"></ion-icon> ~/code~ Intégrez ce code dans votre page web pour afficher l'icône souhaitée. EXERCICE Réalisé ce pied de page en utilisant HTML et CSS. https://carrefour.codingclubhaiti.com/archive/realise-ce-pied-de-page-en-utilisant-html-et-css/2/71

7 - Page À propos de nous | Mettre les images en arrière-plan avec background-image

Bienvenue à cette séance de formation ! Aujourd'hui, nous allons travailler ensemble sur la construction de la page "À propos de nous". Cette page a pour objectif de présenter du texte et des images afin de parler du site, y compris sa mission et sa vision. Pour commencer, nous allons créer une bannière avec une image en arrière-plan et y ajouter du texte pour mieux comprendre la propriété background-image. Enfin, nous ajouterons une autre section disposée en grille pour afficher une image à gauche, ainsi qu'un titre et un paragraphe à droite. Commençons par la bannière. Nous allons utiliser la propriété background-image pour définir une image d'arrière-plan. Assurez-vous d'avoir l'image que vous souhaitez utiliser prête et disponible dans votre projet. Dans votre feuille de style CSS, vous pouvez définir la propriété background-image comme ceci : ~code~ #banner { float: left; width: 100%; background-image: url('chemin_vers_votre_image.jpg'); background-size:cover; background-repeat: no-repeat; background-position: center; background-color: rgba(0,0,0,0.7); background-blend-mode: multiply; padding: 70px 20%; text-align: center; } ~/code~ Ces lignes de code définissent les propriétés CSS pour l'arrière-plan d'un élément. Voici une explication de chaque propriété avec d'autres propriétés possibles: 1. `background-image:url(image.jpg);` : Cette propriété spécifie l'image à utiliser comme arrière-plan. Vous pouvez également spécifier d'autres valeurs comme "none" pour indiquer qu'aucune image n'est utilisée, ou utiliser des images en ligne ou des chemins d'accès relatifs/absolus vers d'autres images. Autres propriétés possibles pour `background-image` : - `linear-gradient()` : permet de créer un dégradé linéaire comme arrière-plan. - `radial-gradient()` : permet de créer un dégradé radial comme arrière-plan. - `repeating-linear-gradient()` : permet de créer un dégradé linéaire répété. - `repeating-radial-gradient()` : permet de créer un dégradé radial répété. - `url(image.jpg) center top / cover` : spécifie à la fois l'image de fond, la position et la taille en une seule valeur. 2. `background-repeat:no-repeat;` : Cette propriété indique si l'image de fond doit se répéter ou non. "no-repeat" signifie que l'image ne sera pas répétée. Autres propriétés possibles pour `background-repeat` : - `repeat` : répète l'image horizontalement et verticalement. - `repeat-x` : répète l'image horizontalement seulement. - `repeat-y` : répète l'image verticalement seulement. - `space` : répète l'image pour remplir l'espace, en espaçant les répétitions. - `round` : répète l'image pour remplir l'espace, en ajustant les répétitions pour qu'elles soient de tailles égales. 3. `background-position:center;` : Cette propriété définit la position de l'image de fond. "center" indique que l'image sera centrée à l'intérieur de l'élément. Autres propriétés possibles pour `background-position` : - `top` : positionne l'image en haut de l'élément. - `bottom` : positionne l'image en bas de l'élément. - `left` : positionne l'image à gauche de l'élément. - `right` : positionne l'image à droite de l'élément. - `x% y%` : spécifie une position en pourcentage par rapport à l'élément, où 0% est en haut/gauche et 100% est en bas/droite. 4. `background-size:cover;` : Cette propriété spécifie la taille de l'image de fond. "cover" indique que l'image sera redimensionnée pour couvrir complètement l'élément, en conservant son ratio d'aspect. Autres propriétés possibles pour `background-size` : - `contain` : redimensionne l'image pour s'adapter entièrement à l'élément, en conservant son ratio d'aspect. L'image peut ne pas couvrir complètement l'élément. - `auto` : utilise la taille intrinsèque de l'image sans redimensionnement. - `<length>` : spécifie une taille en pixels, en pourcentage ou toute autre unité de mesure pour l'image de fond. 5. `background-blend-mode:multiply;` : Cette propriété spécifie le mode de fusion à appliquer entre l'image de fond et le contenu de l'élément. "multiply" produit une interaction de multiplication des couleurs entre l'image de fond et le contenu. Autres propriétés possibles pour `background-blend-mode` : - `normal` : aucune fusion, l'image de fond est affichée sans effet de fusion. - `screen` : réalise une fusion de l'écran entre l'image de fond et le contenu. - `overlay` : superpose l'image de fond sur le contenu avec un effet de superposition. - `darken` : prend la couleur la plus sombre entre l'image de fond et le contenu. - `lighten` : prend la couleur la plus claire entre l'image de fond et le contenu. 6. `background-color:rgba(0,0,0,0.7);` : Cette propriété définit la couleur d'arrière-plan de l'élément. "rgba(0,0,0,0.7)" spécifie une couleur noire avec une opacité de 0,7 (70%). Cela signifie que l'image de fond sera partiellement visible à travers cette couleur d'arrière-plan. Autres propriétés possibles pour `background-color` : - `transparent` : rend l'arrière-plan transparent. - `rgb(255, 0, 0)` : spécifie une couleur RVB. - `hsl(240, 100%, 50%)` : spécifie une couleur en utilisant le modèle de couleur HSL. - `#FF0000` : spécifie une couleur en utilisant le format hexadécimal. Ensuite, pour ajouter du texte dans la bannière, vous pouvez simplement utiliser une balise HTML appropriée, comme un paragraphe ou un en-tête, à l'intérieur de l'élément conteneur de la bannière. Par exemple : ~code~ <div id="banner"> <h1>Bienvenue sur notre site !</h1> <p>Découvrez qui nous sommes et ce que nous faisons.</p> </div> ~/code~ Maintenant que nous avons créé la bannière avec une image d'arrière-plan et du texte, passons à la deuxième section. Nous allons l'organiser en utilisant un système de grille. Assurez-vous d'avoir les images et le contenu textuel prêts à être utilisés. Dans votre HTML, vous pouvez créer une structure similaire à celle-ci : ~code~ <div id="text-content"> <div><img src='chemin_vers_votre_image.jpg'></div> <div> <h2>Ce que nous faisons</h2> <p>Nous nous engageons à...</p> </div> </div> ~/code~ Ensuite, dans votre feuille de style CSS, vous pouvez appliquer une grille pour organiser les éléments de la section : ~code~ #text-content { float: left; width: 100%; padding: 50px 5%; display: grid; grid-template-columns:repeat(2, 1fr) ; gap:30px; } #text-content img { width: 100%; border-radius: 15px; } ~/code~ Assurez-vous d'ajuster les chemins d'accès vers les images appropriés dans la balise `<img>`. Voilà ! Nous avons maintenant créé une page "À propos de nous" avec une bannière comportant une image d'arrière-plan et du texte, ainsi qu'une section disposée en grille avec une image à gauche et un titre et un paragraphe à droite. N'hésitez pas à personnaliser davantage la mise en page, les styles et le contenu en fonction de vos besoins. N'oubliez pas de tester votre page dans différents navigateurs et appareils pour vous assurer que tout s'affiche correctement. Bon travail !

8 - Page contact - Les bases de la création de formulaires en HTML

Dans cette séance de formation sur la création de sites web, nous allons aborder les bases de la création de formulaires en HTML. Les formulaires sont des éléments essentiels pour interagir avec les utilisateurs et recueillir des informations précieuses. Nous allons nous concentrer sur la création d'un formulaire de contact simple, comportant trois champs : Nom, Email et Message, ainsi qu'un bouton "Envoyer". ~code~ <form action="" method="POST" > <input type="text" name="nom" placeholder="Votre nom" required /> <input type="email" name="email" placeholder="Votre email" required /> <textarea name="message" placeholder="Votre message" required></textarea> <button name="envoyermessager" type="submit">Envoyer</button> </form> ~/code~ Pour commencer, nous utiliserons différentes balises HTML pour définir les éléments du formulaire. Nous utiliserons la balise `<form>` pour englober l'ensemble du formulaire. Cette balise a deux attributs importants : `action` et `method`. L'attribut `action` spécifie l'URL où les données du formulaire seront envoyées une fois soumises, tandis que l'attribut `method` définit la méthode HTTP utilisée pour envoyer les données. Dans notre exemple, nous avons laissé les valeurs de ces attributs vides, mais vous devrez les remplir avec l'URL appropriée et la méthode souhaitée pour votre application. À l'intérieur de la balise `<form>`, nous avons trois éléments `<input>` et un élément `<textarea>`. Les balises `<input>` sont utilisées pour les champs de saisie, tandis que la balise `<textarea>` est utilisée pour les zones de texte plus longues. Chaque élément `<input>` doit avoir un attribut `type` spécifiant le type de champ, tel que "text" pour les champs de texte, "email" pour les adresses e-mail, etc. Les attributs `name` permettent d'identifier chaque champ dans le formulaire, ce qui est utile lors de la soumission des données. L'attribut `placeholder` fournit un texte d'indication à afficher à l'intérieur du champ, afin d'aider les utilisateurs à comprendre ce qui est attendu. L'attribut `required` rend un champ obligatoire, ce qui signifie que l'utilisateur doit le remplir avant de pouvoir soumettre le formulaire. Enfin, nous avons le bouton d'envoi, défini par la balise `<button>`. Nous utilisons l'attribut `name` pour identifier le bouton, et l'attribut `type` avec la valeur "submit" pour indiquer que ce bouton est utilisé pour soumettre le formulaire. Une fois que vous aurez créé votre formulaire avec ces éléments et leurs attributs correspondants, vous pourrez l'intégrer à votre site web et commencer à collecter les informations soumises par les utilisateurs. N'hésitez pas à explorer davantage les possibilités offertes par les formulaires en HTML, en découvrant d'autres types de champs, des validations supplémentaires et des méthodes d'envoi de données plus avancées. Les formulaires sont un outil puissant pour interagir avec les utilisateurs et créer des expériences web plus interactives.

9 - Concevoir une page pour vos articles | Blog

Dans cette séance de formation sur la création de sites web, nous allons aborder les pages de blog. Tout d'abord, nous créons un conteneur pour notre page de blog en utilisant un div avec l'ID "blog-container". Nous lui appliquons également un style "display: grid" pour permettre un affichage en grille. La propriété "grid-template-columns: 1fr 1fr 1fr" indique que nous voulons 3 colonnes de largeur égale pour contenir nos articles. ~code~ <div id="blog-container"> </div> ~/code~ Ensuite, nous ajoutons les articles à l'intérieur du div "blog-container". Pour chaque article, nous utilisons un div supplémentaire. Voici un exemple d'article : ~code~ <div> <img src="images/img.jpg"> <span>2 Janvier 2023</span> <h2>Programmation informatique, Cours complet</h2> <p>Ce cours a pour but de vous initier à la programmation informatique. Le langage "support" que nous allons utiliser est Python.</p> <a href="blogitem.html">Voir plus</a> </div> ~/code~ Explication des balises utilisées : - ```<img>``` : Cette balise est utilisée pour insérer une image dans l'article. Vous devez spécifier l'attribut "src" avec le chemin vers votre image, par exemple "images/img.jpg". - ```<span>``` : Cette balise est utilisée pour afficher la date de l'article. Vous pouvez remplacer "2 Janvier 2023" par la date réelle de votre article. - ```<h2>``` : Cette balise est utilisée pour le titre de l'article. Vous pouvez remplacer "Programmation informatique, Cours complet" par le titre réel de votre article. - ```<p>``` : Cette balise est utilisée pour le contenu de l'article. Vous pouvez remplacer le texte entre les balises par le contenu réel de votre article. - ```<a>``` : Cette balise est utilisée pour créer un lien vers une page de détails de l'article. Vous devez spécifier l'attribut "href" avec le lien vers votre page de détails, par exemple "blogitem.html". Vous pouvez également modifier le texte "Voir plus" pour afficher un autre texte si vous le souhaitez. Vous pouvez répéter ce bloc de code pour chaque article que vous souhaitez afficher sur votre page blog statique en ajoutant un nouveau div avec les informations appropriées à l'intérieur du div "blog-container".

10 - Création des pages Nos Services et Accueil | Changer la police de votre texte

Dans cette séance de formation, nous allons apprendre à créer les pages "Nos Services" et "Accueil" pour un site web. Nous allons utiliser des techniques de mise en page avec CSS, intégrer des icônes provenant du site Flaticon, et personnaliser la police du texte en utilisant Google Fonts. Prêt à commencer ? Allons-y ! 1. Création de la page "Nos Services" : a) Commencez par créer un conteneur avec une mise en page en grille (display: grid) comprenant trois colonnes. ~code~ <div id="service-container"></div> ~/code~ b) À l'intérieur du conteneur, insérons les différents services en utilisant la structure suivante pour chaque service : ~code~ <div class='service-item'> <img src="images/branding.png" /> <h2>Branding</h2> <p>Nous fournissons aux passionnés de technologie toutes les ressources nécessaires pour les aider à développer leurs compétences à travers nos différents ateliers.</p> </div> ~/code~ Vous pouvez dupliquer ce code pour ajouter d'autres services. N'oubliez pas de modifier les images, titres et descriptions pour correspondre à chaque service. c) Utilisez des icônes provenant du site Flaticon pour ajouter une touche visuelle à vos services. Rendez-vous sur https://www.flaticon.com/ et recherchez les icônes appropriées à chaque service. Téléchargez les icônes au format SVG ou PNG, puis ajoutez-les à vos balises `<img>`. 2. Création de la page d'"Accueil" : a) Commencez par créer une bannière avec un titre (h1), un paragraphe et un lien hypertexte. ~code~ <div id="home-banner"> <div class="banner-content"> <h1>Créons l'avenir</h1> <p>Vous êtes fan des nouvelles technologies et vous souhaitez vous initier à la programmation ou approfondir vos connaissances. Développeur ou pas, vous êtes au bon endroit !</p> <a href="apropos.html">Voir plus</a> </div> </div> ~/code~ b) Pour personnaliser la police du texte, rendez-vous sur le site https://fonts.google.com/. Choisissez la police qui vous convient en cliquant sur le bouton "+" à côté de la police souhaitée. Une fois que vous avez sélectionné toutes les polices souhaitées, cliquez sur l'icône de téléchargement en bas à droite de l'écran. Dans la fenêtre de téléchargement, sélectionnez l'onglet "@import" et copiez le code fourni. Collez le code d'importation dans la section `<head>` de votre page HTML, juste avant la balise de fermeture `</head>`. Assurez-vous de remplacer "NOM_DE_LA_POLICE" par le nom de la police que vous avez choisie. 3. Ajout des différentes sections dans la page d'accueil : Ajoutez les différentes sections (Apropos, Services, Blog, etc.) à votre page d'accueil en utilisant la structure HTML appropriée pour chaque section. Vous pouvez créer des divs distincts pour chaque section et y ajouter le contenu correspondant.

11 - Maîtrisez les Media Queries pour des Designs Web Adaptatifs

Dans cette séance de formation, nous allons aborder les media queries, une fonctionnalité importante de CSS3 permettant d'appliquer des styles différents en fonction des caractéristiques de l'appareil ou de l'écran utilisé pour afficher une page web. Les media queries jouent un rôle essentiel dans la création de designs responsives, c'est-à-dire des sites web qui s'adaptent automatiquement à différents appareils tels que les ordinateurs de bureau, les tablettes et les smartphones. Prenons un exemple basique pour illustrer l'utilisation des media queries : ~code~ /* Styles de base pour tous les écrans */ body { background: gray; } /* Styles spécifiques pour les écrans dont la largeur est inférieure à 900 pixels */ @media screen and (max-width: 900px) { body { background: red; } } /* Styles spécifiques pour les écrans dont la largeur est inférieure à 600 pixels */ @media screen and (max-width: 600px) { body { background: blue; } } ~/code~ Dans cet exemple, nous commençons par définir un style de base pour tous les écrans avec un fond gris. Ensuite, à l'aide de la media query `@media screen and (max-width: 900px)`, nous spécifions un style différent pour les écrans dont la largeur est inférieure à 900 pixels. Dans ce cas, la couleur de fond devient rouge. De même, avec `@media screen and (max-width: 600px)`, nous spécifions un style différent pour les écrans dont la largeur est inférieure à 600 pixels, en changeant la couleur de fond en bleu. Il existe différentes façons d'utiliser les media queries : 1. Intégration directe dans le fichier CSS principal : Vous pouvez inclure les media queries directement dans votre fichier CSS principal, en les plaçant à la fin du fichier après les styles de base. Cela vous permet de gérer toutes les règles de style au même endroit. Exemple : ~code~ @media screen and (max-width: 600px) { /* Styles spécifiques pour les écrans dont la largeur est inférieure à 600 pixels */ } ~/code~ 2. Création de fichiers CSS séparés : Une autre approche consiste à créer des fichiers CSS distincts pour chaque cas spécifique, en utilisant la balise `<link>` pour les inclure dans la page HTML. Chaque fichier CSS contiendrait les règles de style correspondantes aux dimensions spécifiques de l'appareil. Exemple : ~code~ <link rel="stylesheet" href="style2.css" media="screen and (max-width: 760px)"/> ~/code~ Avec les media queries, vous disposez d'une puissante technique pour adapter votre site web à différents supports tels que les ordinateurs portables, les tablettes, les téléphones, les télévisions, et bien d'autres encore. Cela vous permet de garantir une expérience utilisateur optimale quel que soit l'appareil utilisé pour accéder à votre site.

12 - Intégration de JavaScript dans un site Web

Dans cette séance, nous découvrirons l'univers de JavaScript et comment l'utiliser dans un site web. - JavaScript est un langage de programmation principalement utilisé pour le développement web. Il permet d'ajouter des fonctionnalités interactives et dynamiques aux sites web. - En front-end, JavaScript est utilisé pour manipuler le contenu et l'apparence d'un site web côté client. Il peut être utilisé pour ajouter des effets visuels, gérer les interactions utilisateur, valider les formulaires, charger des données dynamiquement, etc. - En backend, JavaScript peut être utilisé pour créer des serveurs web en utilisant des frameworks tels que Node.js. Cela permet de développer des applications web complètes, de gérer les requêtes des clients, d'accéder à des bases de données, de gérer des sessions utilisateur, etc. - Pour intégrer JavaScript dans un site web, vous avez plusieurs méthodes : 1. Inline (directement dans le code HTML) : ~code~ <button onclick="alert('Bonjour')">Cliquez sur moi</button> ~/code~ Lorsque vous cliquez sur le bouton, une boîte de dialogue avec le message "Bonjour" s'affiche. ~code~ <a href="apropos.html" onclick="return confirm('Êtes-vous sûr!')">Confirmer</a> ~/code~ Lorsque vous cliquez sur le lien "Confirmer", une boîte de dialogue apparaît avec le message "Êtes-vous sûr!". Si vous cliquez sur OK, vous serez redirigé vers l'URL spécifiée dans l'attribut href. Si vous cliquez sur Annuler, rien ne se passe. 2. Interne (dans une balise `<script>` dans le fichier HTML) : ~code~ <script> //Code javascript... </script> ~/code~ 3. Externe (en important un fichier JavaScript externe) : ~code~ <script src="script.js"></script> ~/code~ - Voici quelques exemples d'utilisation basique de JavaScript dans un site web : 1. Afficher une alerte : ~code~ alert("Bonjour !"); ~/code~ 2. Modifier le contenu d'un élément HTML : ~code~ document.getElementById("monElement").innerHTML = "Nouveau contenu"; ~/code~ 3. Changer le style d'un élément HTML : ~code~ document.getElementById("monElement").style.backgroundColor = "red"; ~/code~ 4. Afficher ou masquer un élément HTML : ~code~ function toggleElement() { var element = document.getElementById("monElement"); if(element.style.display == "block") { element.style.display = "none"; } else { element.style.display = "block"; } } ~/code~ NB:La syntaxe des instructions conditionnelles if et else diffère entre Python et JavaScript. Exemple en Python : ~code~ x = 10 if x > 5: print("x est supérieur à 5") else: print("x est inférieur ou égal à 5") ~/code~ Exemple en JavaScript : ~code~ var x = 10; if (x > 5) { alert("x est supérieur à 5"); } else { alert("x est inférieur ou égal à 5"); } ~/code~ 5. Obtenir la date et l'heure actuelles : ~code~ var date = new Date(); console.log(date); ~/code~ 6. Changer la source d'une image ~code~ <img id="myImage" src="image1.jpg" /> <button onclick="changeImage()">Changer l'image</button> <script> function changeImage() { document.getElementById("myImage").src="image2.jpg"; } </script> ~/code~ - Les événements en JavaScript permettent de réagir à des actions de l'utilisateur ou à des changements sur la page. On peut par exemple détecter un clic sur un bouton, une soumission de formulaire, un survol de souris, etc. Exemple: 1. Événement onclick (clic) : ~code~ <button onclick="myFunction()">Cliquez-moi</button> <script> function myFunction() { alert("Le bouton a été cliqué"); } </script> ~/code~ Lorsque le bouton est cliqué, la fonction `myFunction()` est appelée, et le message "Le bouton a été cliqué" est affiché. 2. Événement onmouseover (survol de la souris) : ~code~ <button onmouseover="myFunction()">Survolez-moi</button> <script> function myFunction() { alert("La souris survole la div"); } </script> ~/code~ Lorsque la souris survole le bouton, la fonction `myFunction()` est appelée, et le message "La souris survole le bouton" est affiché. 3. Événement onchange (changement de valeur) : ~code~ <input type="text" onchange="myFunction()"> <script> function myFunction() { var inputValue = event.target.value; alert("La valeur a changé : " + inputValue); } </script> ~/code~ Lorsque la valeur du champ de saisie change (par exemple, lorsque vous le modifiez et quittez le champ), la fonction `myFunction()` est appelée, et le message "La valeur a changé : [valeur saisie]" est affiché. 4. Événement onkeydown (appui sur une touche) : ~code~ <input type="text" onkeydown="myFunction(event)"> <script> function myFunction(event) { var key = event.key; alert("Touche appuyée : " + key); } </script> ~/code~ Lorsque vous appuyez sur une touche dans le champ de saisie, la fonction `myFunction()` est appelée, et le message "Touche appuyée : [touche]" est affiché. 5. Événement onload (chargement de la page) : ~code~ <script> window.onload = function() { alert("La page est chargée"); }; </script> ~/code~ Lorsque la page est complètement chargée, la fonction anonyme associée à l'événement `onload` est exécutée, et le message "La page est chargée" est affiché dans. Ce ne sont là que quelques exemples d'événements en JavaScript. Il existe de nombreux autres événements, tels que `onsubmit`, `onmouseout`, `onfocus`, `onscroll`, etc., qui peuvent être utilisés pour détecter et répondre à différentes interactions utilisateur. - La manipulation du DOM (Document Object Model) en JavaScript permet de modifier la structure, le contenu et le style des éléments HTML d'une page. On peut accéder aux éléments, modifier leur contenu, ajouter ou supprimer des éléments, changer leur style, etc. - Pour le débogage en JavaScript, on peut utiliser des outils de développement intégrés aux navigateurs web tels que l'inspecteur de Chrome ou l'outil de développement de Firefox. Ces outils permettent de mettre des points d'arrêt, d'inspecter les valeurs des variables, d'exécuter du code pas à pas, de surveiller les erreurs, etc. - Pour réaliser des animations en JavaScript, on peut utiliser les fonctionnalités du DOM ou des bibliothèques externes telles que jQuery, owl carousel, slick slider, wow slider, aos etc... - Pour aller plus loin avec JavaScript, vous pouvez explorer les concepts avancés tels que l'utilisation de bibliothèques/frameworks (comme React, Angular ou Vue.js), l'utilisation de bases de données, les API externes (comme l'API Fetch pour récupérer des données), Ajax, la manipulation d'images et de médias, etc. JavaScript est un langage polyvalent et peut être utilisé dans de nombreux domaines du développement web et de l'application.

13 - Bonus | Perfectionnez Votre Site

Bienvenue à la dernière séance de la formation sur la création de sites Internet avec HTML, CSS et JavaScript ! Félicitations d'avoir terminé la réalisation de vos pages et de vous préparer à les mettre en ligne. Avant de vous lancer, voici quelques conseils pour éviter les surprises et améliorer votre site : 1. Gestion des caractères avec accents : Ajoutez la balise méta pour spécifier l'encodage UTF-8 dans l'en-tête de vos pages HTML : ~code~ <meta charset="UTF-8"> ~/code~ 2. Gestion de la responsivité avec Viewport : Le viewport est essentiel pour que votre site s'affiche correctement sur les appareils mobiles. Ajoutez cette balise dans l'en-tête : ~code~ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ~/code~ Explication : `width=device-width` signifie que le viewport aura la même largeur que l'appareil, `initial-scale=1` définit le niveau initial de zoom, et `shrink-to-fit=no` empêche le zoom automatique sur certains appareils. 3. Intégration du framework Bootstrap : https://getbootstrap.com/ Bootstrap est un framework front-end populaire qui vous offre un ensemble de styles prédéfinis et des fonctionnalités interactives. Ajoutez ces liens CDN dans l'en-tête pour intégrer Bootstrap à votre projet : ~code~  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> ~/code~ 4. Library AOS pour des animations au défilement : https://michalsnik.github.io/aos/ Utilisez la bibliothèque AOS pour ajouter des animations aux éléments lorsque l'utilisateur fait défiler la page. Incluez ces liens CDN dans l'en-tête et le pied de page : ~code~  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> ~/code~ Vous pouvez ensuite utiliser l'attribut `data-aos` sur les balises pour définir les animations, par exemple : ~code~ <div data-aos="fade-left">Contenu animé</div> ~/code~ Essayez aussi: fade-right, zoom-in-up, zoom-in-down, flip-down etc... pour plus, rendez-vous sur le site : https://michalsnik.github.io/aos/ 5. Intégration de tableaux : Les tableaux dans une page web servent principalement à organiser et à afficher des données sous forme de lignes et de colonnes. Ils sont utiles lorsque vous devez présenter des informations tabulaires de manière structurée. Pour créer des tableaux stylisés, utilisez la classe Bootstrap `table table-striped table-bordered`. Exemple : ~code~ <table class="table table-striped table-bordered">  </table> ~/code~ 6. Plugin JQuery Owl Carousel pour des diaporamas : Utilisez le plugin JQuery Owl Carousel pour créer des diaporamas d'images ou de contenu. Ajoutez ces liens CDN dans l'en-tête et le pied de page : ~code~  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> ~/code~ Utilisez la classe `owl-carousel` et le script jQuery pour initialiser le diaporama, comme indiqué dans l'exemple. ~code~ <div class="owl-carousel owl-theme"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div> $('.owl-carousel').owlCarousel({ loop:true, margin:10, autoplay:true, autoplayTimeout:3000, autoplayHoverPause:true, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }) ~/code~ Utilisez WOW Slider WOW Slider est un logiciel de création de diaporamas et de sliders pour des sites web. Rendez-vous sur le site officiel de WOW Slider : https://wowslider.com/ pour telecharger le logiciel. 7. Expérience utilisateur et design : Pour rendre votre site attrayant et convivial, assurez-vous de proposer une conception responsive, une navigation facile et une expérience utilisateur agréable. 8. Menu déroulant : Apprenez à créer des menus déroulants en utilisant des listes non ordonnées (UL) imbriquées. Voici un exemple basique : ~code~ <ul> <li><a href="#">Lien 1</a></li> <li> <a href="#">Lien 2</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </li> </ul> ~/code~ 9. Débogage de votre site : Apprenez à identifier et à corriger les erreurs CSS et JavaScript pour améliorer la qualité de votre site. En conclusion, votre apprentissage ne s'arrête pas ici. Continuez à apprendre et à explorer de nouvelles technologies en fonction de vos besoins et des évolutions du web. Bonne continuation dans vos projets de création de sites Internet !