madamasterclass.com
Exploration des notions de base en HTML et CSS.
Le HTML (HyperText Markup Language) et le CSS (Cascading Style Sheets) sont les langages fondamentaux pour créer des pages web. Ensemble, ils forment la structure et le style de tous les sites que tu visites !
Imagine que tu construis une maison :
Éducation
<!DOCTYPE html>
<html>
<head>
<title>Ma Page</title>
<style>
body { font-family: Arial; background-color: #f0f0f0; }
h1 { color: blue; }
</style>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Mon premier site web.</p>
</body>
</html>
Figure 1 : HTML (structure) vs CSS (style)
<!DOCTYPE html> <!-- Déclaration du type -->
<html> <!-- Racine du document -->
<head> <!-- En-tête (invisible) -->
<meta charset="UTF-8">
<title>Titre</title>
</head>
<body> <!-- Corps (visible) -->
<!-- Contenu ici -->
</body>
</html>
<article>
<h2>Mon Article</h2>
<p>Un paragraphe avec un
<a href="#">lien</a>.</p>
<img src="photo.jpg"
alt="Une photo">
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
</article>
sélecteur {
propriété: valeur;
/* Commentaire */
}
/* Exemple : */
h1 {
color: blue;
font-size: 24px;
margin-bottom: 20px;
}
Le CSS se compose de :
1. En ligne (dans le HTML) :
<p style="color: red;">Texte rouge</p>
2. Dans le <head> :
<style>
p { color: red; }
</style>
3. Fichier séparé (recommandé) :
<link rel="stylesheet" href="style.css">
Couleur & texte
Boîte
Arrière-plan
Affichage
| Sélecteur | Exemple | Description |
|---|---|---|
| Élément | p | Tous les <p> |
| Classe | .ma-classe | class="ma-classe" |
| ID | #mon-id | id="mon-id" |
| Combinaison | div.ma-classe | <div class="ma-classe"> |
Crée une page web personnelle avec :
Je suis en terminale et j'adore créer des sites web ! J'apprends le HTML/CSS depuis 1 mois.
Quand tu as fini, essaie de :
Félicitations ! Tu as maintenant les bases pour créer tes propres pages web. Le HTML et CSS sont des langages puissants qui te permettront de réaliser des projets concrets. Plus tu pratiqueras, plus tu deviendras à l'aise.
© 2024 - Cours d'introduction au HTML/CSS - Niveau Lycée
Créé avec 💙 pour les élèves débutants
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.
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.
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>
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.
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>
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;
}
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;
}
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.
Commencez par créer un fichier nommé 📝 formulaire.html et ouvrez-le dans votre éditeur de code.
Ajoutez la structure de base suivante à votre fichier :
<!DOCTYPE html> <html> <head> <title>Formulaire</title> </head> <body> </body> </html>
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>
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>
Enregistrez votre fichier et ouvrez-le dans un navigateur. Vous devriez voir votre formulaire stylisé. Remplissez les champs et cliquez sur "Envoyer".
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.
Votre projet doit avoir la structure suivante :
/mon_projet │ ├── assets │ ├── css │ │ └── style.css │ └── img │ └── image.jpg └── page.html
Créez un fichier nommé page.html dans le répertoire mon_projet et ouvrez-le dans votre éditeur de code.
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>
Créez un fichier nommé style.css dans le dossier assets/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;
}
Enregistrez vos fichiers et ouvrez page.html dans un navigateur. Vous devriez voir l'image stylisée au centre de la page.
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.
HTML (HyperText Markup Language) utilise des balises pour structurer le contenu. Voici quelques balises essentielles :
Les balises HTML peuvent avoir des attributs pour fournir des informations supplémentaires :
CSS (Cascading Style Sheets) est utilisé pour styliser les éléments HTML. Voici quelques commandes CSS courantes :
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 !
Décrivez la structure de base d'un document HTML. Quelles sont les balises essentielles à inclure ?
Expliquez le rôle des balises de sectionnement en HTML5, telles que <header>, <nav>, <section>, et <footer>. Pourquoi sont-elles importantes ?
Créez un formulaire simple en HTML avec les champs suivants : nom, email et un bouton de soumission. Montrez le code nécessaire.
Décrivez comment utiliser le CSS pour styliser un élément <h1>. Donnez un exemple de code CSS.
Quelles sont les différences entre les sélecteurs de classe et d'identifiant en CSS ? Donnez des exemples de code.
