Section 1. Introduction. 1.4 Using Notepad or TextEdit to create your first webpage

I will show you how to create your first webpage in a simple text editor like Notepad (PC) or TextEdit (Mac).

Creating the webpage with Notepad

1. Open Notepad (PC). Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen) and type in Notepad; Windows 7 or earlier: Open Start -> Programs -> Accessories -> Notepad

2.Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
HTML editor Notepad by Acoptex Trainings

3. Save the file on your computer. Select File -> Save as in the Notepad menu. Name the file “index.htm” and set the encoding to UTF-8 (which is the preferred encoding for HTML files). You can use either .htm or .html as file extension. There is no difference, it is up to you.

Saving html in Notepad by Acoptex Trainings

4. Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with“). The result will look much like this:

Html page in Google Chrome by Acoptex Trainings

Creating the webpage with Textedit

  1. Open TextEdit (MAC). Open Finder -> Applications -> TextEdit

Also change some preferences to get the application to save files correctly. In Preferences -> Format -> choose “Plain Text”. Then under “Open and Save“, check the box that says “Display HTML files as HTML code instead of formatted text“. Then open a new document to place the code.

2.Write or copy the following HTML code into TextEdit:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
HTML editor Notepad by Acoptex Trainings

3. Save the file on your computer.

4. Open the saved HTML file in Safari browser.

Wrapping out

We have an idea how to create webpages in Notepad and Textedit now.

Thank you for reading.

Check for more tutorials at acoptex.lt.

Check for Arduino and Raspberry Pi projects on our website acoptex.com.

Section 1. Introduction. 1.2 HTML basics

Section 1. Introduction. 1.3 Installing software and popular extensions

Section 1. Introduction. 1.4 Using Notepad or TextEdit to create your first webpage