Web Development Series #1 TextEdit
This lesson is part of a series introducing topics for web development. We will begin this journey into coding by using TextEdit on macOS. TextEdit is a simple text editor that’s perfect 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 TextEdit, let’s discuss the basic HTML structure of a webpage. HTML stands for “HyperText Markup Language” and 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 TextEdit
TextEdit is the default text editor for macOS and is very easy to use to create your first webpage (Apple, 2023).
How to Access:
- Open the
Applicationsfolder. - Find and open
TextEdit.
Create and Save Your HTML File
Follow these steps to write and save your first HTML file:
Open TextEdit
- Open the
Applicationsfolder. - Find and open
TextEdit.
Switch to Plain Text Mode
- Click
TextEdit > Preferencesfrom the menu. - In the “New Document” tab, select
Plain Text. - Close the preferences window.
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. - Name your file with a
.htmlextension (e.g.,index.html). - Ensure “If no extension is provided, use .txt” is unchecked.
- 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 TextEdit on macOS. 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
- Apple. (2023). How to Use TextEdit.
- W3C. (n.d.). HTML5 Specification.
