Diving In - HTML Tutorial
The first thing we’re going to do is dive in and create a simple web page. We’ll explore what’s really happening shortly, but for now, just follow along and don’t worry too much about the details.
To create your web page, you’ll need:
-
A web browser (you’re using one right now)
-
A plain text editor
Step 1: Open a Text Editor
A text editor is a program used to edit plain text files. When writing HTML, avoid using word processors like Microsoft Word, Pages, or similar tools - they add formatting that breaks web code.
-
Windows: You can use Notepad (Start → Notepad)
-
macOS: You can use TextEdit (Applications → TextEdit)
-
Linux: You can use editors such as nano, vi, or gedit
That said, basic editors like Notepad and TextEdit are not ideal for long-term web development. They work, but they lack features that make coding easier and less error-prone.
If you use TextEdit, make sure it’s set to use plain text. Go to Settings (or Preferences) and set the format for new documents to Plain Text. You may also need to convert the current file using Format → Make Plain Text.
Using a basic editor for HTML is a bit like using a butter knife to cut a cake - it works, but it’s far from ideal. Most developers use more capable editors such as:
-
Visual Studio Code (Windows / macOS / Linux, free)
-
Notepad++ (Windows, free)
-
BBEdit (macOS, free)
-
Sublime Text (Windows / macOS / Linux, paid)
You don’t need to install one of these right now, but as you continue learning web development, using a proper code editor will make your life much easier.
Step 2: Create and Save the Web Page
Copy and paste the code from the example below, “A Simple Webpage”, into your text editor. Be sure to start with the line that begins with <html>.
<html>
<head>
<title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage.
</body>
</html>The words surrounded by angle brackets (< >) are called elements. We’ll explore what elements are and how they work shortly - for now, just focus on getting the page working.
Save the file in your home folder or Desktop as simple.html.
Note
If you’re using Notepad, make sure it doesn’t add .txt to the filename. In the Save As dialog, set File name to simple.html and change Save as type to All Files (*.*).
Step 3: View the Webpage in Your Browser
Open the file by pressing Ctrl + O (Cmd + O on macOS) in your browser and selecting simple.html.
Once opened, your webpage should appear in the browser window.
If it does - congratulations! 🎉 You’ve just created your first web page. Next, we’ll take a closer look at what’s actually happening behind the scenes.