/03/2023

PROMPT : Peux-tu créer une superbe page web en moins de 20 lignes de code ?

Créer une page web simple et esthétique en moins de 20 lignes de code est possible en utilisant HTML et CSS. Voici un exemple minimaliste de code pour une page web avec un titre, un sous-titre et un bouton :

html
Copy code


<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma Superbe Page Web</title> <style> body {font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0;} h1 {color: #333;} h2 {color: #777;} a {background-color: #4CAF50; color: white; padding: 12px 24px; text-decoration: none; font-size: 16px; border-radius: 4px;} </style> </head> <body> <h1>Bienvenue sur ma superbe page web</h1> <h2>Créée en moins de 20 lignes de code</h2> <a href="https://example.com">Cliquez ici</a> </body> </html>


Dans cet exemple, nous utilisons les éléments HTML suivants :
<!DOCTYPE html> : définit le type de document.
<html> : indique le début et la fin du document HTML.
<head> : contient des informations sur le document qui ne sont pas affichées, telles que le titre et les balises de style.
<meta charset="UTF-8"> : définit l'encodage des caractères du document.
<title> : spécifie le titre du document, qui s'affiche dans l'onglet du navigateur.
<style> : contient les règles CSS pour styliser les éléments HTML.
<body> : représente le contenu principal du document, tel que le texte et les images.
<h1> et <h2> : sont des éléments de titre avec différentes tailles de police.
<a> : crée un lien hypertexte, qui peut être stylisé en tant que bouton avec des règles CSS.
Ce code crée une page web simple avec un arrière-plan clair, un titre et un sous-titre, et un bouton qui mène vers "https://example.com". Bien sûr, cette page web est très basique, et pour créer une page plus élaborée et attrayante, il faudrait utiliser davantage de lignes de code et éventuellement des bibliothèques ou des frameworks CSS tels que Bootstrap ou Tailwind CSS.


PROMPT : Un peu plus moderne et créative ?

Voici un exemple de page web un peu plus moderne et créative en utilisant HTML et CSS, tout en restant minimaliste en termes de lignes de code :


html
Copy code


<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ma Page Web Moderne</title> <style> * {box-sizing: border-box; margin: 0; padding: 0;} body {font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333;} .container {text-align: center; padding: 24px; background-color: #fff; border-radius: 8px;} h1 {color: #4CAF50; margin-bottom: 16px;} p {color: #777; margin-bottom: 24px;} a {background-color: #4CAF50; color: white; padding: 12px 24px; text-decoration: none; font-size: 16px; border-radius: 4px;} </style> </head> <body> <div class="container"> <h1>Bienvenue sur ma page web moderne</h1> <p>Créative et minimaliste</p> <a href="https://example.com">En savoir plus</a> </div> </body> </html>


Dans cet exemple, nous avons apporté quelques modifications pour rendre la page web plus moderne et créative :

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> : cette balise rend la page web responsive et adaptée aux différents appareils (ordinateurs, tablettes, smartphones).
  • Nous avons utilisé la propriété display: flex; pour centrer le contenu de la page verticalement et horizontalement.
  • Le contenu est maintenant affiché dans un conteneur avec un arrière-plan blanc et des coins arrondis.
  • La couleur du titre a été modifiée pour ajouter une touche de couleur vive.

Cette page web reste simple et minimaliste, mais elle est un peu plus moderne et créative que l'exemple précédent. Pour aller plus loin, vous pouvez ajouter des animations, des images ou des icônes, et utiliser des bibliothèques CSS telles que Bootstrap ou Tailwind CSS pour créer des designs plus élaborés.


PROMPT : Utiliser bootstrap et ajouter 5 boutons avec de jolies couleurs ?

Pour utiliser Bootstrap et ajouter 5 boutons avec de jolies couleurs, vous pouvez intégrer le lien CSS de Bootstrap dans votre en-tête HTML et créer les boutons en utilisant les classes de Bootstrap. Voici un exemple :

html
Copy code


<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Web avec Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body {font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f8f9fa;} .container {text-align: center;} .btn {margin: 0 8px 8px 0;} </style> </head> <body> <div class="container"> <h1>Bienvenue sur ma page web avec Bootstrap</h1> <p>5 boutons aux jolies couleurs :</p> <div> <a href="#" class="btn btn-primary">Bouton 1</a> <a href="#" class="btn btn-success">Bouton 2</a> <a href="#" class="btn btn-warning">Bouton 3</a> <a href="#" class="btn btn-danger">Bouton 4</a> <a href="#" class="btn btn-info">Bouton 5</a> </div> </div> </body> </html>


Dans cet exemple, nous avons intégré Bootstrap en ajoutant le lien <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> dans l'en-tête du document HTML.

Ensuite, nous avons ajouté les 5 boutons avec les classes de Bootstrap btn et les classes de couleurs btn-primary, btn-success, btn-warning, btn-danger et btn-info. Ces classes fournissent des styles prédéfinis pour les boutons.

Le code CSS dans la balise <style> est utilisé pour centrer le contenu de la page et ajouter une marge entre les boutons. La page web résultante présente un titre, un paragraphe et 5 boutons aux couleurs attrayantes et variées, en utilisant Bootstrap pour styliser les éléments.