How to Create a Simple HTML Web Page from Scratch

The first step for anyone starting out in web development is to create a basic HTML webpage. The standard language used to organize web information is called HTML, or Hyper Text Markup Language. We'll show you how to create a simple webpage from scratch in this tutorial.

What You Need

A text editor, such as Notepad++, Sublime Text, or Visual Studio Code.
A web browser, such as Microsoft Edge, Mozilla Firefox, or Google Chrome

Step 1: Create the HTML File

Create a new file in your text editor.
Save the file as index.html or another file with the.html extension. This indicates to the system that the file is HTML.

Step 2: Add the Basic HTML Structure

Every HTML document follows a standard structure. Add the following code to your file:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page!</h1>
    <p>This is a paragraph of text on my first web page.</p>
  </body>
</html>

Explanation of the Code:

<!DOCTYPE html>: Declares the document as an HTML5 file.
<html>: The root element that contains all other HTML content.
<head>: Contains meta-information about the document (e.g., the title and linked stylesheets).
<title>: Specifies the title of the web page, displayed in the browser tab.
<body>: Contains the visible content of the web page, such as headings and paragraphs.

Step 3: Add More Content

Enhance your page by including more HTML elements. For example:

<body>
  <h1>Welcome to My Web Page!</h1>
  <p>This is a paragraph of text on my first web page.</p>

  <h2>About Me</h2>
  <p>I am learning how to build web pages with HTML.</p>

  <ul>
    <li>I love coding</li>
    <li>I enjoy learning new things</li>
    <li>I’m excited about web development</li>
  </ul>

  <a href="https://example.com">Visit my favorite website</a>
</body>

New Elements Added:

<h2>: A smaller heading.
<ul> and <li>: Create an unordered list with list items.
<a>: Creates a hyperlink.

Step 4: Open the File in a Browser

Save your index.html file.
Open your file explorer, navigate to where you saved the file, and double-click it. The file will open in your default browser.
Voila! You’ll see your first web page live in action.

Step 5: Customize with Inline CSS

Make your page more visually appealing by adding some inline CSS.

<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>
<a href="https://example.com" style="text-decoration: none; color: green;">Visit my favorite website</a>

Explanation:

The style attribute allows you to apply CSS directly to an HTML element.
In the example, the paragraph text is blue and 18px in size, and the link has no underline and is green.

Next Steps

Once you’ve created your first HTML web page, you can explore:

Adding images with the <img> tag.
Linking external CSS files for better styling.
Using JavaScript to add interactivity.

Conclusion

Creating a basic HTML web page is a simple yet powerful way to start your web development journey. As you practice and build more pages, you’ll gain confidence and discover the endless possibilities of web development. Happy coding!

How to Create a Simple HTML Web Page from Scratch