Web Development Series #1
This lesson is the beginning of a series of lessons introducing topics for web development. We will begin this journey into coding by using Notepad on Windows. Notepad is a simple text editor that’s perfect to use for learning to write HTML, CSS, and JavaScript code. The following is a step-by-step guide to get you started:
Basic Structure of an HTML Webpage
Before going into using Notepad, let’s discuss about the basic HTML structure of a webpage. HTML stands for “HyperText Markup Language” is the standard language for creating web pages. Below I discuss the parts of the basic structure of every webpage.
- DOCTYPE Declaration: This tells the browser that the document is an HTML5 document (W3C, n.d.).
<!DOCTYPE html>
- HTML Element: This is the root element of an HTML page (W3C, n.d.).
<html>
- Head Element: Contains meta-information about the document, such as its title and linked resources (W3C, n.d.).
<head> <title>My First Web Page</title> </head> - Body Element: Contains the content of the document, such as text, images, and links (W3C, n.d.).
<body> <h1>Hello, world!</h1> <p>This is my first web page.</p> </body> - Closing HTML Element: Ends the HTML document (W3C, n.d.).
</html>
Putting it all together, here’s a simple example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>
Try it Out on Notepad
Notepad is the default text editor for Windows and is very easy to use to create your first webpage (Microsoft, 2023).
How to Access:
- Press the
Windowskey. - Type
Notepadand pressEnter.
Create and Save Your HTML File
Follow these steps to write and save your first HTML file:
Open Notepad
- Press the
Windowskey. - Type
Notepadand pressEnter.
Write Your HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>
Save Your File
- Click
File > Save As. - In the “Save as type” dropdown, select
All Files. - Name your file with a
.htmlextension (e.g.,index.html). - Choose a location to save your file and click
Save. 
View Your Webpage
- Open the location where you saved your HTML file.
- Double-click the file to open it in your default web browser.
- You should see a web page with a heading “Hello, world!” and a paragraph “This is my first web page.”
Summary
You’ve successfully created and viewed your first HTML file using Notepad on Windows. This simple exercise sets the foundation for more complex projects you’ll undertake as you progress in your web development journey.
Try This on Your Own
Now that you’ve learned the basics, try creating your own HTML file with different content. Experiment with adding more HTML elements and see how they appear in your browser.
References
- Microsoft. (2023). How to Use Notepad.
- W3C. (n.d.). HTML5 Specification.
