Sarmate.net permet de créer des pages web interactives directement dans votre navigateur. Idéal pour des exercices interactifs, des démonstrations mathématiques, ou des supports de cours enrichis.
Pourquoi créer des fichiers HTML ?
Les fichiers HTML sur Sarmate.net offrent des possibilités uniques :
- Interactivité : boutons, formulaires, animations JavaScript
- Graphiques dynamiques : courbes manipulables avec JSXGraph
- Calculs en direct : exécution de Python dans le navigateur
- Partage facile : un lien suffit pour partager votre page
Créer un fichier HTML
Accédez au gestionnaire de fichiers
Connectez-vous et ouvrez votre espace de travail.
Créez un nouveau fichier
Cliquez sur Nouveau fichier et sélectionnez le type HTML (.html).
Nommez votre fichier
Entrez un nom, par exemple mon-exercice.html.
Structure de base
Voici le squelette minimal d'une page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma page interactive</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est un paragraphe de texte.</p>
<script>
// Votre code JavaScript ici
console.log("Page chargée !");
</script>
</body>
</html>Les trois parties essentielles
<head>: métadonnées, titre, styles CSS<body>: contenu visible de la page<script>: code JavaScript pour l'interactivité
Prévisualiser votre page
L'éditeur Sarmate.net affiche un aperçu en temps réel de votre page HTML. Chaque modification est immédiatement visible.
Exemple : bouton interactif
Voici un exemple simple avec un bouton qui modifie le contenu de la page :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Compteur interactif</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
#compteur {
font-size: 48px;
color: #2563eb;
margin: 20px 0;
}
button {
padding: 15px 30px;
font-size: 18px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background: #1d4ed8;
}
</style>
</head>
<body>
<h1>Compteur interactif</h1>
<div id="compteur">0</div>
<button onclick="incrementer()">+1</button>
<button onclick="reinitialiser()">Réinitialiser</button>
<script>
let valeur = 0;
function incrementer() {
valeur++;
document.getElementById('compteur').textContent = valeur;
}
function reinitialiser() {
valeur = 0;
document.getElementById('compteur').textContent = valeur;
}
</script>
</body>
</html>Partager votre page
Une fois votre page créée, vous pouvez la partager facilement :
- Cliquez sur le bouton Partager dans l'éditeur
- Copiez le lien généré
- Envoyez ce lien à vos élèves ou collègues
Le lien permet d'accéder directement à la page sans avoir besoin de compte.
Et maintenant ?
Explorez les fonctionnalités avancées :
- JavaScript interactif : formulaires, validation, animations
- Graphiques JSXGraph : courbes, géométrie dynamique
- Python dans le navigateur : calculs, algorithmes