Getting Started with HTML

To start writing HTML, you don't need any special software or expensive tools. All you need is a text editor to write your code and a web browser to view your web pages. Both of these are already installed on your computer!

What You Need

1. A text editor to write your HTML code. You can use simple editors like Notepad (Windows) or TextEdit (Mac), or professional code editors like Visual Studio Code, Sublime Text, or Atom.
2. A web browser to view your HTML pages. Any modern browser works: Chrome, Firefox, Safari, Edge, or Opera.
3. Basic understanding of how to create and save files on your computer.
4. A folder on your computer where you'll save your HTML files and organize your projects.

Recommended Text Editors

While you can use any text editor, these are the most popular choices for web development:

• Visual Studio Code (VS Code) - Free, powerful, and the most popular choice among developers. It has excellent HTML support, auto-completion, syntax highlighting, and thousands of extensions. Highly recommended for beginners and professionals alike.
• Sublime Text - Fast, lightweight, and has a clean interface. It's great for quick edits and has powerful features for advanced users.
• Atom - Free and open-source, developed by GitHub. It's highly customizable and has a large community creating packages and themes.
• Notepad++ - Simple, lightweight, and perfect for Windows users. It's faster than regular Notepad and has syntax highlighting.
• Brackets - Designed specifically for web development by Adobe. It has live preview features that show changes in real-time.

We strongly recommend Visual Studio Code (VS Code) because it's free, powerful, and has excellent support for HTML, CSS, and JavaScript. It also has built-in Git integration and a terminal. You can download it from https://code.visualstudio.com/

Installing Visual Studio Code

1. Go to https://code.visualstudio.com/
2. Click the download button for your operating system (Windows, Mac, or Linux).
3. Run the installer and follow the installation wizard.
4. Once installed, open VS Code.
5. You're ready to start coding!

Creating Your First HTML File

Follow these steps carefully to create your first HTML file:

1. Create a new folder on your computer called my-first-website. This will be your project folder.
2. Open your text editor (VS Code or any editor you chose).
3. Create a new file by clicking File → New File.
4. Type or copy the HTML code shown below.
5. Save the file by clicking File → Save As.
6. Navigate to your my-first-website folder.
7. Name the file index.html (the .html extension is very important!).
8. Click Save.
9. Open your file explorer and navigate to the folder where you saved the file.
10. Double-click the index.html file to open it in your default web browser.
11. You should see your HTML page displayed in the browser!

Example: Your First HTML Page

Save this code as index.html and open it in your browser. You should see a heading that says "Welcome to HTML!" and two paragraphs below it.

Understanding File Names

The file name index.html is special in web development. When you visit a website, the web server automatically looks for a file named index.html in the folder. That's why most home pages are named index.html.

You can name your other HTML files anything you want, like about.html, contact.html, or products.html. Just make sure to always use the .html extension.

Viewing Your HTML File

There are several ways to open your HTML file in a browser:

• Double-click the file - This opens it in your default browser.
• Right-click and choose 'Open with' - This lets you choose which browser to use.
• Drag and drop - Drag the HTML file into an open browser window.
• Use VS Code Live Server - Install the Live Server extension in VS Code for automatic refresh when you save changes.

Important Notes

• Always save your HTML files with the .html extension, not .txt or .doc.
• HTML is not case-sensitive, but it's best practice to use lowercase for all tag names.
• Make sure to close all HTML tags properly. Every opening tag needs a closing tag (with few exceptions).
• Use proper indentation to make your code readable. Indent nested elements with spaces or tabs.
• Save your file before viewing it in the browser. If you make changes, save again and refresh the browser.
• Keep all your website files (HTML, CSS, images) in the same project folder for easy organization.

Common Beginner Mistakes

• Forgetting to save the file with .html extension
• Not saving changes before refreshing the browser
• Forgetting to close tags
• Typing tags incorrectly (typos)
• Not using proper indentation (makes code hard to read)

Congratulations! You've created your first HTML page. This is the beginning of your web development journey. In the next lessons, we'll learn about HTML syntax, elements, and how to create more complex web pages.