Sarmate.net allows you to create interactive web pages directly in your browser. Perfect for interactive exercises, mathematical demonstrations, or enriched course materials.
Why Create HTML Files?
HTML files on Sarmate.net offer unique possibilities:
- Interactivity : buttons, forms, JavaScript animations
- Dynamic Graphics : manipulable curves with JSXGraph
- Live Calculations : Python execution in the browser
- Easy Sharing : one link is all you need to share your page
Use Cases
Interactive math exercises, physics simulations, online courses, algorithm demonstrations, self-correcting quizzes...
Create an HTML File
Access the File Manager
Log in and open your workspace.
Create a New File
Click on New File and select the type HTML (.html).
Name Your File
Enter a name, for example my-exercise.html.
Basic Structure
Here is the minimal skeleton of an HTML page:
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My interactive page</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Welcome to my page</h1>
<p>This is a paragraph of text.</p>
<script>
// Your JavaScript code here
console.log("Page loaded!");
</script>
</body>
</html>The Three Essential Parts
<head>: metadata, title, CSS styles<body>: visible content of the page<script>: JavaScript code for interactivity
Preview Your Page
The Sarmate.net editor displays a real-time preview of your HTML page. Each modification is immediately visible.
Reloading
If the preview doesn't update automatically, click the Refresh button in the preview panel.
Example: Interactive Button
Here is a simple example with a button that modifies the page content:
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Interactive Counter</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>Interactive Counter</h1>
<div id="compteur">0</div>
<button onclick="incrementer()">+1</button>
<button onclick="reinitialiser()">Reset</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>Share Your Page
Once your page is created, you can easily share it:
- Click the Share button in the editor
- Copy the generated link
- Send this link to your students or colleagues
The link allows direct access to the page without needing an account.
What's Next?
Explore the advanced features:
- Interactive JavaScript : forms, validation, animations
- JSXGraph Charts : curves, dynamic geometry
- Python in the Browser : calculations, algorithms