> For the complete documentation index, see [llms.txt](https://olise-eke.gitbook.io/frontend-tutorial-for-beginners/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olise-eke.gitbook.io/frontend-tutorial-for-beginners/overview/html/why-learn-html/html-editors.md).

# HTML Editors

Create your first web web page with HTML Editors.

**HTML Editors**

Web pages can be created using HTML editors. There are various editors you can use to define a web page but for learning purpose I will recommend a simple text editor like Notepad for (PC) or TextEdit when studying with (Mac).

Create your first web web page using Notepad or TextEdit by following the instructions listed below.

For Windows 8 users and later, follow these to launch Notepad:

1. From the windows search type "Notepad" and double click on the icon to open.

<figure><img src="https://67662996-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9Reytf54ezIPxRCjqfrl%2Fuploads%2F7fsswq44pRCenUKaa0hh%2Fnote1.PNG?alt=media&amp;token=85667d71-f438-4005-9444-b4382d14eda3" alt=""><figcaption></figcaption></figure>

2. Write the following HTML code into Notepad:

<figure><img src="https://67662996-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9Reytf54ezIPxRCjqfrl%2Fuploads%2Fw8GdUZnamIWzoD9Ws5Ux%2Fnotepad.PNG?alt=media&amp;token=ab943fdb-96e9-4eef-9c57-cd91eb0979b5" alt=""><figcaption></figcaption></figure>

3. Save the file on your computer by following these steps:

Click on **File**&#x20;

&#x20;**C**lick **Save as**&#x20;

Name the file **"index.html"**&#x20;

Set the **Save-As** as **All Files**&#x20;

Select encoding to **UTF-8** (which is the preferred encoding for HTML files).

<figure><img src="https://67662996-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9Reytf54ezIPxRCjqfrl%2Fuploads%2FXLpRff51iHai3KsuWpG5%2Fsave.PNG?alt=media&amp;token=27828890-1d23-4d9a-bdcb-fc233a2e91a1" alt=""><figcaption></figcaption></figure>

4. Go ahead and open the saved HTML file in your favorite browser, follow these steps **<"**&#x64;ouble click on the saved file, or right-click - and choose "Open with"**>**.

   The saved HTML file when opened will give this output:&#x20;

<figure><img src="https://67662996-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9Reytf54ezIPxRCjqfrl%2Fuploads%2F8EQRkwTVi25xAXhTvQUc%2Fcalculator.PNG?alt=media&amp;token=2bb5218d-8cbf-49a0-91ad-5ed45b039644" alt=""><figcaption></figcaption></figure>
