Introduction
🧑💻 Nouveau sur Linux ou sur LabEx? Nous vous recommandons de commencer par le cours Quick Start with Linux.
Bonjour et bienvenue sur LabEx! Dans ce premier laboratoire, vous allez apprendre le programme classique "Hello, World!" en CSS.
Cliquez sur le bouton Continue ci-dessous pour commencer le laboratoire.
Bonjour CSS
Nous avons déjà créé le fichier index.html dans l'éditeur WebIDE. Ouvrons-le et ajoutons du code HTML.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
Ensuite, cliquez sur le bouton Go Live en bas à droite. Cela lancera un serveur web local sur le port 8080.
Maintenant, vous pouvez basculer vers l'onglet Web 8080 et cliquer sur le bouton de rafraîchissement pour voir les modifications.
Ajouter du CSS
Ajoutons du code CSS au fichier index.html.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
Basculez vers l'onglet Web 8080 et cliquez sur le bouton de rafraîchissement pour voir les modifications.
Utilisation de CSS externe
Nous avons déjà créé le fichier style.css dans l'éditeur WebIDE. Ouvrons-le et ajoutons du code CSS.
h1 {
color: red;
}
p {
color: blue;
}
Ensuite, modifions le fichier index.html pour utiliser le fichier CSS externe.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Basculez vers l'onglet Web 8080 et cliquez sur le bouton de rafraîchissement pour voir les modifications.
Résumé
Félicitations! Vous avez terminé votre premier laboratoire LabEx.
Si vous souhaitez en savoir plus sur LabEx et sur la façon de l'utiliser, vous pouvez visiter notre Support Center. Ou vous pouvez regarder la vidéo pour en savoir plus sur LabEx.
La programmation est un long chemin, mais le Prochain laboratoire n'est qu'à un clic de distance. Allons-y!
