1. Types of Editors: WYSIWYG vs. Plain Text Editors

There are two main types of editors you can use:

• WYSIWYG Editors (What You See Is What You Get):

  • Tools like Dreamweaver allow you to design web pages visually without needing to know how to code.
  • They are easy to use, similar to editing a Word document or an email.
  • Why we don’t recommend it: While WYSIWYG tools are convenient, they hide the underlying HTML structure. This means you won’t truly understand what’s happening behind the scenes.

• Plain Text Editors:

  • These editors allow you to write raw HTML code.
  • Examples include:
    • Notepad (Windows)
    • Sublime Text (recommended in this tutorial)
  • Sublime Text is free to use but shows an "unregistered" mark unless you purchase it.
  • Why we recommend it: Plain text editors teach you how HTML works, giving you complete control over your code.

---

2. Setting Up Your Editor

For this tutorial, we’ll use Sublime Text. Here’s what you need to do:

1. Download and Install Sublime Text:

   • Visit the Sublime Text website.
   • Install it for your operating system (Windows, macOS, or Linux).

2. Open a New File:

   • Launch Sublime Text and create a new file by selecting:
     • File > New File

---

3. Creating Your First HTML File

Let’s create a basic HTML file called HelloWorld.html. Follow these steps:

1. Save the File with an HTML Extension:

   • Go to File > Save As
   • Save the file to your desktop (or another location).
   • Name the file: HelloWorld.html

2. Why .html?

   • The .html extension tells the computer and web browsers that this file contains HTML code.

---

4. Testing Your HTML File

Once you’ve saved the file, let’s see what happens:

1. Locate the HelloWorld.html file you saved.
2. Drag and drop it into any web browser (e.g., Chrome, Firefox, Safari, etc.).
3. You’ll see that the browser opens the file, but it appears blank—this is normal because the file currently has no content inside it.

---

5. About Web Browsers

At this stage, the browser you use doesn’t matter because basic HTML renders the same way in most browsers.

• Examples of browsers:
  • Chrome
  • Firefox
  • Safari
  • Internet Explorer / Edge

However, later in web development, you’ll want to test your website in different browsers since they may interpret code slightly differently.

---

Summary

By the end of this tutorial, you’ve:

• Learned about WYSIWYG editors and why we use plain text editors instead.
• Installed and set up Sublime Text.
• Created and saved your first HTML file: HelloWorld.html.
• Tested the file in a browser to see how it works.

---

What’s Next?

In the next tutorial, we’ll dive deeper into writing content for your HTML file and adding structure to your web pages. Stay tuned!