How to Make a Simple Website with HTML

Want to build your own website? It might seem hard, but with HTML, it's easier than you think! This guide will show you how to create a simple website using HTML. Even if you've never coded before.

Intro to HTML Websites

Why Bother With HTML?

HTML is what every website uses. It's how browsers know what to show you. Think of it as the skeleton of a website.

Learning HTML is key if you want to: Build websites. Understand how websites work. Even improve your website's ranking on Google!

Read Also: How to Design a Website with Wix

Understanding the Basics

Okay, let's talk about some HTML basics before we start:

Tags: HTML uses tags. These tell the browser what something is. Like <p> for a paragraph. Most tags have a start and end: <p> and </p>.
Elements: An HTML element? That's the tag, the content, and the closing tag. So, <p>This is a paragraph.</p> is an element.
Attributes: Attributes give extra info. Like <a href="https://www.example.com">. The href tells the link where to go.
Document Structure: HTML documents have a structure. It includes <!DOCTYPE html>, <html>, <head>, and <body>.

Key Tags to Know

Here are some important HTML tags you'll use a lot:

<!DOCTYPE html>: Tells the browser it's an HTML5 document.
<html>: The main part of your HTML page. Everything else goes inside.
<head>: This holds info aboutthe page. Like the title.
<title>: This is the title you see in the browser tab.
<meta>: More info aboutthe page. Good for web design.
<body>: This is where all your website content goes!
<h1> to <h6>: These make headings. <h1> is the biggest and most important.
<p>: Makes a paragraph.
<a>: Makes a link. Example: <a href="https://www.google.com">Visit Google</a>
<img>: Adds an image. Example: <img src="image.jpg" alt="Description of the image">
<ul>: Makes a bullet point list.
<ol>: Makes a numbered list.
<li>: Makes a list item (for bulleted or numbered lists).
<div>: Creates a section on your page. Think of it as a container.
<span>: Like <div>, but doesn't make a new line.
<strong>: Makes text important (usually bold).
<em>: Emphasizes text (usually italics).
<br>: Inserts a line break.
<hr>: Creates a horizontal line.

Let's Build a Website!

Time to create a realwebsite! We'll make a page with a heading, paragraph, image, and a link.

Step 1: Get Ready to Code

You don't need fancy stuff! Just a text editor (like Notepad) and a web browser (like Chrome).

Step 2: Make a New File

Open your text editor. Create a new file. Save it as index.html. The .html part is important!

Step 3: Add the Basic Code

Paste this code into your index.html file:

<!DOCTYPE html> <html> <head> <title>My First Website</title> </head> <body> <h1>Welcome to My Website!</h1> <p>This is a simple website built with HTML.</p> </body> </html>

What's this all mean?

<!DOCTYPE html>: Says it's HTML5.
<html>: The main part of the page.
<head>: Has the page title.
<body>: Holds the content- heading and paragraph.

Step 4: Add More Stuff!

Let's add an image and a link.

First, find an image. Save it in the same folder as your index.html file. Name it image.jpg.

Now, add this code inside the <body>, after the paragraph:

<img src="image.jpg" alt="A beautiful image"> <p>Visit my favorite website: <a href="https://www.google.com"&gt;Google&lt;/a&gt;&lt;/p&gt;

What's this do?

<img src="image.jpg" alt="A beautiful image">: Adds the image. src is the image's name. alt is what shows if the image doesn't load.
<p>Visit my favorite website: <a href="https://www.google.com">Google</a></p>: Adds a link to Google.

Step 5: See Your Website!

Save index.html. Open it in your browser. Boom! Your website is there.

Make It Look Better with CSS

HTML is the structure. CSS is the style. CSS makes your website look good!

How to Use CSS

There are three ways to add CSS:

Inline CSS: Put styles right in the HTML tags. (Not great for big projects).
Internal CSS: Put CSS inside <style> tags in the <head>.
External CSS: The best way! Make a separate file (like style.css) and link it.

Here's how to link an external CSS file:

<head> <title>My First Website</title> <link rel="stylesheet" href="style.css"> </head>

Simple CSS Styles

Let's make a style.css file. Put this code inside:

body { font-family: sans-serif; background-color: #f0f0f0; } h1 { color: #333; text-align: center; } p { line-height: 1.5; }

What does this do?

Makes the whole page use a sans-serif font and a light gray background.
Makes the heading dark gray and centered.
Makes paragraphs easier to read.

Save style.css. Refresh your browser. Your website looks better!

Add Some Fun with JavaScript

HTML and CSS are the basics. JavaScript makes your website interactive*.

How to Use JavaScript

Like CSS, you can add JavaScript in different ways:

Inline JavaScript: Put code right in HTML tags. (Not recommended).
Internal JavaScript: Use <script> tags in the <head> or <body>.
External JavaScript: The best way! Make a script.js file and link it.

Link JavaScript like this:

<body> <h1>Welcome to My Website!</h1> <p>This is a simple website built with HTML.</p> <script src="script.js"></script> </body>

A Simple JavaScript Example

Make a script.js file. Put this code in it:

alert("Hello from JavaScript!");

This shows a pop-up message when the page loads.

Save script.js. Refresh your browser. Did you see the message?

Congrats! Keep Learning!

You built a website! This is just the start. Keep learning HTML, CSS, and JavaScript. Play around. Have fun!

Helpful Resources

MDN Web Docs: https://developer.mozilla.org/en-US/
W3Schools: https://www.w3schools.com/
Codecademy: https://www.codecademy.com/
freeCodeCamp: https://www.freecodecamp.org/

You're on your way to becoming a web developer!

Howto