bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Editors

A simple text editor is all you need to learn HTML.

Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad .

Windows 7 or earlier

Open Start > Programs > Accessories > Notepad

Step 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.

Step 2: Write Some HTML

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>

Step 3: Save the HTML Page

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).

Tip

You can use either .htm or .html as file extension. There is no difference; it is up to you.

Step 4: View the HTML Page in Your Browser

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:

With our free online editor, you can edit the HTML code and view the result in your browser.

It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:

Example

Formatted code
<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>

</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Live preview

Previous

HTML Introduction

Next

HTML Elements

This chapter

Overview
56

Lessons

191m

Read time

1. HTML Tutorial2. HTML Introduction3. HTML Editors4. HTML Elements5. HTML Attributes6. HTML Headings7. HTML Paragraphs8. HTML Styles9. HTML Text Formatting10. HTML Comments11. HTML Colors12. HTML RGB and RGBA Colors13. HTML HEX Colors14. HTML HSL and HSLA Colors15. HTML Styles - CSS16. HTML Links17. HTML Links - Different Colors18. HTML Links - Create Bookmarks19. HTML Images20. HTML Image Maps21. HTML Background Images22. HTML <picture> Element23. HTML Favicon24. HTML Page Title25. HTML Tables26. HTML Table Borders27. HTML Table Sizes28. HTML Table Headers29. HTML Table Padding & Spacing30. HTML Table Colspan & Rowspan31. HTML Table Styling32. HTML Table Colgroup33. HTML Lists34. HTML Unordered Lists35. HTML Ordered Lists36. HTML Other Lists37. HTML Block and Inline Elements38. HTML Div Element39. HTML class Attribute40. HTML id Attribute41. HTML Buttons42. HTML Iframes43. HTML JavaScript44. HTML File Paths45. HTML - The Head Element46. HTML Layout Elements and Techniques47. HTML Responsive Web Design48. HTML Computer Code Elements49. HTML Semantic Elements50. HTML Style Guide51. HTML Entities52. HTML Symbols53. Using Emojis in HTML54. HTML Encoding (Character Sets)55. HTML Uniform Resource Locators56. HTML Versus XHTML

On this page

Learn HTML Using Notepad or TextEditStep 1: Open Notepad (PC)Step 1: Open TextEdit (Mac)Step 2: Write Some HTMLStep 3: Save the HTML PageStep 4: View the HTML Page in Your Browser