How to Create a Website with HTML | Step-by-Step Beginner’s Guide

What is HTML?

HTML stands for HyperText Markup Language. It is a markup language used to create web pages. HTML is not a programming language but a structural language that defines how a webpage looks. It works together with CSS (Cascading Style Sheets) and JavaScript to build modern websites.

Importance of HTML

Building the structure of a webpage: With HTML, we can add text, images, links, videos, forms, and much more.
Instructions for the browser: A browser reads HTML files and displays them as a webpage for the user.
Beginner-friendly: HTML is very easy to learn and is essential for every web developer.

Basic Structure of an HTML Document

<!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</h1>
   <p>This is a simple HTML document.</p>
   <a href="https://www.example.com">Click here</a>
</body>
</html>

Important HTML Tags

<h1> to <h6> → For headings
<p> → For paragraphs
<a> → For links
<img> → To insert images
<ul> and <ol> → To create unordered and ordered lists
<table> → To create tables

Steps to Create a Website with HTML

Step 1: Tools You Need

Text Editor → To write code (Examples: Notepad++, VS Code, Sublime Text).
Web Browser → To preview your site (Examples: Google Chrome, Mozilla Firefox, Opera).

Step 2: Create an HTML File

Open your text editor, create a new file, and save it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My First Website</title>
</head>
<body>
   <h1>Welcome!</h1>
   <p>This is my first website made with HTML.</p>
</body>
</html>

Step 3: Using HTML Tags

Headings:

<h1>Main Heading</h1>
<h2>Sub-heading</h2>
<h3>Third-level heading</h3>

Paragraphs:

<p>This is a paragraph. Creating webpages with HTML is easy and fun.</p>

Links:

<a href="https://www.google.com" target="_blank">Go to Google</a>

Images:

<img src="image.jpg" alt="Image description" width="300">

Lists:

<ol>
   <li>Learn HTML</li>
   <li>Learn CSS</li>
   <li>Learn JavaScript</li>
</ol>

<ul>
   <li>Computer</li>
   <li>Mobile</li>
   <li>Tablet</li>
</ul>

Step 4: Adding CSS for Styling

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic Website Design</title>
   <style>
      body {font-family: Arial; margin:0; padding:0;}
      header {background:#007BFF; color:#fff; text-align:center; padding:10px;}
      nav {background:#0056b3; display:flex; justify-content:center; padding:10px;}
      nav a {color:#fff; margin:0 15px; text-decoration:none;}
      nav a:hover {text-decoration:underline;}
      footer {background:#343a40; color:#fff; text-align:center; padding:10px;}
   </style>
</head>
<body>
   <header><h1>Welcome to My Website</h1></header>
   <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
   </nav>
   <footer><p>&copy; 2025 My Website</p></footer>
</body>
</html>

Step 5: Creating a Form

<form action="/submit" method="POST">
   <label for="name">Name:</label>
   <input type="text" id="name" name="name"><br><br>

   <label for="email">Email:</label>
   <input type="email" id="email" name="email"><br><br>

   <label for="message">Message:</label><br>
   <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

   <input type="submit" value="Submit">
</form>

Step 6: Preview in Browser

Save your HTML file and open it in any browser to see your first website live on your computer.

Step 7: Organize Your Files

Keep HTML, CSS, images, and scripts in separate folders for better project management.

Step 8: Hosting Your Website

To make your website live online, use free hosting platforms such as:

GitHub Pages
Netlify
Vercel

Conclusion

Creating a website with HTML is very simple. By practicing regularly, you will learn how to build full websites and combine HTML with CSS and JavaScript for professional results.

👉 Start building your first website today and improve your web development skills!

Monabber Jaman Adib