HTML Tutorial
HTML Editors
Write HTML in any text editor, then open the file in a browser — or use the StudyGrid live preview.
You already have an editor
HTML is plain text. You do not need a special HTML program to start. Notepad on Windows, TextEdit on macOS, or VS Code all work. The file extension is what matters: save the file as .html, then open it in a browser.
A dedicated editor such as VS Code adds color, line numbers, and file trees. Those extras help, but they are not required for a first page.
Save as .html
Create a new file, type a short document, and save it with an .html name. In Notepad, chooseSave as, set the type to All Files, and name the file index.html. If you leave the type as Text Document, Windows may append .txt and the browser will not treat it as HTML.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Saved from an editor</title>
</head>
<body>
<h1>Hello from a file</h1>
<p>This file lives on my computer.</p>
</body>
</html>Use a simple name with no spaces: index.html, about.html, page-one.html. Spaces and special characters make paths harder later.
Open the file in a browser
Double-click the file, or drag it onto a Chrome, Edge, Firefox, or Safari window. The address bar shows afile:// path, not https://. That is normal. The browser is reading the file from disk, not from a website.
After you change the file, save it, then refresh the tab. The page updates. If nothing changes, confirm you saved the same file the browser has open.
StudyGrid live preview
You can also type HTML in StudyGrid and see the result immediately. Click Try it in HTMLunder an example. That opens /html/try — a live page preview.
Example
<h1>Preview this heading</h1>
<p>Change this sentence and watch the preview.</p>The live preview is useful for trying tags quickly. Saving a real .html file is useful when you want several pages that link to each other.
You do not need a server
Static HTML — headings, paragraphs, links, images next to the file — runs without a web server. Open the file, and the browser renders it. A server becomes useful later: forms that post data, Python backends, or pages that must stay on a public URL.
For this tutorial, a file on disk or the StudyGrid preview is enough. You are learning markup, not hosting.
Notepad, VS Code, and the rest
| Editor | Good for | Watch out for |
|---|---|---|
| Notepad | A first file on Windows | Must save as All Files, not .txt |
| VS Code | Folders, many files, extensions | Nothing required to install at first |
| TextEdit | A first file on macOS | Switch to plain text, not rich text |
| StudyGrid /html/try | Trying examples from this course | Not a substitute for saving homework files |
A workflow that sticks
- Create a folder such as
html-practice. - Save
index.htmlin that folder. - Open the file in Chrome.
- Edit, save, refresh.
Keep images in the same folder when you reach the images chapter. Relative paths stay short, and the page still works without a server.
Do not write HTML in a word processor and export it. Word and Google Docs add extra markup you do not want to learn from. Stick to a text editor or the StudyGrid preview.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Chemistry
A sample label you can save
An editor is a text file. Save it as .html and open it in a browser. The bottle on the bench needs a label before you weigh; the file needs a name before the browser can load it.
VS Code, Notepad, or the StudyGrid preview all write the same tags. The browser does not care which editor you used.
Example
<h1>Sample</h1>
<p>CuSO4·5H2O</p>
<p>Ready to weigh. Save this file, then open it.</p>Engineering
A board status page
Firmware prints a boot line on a serial port. A web dashboard does the same job in HTML: one heading that says the device is alive.
Write it in any editor. The useful loop is save, refresh, read — not the brand of the text box.
Example
<h1>logger v1</h1>
<p>Status: ok</p>
<p>Edit this file. Refresh the browser.</p>