How to Make a Simple Website with HTML

So, you want to build your own website? Awesome! It's easier than you think. This guide will show you how to make a simple website using HTML. We'll go over the basics, like how to structure your page, add images, and even make it look good. Whether you're brand new to this or just need a refresher, I hope this article helps you get started!

What's HTML, and Why Should I Care?

HTML? It stands for HyperText Markup Language. Basically, it's the foundation of every website you see. It's what tells the browser what to show, from headings to paragraphs and images. Think of it like this...

HTML is the skeleton of your website. It gives the website structure. Then, CSS adds the style, making it look pretty. And JavaScript? That makes it interactive. Without HTML, all you'd see is just plain text. Bleh.

Read Also: How to Make a Website Mobile-Friendly

HTML: Key Things to Know

Tags: These are keywords inside angle brackets. Like <p> or <h1>. Most come in pairs: a start tag and an end tag. Example: <p>This is my text.</p>
Elements: An element is a tag, plus the content inside. For example: <p>This is a paragraph!</p>
Attributes: These give you extra info about an element. They go inside the start tag. For example, <img src="myimage.jpg" alt="Picture of something">.
Doctype: This tells the browser what version of HTML you're using. For HTML5, it's just <!DOCTYPE html>. Simple!

Getting Ready to Code

Before you dive into coding, you'll need a couple of things. Don't worry; they're free!

A Text Editor: This is where you'll write your HTML. I suggest Visual Studio Code (VS Code). It's got helpful features like highlighting and error checking.
A Web Browser: Chrome, Firefox, Safari, Edge... Pick your favorite! You'll use it to see your website come to life.

That's all you need! No fancy software. Just a text editor and a browser.

Your First HTML File

Ready to write some code? Let's create your first HTML file. Here's how:

Open your text editor.
Create a new file.
Save it as index.html. The .html part is important!
Copy and paste this code into the file:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first website created with HTML.</p>
</body>
</html>

So, what does all that mean?

<!DOCTYPE html>: Tells the browser it's HTML5.
<html>: The main part of your page.
<head>: Info about your page, like the title.
<title>: What shows up in the browser tab.
<body>: This is what you see on the page.
<h1>: A big heading.
<p>: A paragraph of text.

Save the file. Now, open it in your browser. You should see "Hello, World!" and "This is my first website created with HTML." Congrats!

Adding More Stuff

Okay, let's add more content!

Headings

HTML has six levels of headings: <h1> to <h6>. <h1> is the biggest, <h6> is the smallest.

Like this:

<h1>My Awesome Website</h1>
<h2>About Me</h2>
<h3>My Interests</h3>
<h4>My Favorite Things</h4>
<h5>My Hobbies</h5>
<h6>My Pets</h6>

Paragraphs

Paragraphs? Just for text. Use the <p> tag.

Simple example:

<p>This is a paragraph of text. I can add more text here.</p>

Lists

HTML has two kinds of lists:

Ordered Lists (<ol>): These are numbered.
Unordered Lists (<ul>): These use bullet points.

For example:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

Links

Links connect different pages. Use the <a> tag. The href attribute is where you put the link.

Like this:

<a href="https://www.google.com"&gt;Visit Google</a>

You can also link to other pages on your site. If you have a page called about.html, you can link to it like this:

<a href="about.html">About Us</a>

Images

Add pictures using the <img> tag. The src attribute is the image's address. The alt attribute? That is in case the image breaks.

Here's how:

<img src="image.jpg" alt="Picture of a thing">

Make sure image.jpg is in the same folder as your HTML file. Or, use the full path to the image.

Putting It All Together

Here's an example of a complete HTML page:

<!DOCTYPE html>
<html>
<head>
  <title>My Simple Website</title>
</head>
<body>
  <h1>Welcome to My Website!</h1>
  <p>This is a simple website created with HTML.  I am learning about <strong>web development</strong>!</p>

  <h2>About Me</h2>
  <p>My name is [Your Name], and I'm learning how to <strong>code</strong> websites.  This is a very fun and engaging process.</p>

  <h3>My Favorite Things</h3>
  <ul>
    <li>Pizza</li>
    <li>Coding</li>
    <li>Cats</li>
  </ul>

  <h2>Links</h2>
  <p><a href="https://www.google.com"&gt;Visit Google</a></p>
  <p><a href="about.html">About Us</a></p>

  <h2>Image</h2>
  <p><img src="image.jpg" alt="A placeholder image"></p>
</body>
</html>

Don't forget to change image.jpg to your actual image. And create an about.html file if you want that link to work!

Making It Look Good with CSS

HTML is the structure. CSS is the style. CSS lets you change colors, fonts, layouts, everything!

Three ways to add CSS:

Inline CSS: Right inside the HTML tag.
Internal CSS: Inside the <head> section.
External CSS: In a separate .css file.

External CSS is usually best. It keeps things organized.

Example: Internal CSS

<!DOCTYPE html>
<html>
<head>
  <title>Styled Website</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Styled Website!</h1>
  <p>This website is styled using CSS.  We are changing the font and background color!</p>
</body>
</html>

See how we changed the font, background, and heading color? Experiment!

What's Next?

You did it! You learned how to make a simple website with HTML. You know the basics, created a file, added content, and even messed with CSS. Coding takes practice. So, don't be afraid to mess up!

What should you do now?

Learn More CSS: Dive deeper! Learn about layouts, animations, and making your site look good on phones.
Learn JavaScript: Make your site interactive! Add buttons that do things, and games!
Practice, Practice, Practice: Build more sites! Try different things!
Check Out Frameworks: Look into React, Angular, or Vue.js. These can help you build bigger, more complex sites.

Web development can be fun. Keep learning, keep building, and be amazed by what you create!