madamasterclass.com

📔 HTML et CSS

Exploration des notions de base en HTML et CSS.

Dans ce tutoriel, nous allons apprendre les bases du HTML et du CSS. Nous aborderons les éléments HTML, la structure d'une page, ainsi que la mise en forme avec CSS.

1. Introduction au HTML

HTML (HyperText Markup Language) est le langage de balisage utilisé pour créer des pages web. Il structure le contenu en utilisant des éléments.

2. Structure de base d'une page HTML

Voici la structure de base d'une page HTML :

<!DOCTYPE html>
<html>
<head>
  <title>Titre de la page</title>
</head>
<body>
  <h1>Bonjour le monde!</h1>
</body>
</html>
3. Introduction au CSS

CSS (Cascading Style Sheets) est utilisé pour styliser les éléments HTML. Il permet de contrôler la présentation et la mise en page.

4. Ajouter du CSS à votre page

Vous pouvez ajouter du CSS de trois manières : en ligne, interne ou externe. Voici un exemple de style interne :

<style>
  h1 {
    color: blue;
  }
</style>
5. Sélecteurs CSS

Les sélecteurs CSS permettent de cibler des éléments spécifiques. Voici un exemple de sélecteur de classe :

.ma-classe {
  background-color: yellow;
}
6. Mise en forme des éléments

Pour styliser les éléments, vous pouvez utiliser diverses propriétés CSS comme color, font-size, et margin :

h1 {
  color: red;
  font-size: 24px;
  margin: 20px;
}
7. Conclusion

Vous avez maintenant les bases du HTML et du CSS. Ce tutoriel vous a montré comment structurer une page web et comment appliquer des styles. Continuez à explorer ces technologies pour créer des sites web plus complexes !

Dans ce tutoriel, nous allons créer un petit formulaire stylisé avec HTML et CSS. Suivez les étapes ci-dessous pour le mettre en place.

1. Créer un fichier HTML

Commencez par créer un fichier nommé 📝 formulaire.html et ouvrez-le dans votre éditeur de code.

2. Ajouter la structure de base

Ajoutez la structure de base suivante à votre fichier :

<!DOCTYPE html>
<html>
<head>
    <title>Formulaire</title>
</head>
<body>
</body>
</html>


3. Créer le formulaire

Ajoutez le code suivant à l'intérieur de la balise <body> pour créer un formulaire simple :

<form>
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" required>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>

  <input type="submit" value="Envoyer">
</form>
4. Ajouter du CSS pour le style

Pour styliser le formulaire, ajoutez un style interne dans la section <head> :

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
  }<br>
  form {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
</style>
5. Tester votre formulaire

Enregistrez votre fichier et ouvrez-le dans un navigateur. Vous devriez voir votre formulaire stylisé. Remplissez les champs et cliquez sur "Envoyer".

6. Conclusion

Vous avez maintenant créé un formulaire simple avec HTML et CSS. Vous pouvez expérimenter avec différents styles et ajouter d'autres champs selon vos besoins. Continuez à explorer les possibilités offertes par le HTML et le CSS !

Dans ce tutoriel, nous allons créer une page web simple avec une image externe et du CSS pour le style. Suivez les étapes ci-dessous.

1. Architecture du projet

Votre projet doit avoir la structure suivante :

/mon_projet
│
├── assets
│   ├── css
│   │   └── style.css
│   └── img
│       └── image.jpg
└── page.html
2. Créer un fichier HTML

Créez un fichier nommé page.html dans le répertoire mon_projet et ouvrez-le dans votre éditeur de code.

3. Ajouter la structure de base

Ajoutez la structure de base suivante à votre fichier :

<!DOCTYPE html>
<html>
<head>
  <title>Page avec Image</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <img src="assets/img/image.jpg" alt="Description de l'image" class="mon-image">
</body>
</html>
4. Créer un fichier CSS

Créez un fichier nommé style.css dans le dossier assets/css.

5. Ajouter du style au CSS

Ajoutez le code suivant à style.css pour styliser votre image et la page :

body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  text-align: center;
}

.mon-image {
  width: 80%;
  border: 2px solid #336699;
  border-radius: 10px;
}
6. Tester votre page

Enregistrez vos fichiers et ouvrez page.html dans un navigateur. Vous devriez voir l'image stylisée au centre de la page.

7. Conclusion

Vous avez maintenant créé une page web avec une image externe et du CSS pour le style. N'hésitez pas à expérimenter avec d'autres images et styles pour personnaliser votre page !

Dans cette documentation, nous allons explorer les différentes balises HTML et les commandes CSS essentielles pour styliser vos pages web.

1. Balises HTML de base

HTML (HyperText Markup Language) utilise des balises pour structurer le contenu. Voici quelques balises essentielles :

  •                 1️⃣ <html> : Racine du document HTML.
  •                 2️⃣ <head> : Contient les métadonnées, le titre et les liens vers des fichiers CSS.
  •                 3️⃣ <title> : Définit le titre de la page affiché dans l'onglet du navigateur.
  •                 4️⃣ <body> : Contient le contenu visible de la page.
  •                 5️⃣ <h1> à <h6> : Balises de titres, de h1 (le plus important) à h6 (le moins important).
  •                 6️⃣ <p> : Définit un paragraphe.
  •                 7️⃣ <a> : Crée un lien hypertexte.
  •                 8️⃣ <img> : Insère une image.
  •                 9️⃣ <div> : Crée une division ou un conteneur.
  •                 🔟 <span> : Crée une section en ligne.

2. Attributs communs des balises

Les balises HTML peuvent avoir des attributs pour fournir des informations supplémentaires :

  •                 1️⃣ id : Identifiant unique pour un élément.
  •                 2️⃣class : Classe pour appliquer des styles CSS.
  •                 3️⃣ src : Source pour les éléments d'image et de script.
  •                 4️⃣ href : Lien pour les balises d'ancrage.
  •                 5️⃣ alt : Texte alternatif pour les images.

3. Commandes CSS de base

CSS (Cascading Style Sheets) est utilisé pour styliser les éléments HTML. Voici quelques commandes CSS courantes :

  •                 1️⃣ color : Définit la couleur du texte.
  •                 2️⃣ background-color : Définit la couleur d'arrière-plan d'un élément.
  •                 3️⃣ font-size : Définit la taille de la police.
  •                 4️⃣ font-family : Définit la police utilisée pour le texte.
  •                 5️⃣ margin : Définit l'espace extérieur autour d'un élément.
  •                 6️⃣ padding : Définit l'espace intérieur d'un élément.
  •                 7️⃣ border : Définit la bordure d'un élément.
  •                 8️⃣ display : Définit comment un élément est affiché (block, inline, etc.).
  •                 9️⃣ text-align : Définit l'alignement du texte.
  •                 🔟 width et height : Définit la largeur et la hauteur d'un élément.

4. Conclusion

Cette documentation vous a présenté les balises HTML essentielles et les commandes CSS de base. En combinant ces éléments, vous pouvez créer des pages web attrayantes et fonctionnelles. Continuez à explorer et à expérimenter pour approfondir vos connaissances !

Exercice 1: ★ ★ ★ ☆ ☆

Décrivez la structure de base d'un document HTML. Quelles sont les balises essentielles à inclure ?

Solution :
La structure de base d'un document HTML comprend les balises suivantes : <!DOCTYPE html> pour définir le type de document, <html> comme racine, <head> pour les métadonnées (titre, liens vers les CSS), et <body> pour le contenu visible. Les balises essentielles incluent <title>, <h1> à <h6>, <p>, <a>, et <img>.

Exercice 2: ★ ★ ★ ★ ☆

Expliquez le rôle des balises de sectionnement en HTML5, telles que <header>, <nav>, <section>, et <footer>. Pourquoi sont-elles importantes ?

Solution :
Les balises de sectionnement en HTML5, comme <header> pour l'en-tête, <nav> pour la navigation, <section> pour les sections de contenu, et <footer> pour le pied de page, améliorent la sémantique et l'accessibilité. Elles permettent aux moteurs de recherche et aux lecteurs d'écran de mieux comprendre la structure d'une page, facilitant ainsi la navigation.

Exercice 3: ★ ★ ★ ★ ★

Créez un formulaire simple en HTML avec les champs suivants : nom, email et un bouton de soumission. Montrez le code nécessaire.

Solution :
Voici un exemple de code pour un formulaire simple :
<form>
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" required>
  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Envoyer">
</form>

Exercice 4: ★ ★ ★ ☆ ☆

Décrivez comment utiliser le CSS pour styliser un élément <h1>. Donnez un exemple de code CSS.

Solution :
Pour styliser un élément <h1>, vous pouvez utiliser le sélecteur CSS h1 et définir des propriétés comme la couleur, la taille de police, et le fond. Par exemple :
h1 {
  color: blue;
  font-size: 24px;
  background-color: lightgray;
}

Exercice 5: ★ ★ ★ ★ ★

Quelles sont les différences entre les sélecteurs de classe et d'identifiant en CSS ? Donnez des exemples de code.

Solution :
Les sélecteurs de classe (.) s'appliquent à plusieurs éléments, tandis que les sélecteurs d'identifiant (#) s'appliquent à un seul élément. Exemples :
Pour une classe :
.my-class {
  color: red;
}
Pour un identifiant :
#my-id {
  font-weight: bold;
}

Forum(s) associé(s)

Dec 21 2015

L'Art de la Philosophie : Interprétations et Débats

08 Apr, 2016

Explorez comment l'art et la philosophie s'entrelacent pour questionner notre perception de la réalité et de l'esthétique.

Read more.
Jan 24 2016

Voyage à Travers la Liberté : Concepts et Dilemmes

27 Jan, 2014

Plongez dans les débats philosophiques sur la liberté, ses implications éthiques et les défis contemporains qui l'entourent.

Read more.
May 18 2016

La Quête de la Vérité : Philosophies et Perspectives

30 Feb, 2015

Découvrez les différentes approches philosophiques de la vérité et comment elles influencent notre compréhension du monde.

Read more.
Page:

Articles exclusifs

    Ateliers Pratiques

    Ateliers en Informatique

    March 25, 2016

    Ateliers en Mathématiques

    April 23, 2016

    Ateliers de Développement Personnel

    July 12, 2016

    Ateliers en Sciences Appliquées

    June 29, 2016

    Tags

    Ambohijanaka, Antananarivo madamasterclass@gmail.com +261 34 14 441 63

    Nos cours

    Liens

    Support

    © 2015-2025 madamasterclass. Tous droits réservés