Writing and Running Your First HTML Page

Introduction

In this chapter, you will learn how to write and run your first HTML document. This includes creating a simple HTML file, writing basic HTML code, and viewing the output in a web browser. By the end of this chapter, you’ll have a fundamental understanding of how to create and display a web page.

Creating a Simple HTML File

Step 1: Open Your Text Editor

Launch the text editor of your choice (e.g., Visual Studio Code, Sublime Text, Notepad++).

Step 2: Create a New File

Go to the File menu and select "New File" or press the appropriate shortcut (e.g., Ctrl+N).

Step 3: Save the File

Save the file with a .html extension. For example, index.html.

Writing Basic HTML Code

Step 1: Start with the Basic Structure

Type the following code into your new file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is a paragraph of text on my web page.</p>
</body>
</html>

Step 2: Understanding the Code

<!DOCTYPE html>: Declares the document type and version of HTML.
<html lang="en">: The root element of an HTML document. The lang attribute specifies the language.
<head>: Contains meta-information about the document, such as its title and character set.
<meta charset="UTF-8">: Specifies the character encoding for the document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage is responsive.
<title>: Defines the title of the document, shown in the browser’s title bar.
<body>: Contains the content of the document, such as headings and paragraphs.

Viewing the Output in a Web Browser

Step 1: Open the HTML File in a Browser

Navigate to the folder where you saved index.html. Double-click the file to open it in your default web browser. Alternatively, you can right-click the file, select "Open with," and choose your preferred browser.

Step 2: See the Result

You should see a web page with a heading "Welcome to My First HTML Page" and a paragraph below it.

Conclusion

Writing and running your first HTML document is the initial step in web development. By creating a simple HTML file and viewing it in a web browser, you gain practical experience with the basic structure of an HTML document. This foundation will help you as you continue to explore and learn more about HTML and web development.