How to Build a Simple Website with HTML

Want to learn how to build a simple website with HTML? You're in the right place! This guide will show you the basics. We'll start with HTML. Even if you've never coded, or you've tried it a little, this will help you create your own website.

Why Learn HTML?

HTML? It stands for HyperText Markup Language. It's what every website is built on. Think of it as the foundation. Without it, your browser wouldn't know how to show text, pictures, or videos. If you're interested in web development and website design, HTML is key.

Why learn HTML? Here are a few reasons:

Read Also:How to Make a Website Accessible

It's the base for everything. HTML is used for CSS (styling) and JavaScript (making things interactive).
Jobs! Web developers are in demand. Knowing HTML opens doors.
Make your own stuff. Blog? Portfolio? A website for your hobby? HTML lets you do it.
Know how the web works. Even if you don't become a pro, you'll understand the internet better.

HTML Basics: Tags, Elements, and Attributes

HTML uses tags. Tags tell the browser what to show. They're in angle brackets (< >). Most tags come in pairs.

For instance, the <p> tag makes a paragraph. <p> starts it, and </p> ends it. What's in between? That's the paragraph!

An HTML element is the tag, the content, and the closing tag. Like this:

<p>This is a paragraph.</p>

Some tags don't need a closing tag. Like <br>. It makes a line break.

Attributes give extra info about an element. They go in the opening tag. For example, the <img> tag uses the src attribute to show where the image is:

<img src="image.jpg" alt="My Image">

Common HTML Tags

Here are some common HTML tags you'll use when coding for beginners:

<!DOCTYPE html>: This says it's an HTML5 document.
<html>: This is the main part of your HTML page.
<head>: Info about the page goes here. Things like the title.
<title>: The title of the page. You see it in the browser tab.
<body>: This is where the stuff you see on the page goes.
<h1> to <h6>: These are headings. <h1> is the most important.
<p>: This makes a paragraph.
<a>: This is a link.
<img>: This shows an image.
<ul>: This makes a list with bullet points.
<ol>: This makes a numbered list.
<li>: This is an item in a list.
<div>: This is a section on your page.
<span>: This is for marking up part of your text.
<table>, <tr>, <td>: These make a table.

Setting Up Your Development Environment

Before we start, you need a few things:

Text Editor: This is where you write your code. Try Visual Studio Code (VS Code), Sublime Text, or Notepad++.
Web Browser: You need this to see your HTML files. Use Chrome, Firefox, or Edge.

I suggest VS Code. It's free and has lots of helpful tools.

Your First HTML Page: Let's Do It!

Ready to make your first page?

New File: Open your text editor and make a new file. Save it as index.html. The .html is important!
Basic Code: Copy this code into your index.html file:

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

Save It: Save the index.html file.
Open in Browser: Find the file you saved and open it with your browser. You should see "Hello, World!" and "This is my first website using HTML."

Yay! You made your first page. Let's look at the code:

<!DOCTYPE html>: This tells the browser it's an HTML5 page.
<html>: This is the main part of the page.
<head>: This has info about the page. Like the title (<title>My First Website</title>).
<body>: This is the stuff you see. A heading (<h1>Hello, World!</h1>) and a paragraph (<p>This is my first website using HTML.</p>).

Adding Content

Now that you have the basics, let's add more! Headings, paragraphs, images, lists, and links. Let's look at some examples for website design.

Adding Headings

Headings help organize your content. Use <h1> to <h6> to show different levels of importance.

<h1>This is a Main Heading</h1> <h2>This is a Subheading</h2> <h3>This is a Sub-Subheading</h3>

Adding Paragraphs

Paragraphs show blocks of text. Use the <p> tag.

<p>This is a paragraph of text. You can write as much as you want in a paragraph. It's the main part of the text on a website.</p>

Adding Images

Images make your website look better. Use the <img> tag. Don't forget the src and alt attributes.

<img src="my-image.jpg" alt="Description of the image">

Make sure the image file (my-image.jpg) is in the same folder as your index.html file. Or, use the correct path to the image.

Adding Lists

Lists organize information. Use bullet points (<ul>) or numbers (<ol>).

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

Adding Links

Links let users go to other pages on your site, or to other websites. Use the <a> tag. The href attribute shows where the link goes.

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

Styling with CSS

HTML is the structure. CSS makes it look good! CSS changes colors, fonts, and the layout.

Three ways to add CSS:

Inline CSS: Add CSS directly to HTML elements using the style attribute.
Internal CSS: Add CSS inside the <head> section using the <style> tag.
External CSS: Make a separate CSS file (with .css). Link it to your HTML using the <link> tag. Best for big projects.

Let's use internal CSS. It's easier for now.

Add this code to the <head> section of your index.html file:

<style> body { font-family: sans-serif; background-color: #f0f0f0; } h1 { color: blue; text-align: center; } p { line-height: 1.5; } </style>

This CSS code will:

Change the font to sans-serif.
Make the background light gray.
Make the <h1> heading blue and center it.
Make the paragraphs have more space between lines.

Save your index.html file and refresh your browser. You should see the changes!

Making It Interactive with JavaScript

HTML is the structure, CSS is the style, and JavaScript makes it interactive. JavaScript adds dynamic things to your website.

Add JavaScript like CSS: inline, internal, or external. Let's use internal JavaScript for now.

Add this code to the <body> section, just before the </body> tag:

<script> function showAlert() { alert("Hello from JavaScript!"); } </script> <button onclick="showAlert()">Click Me</button>

This code makes a function called showAlert(). It shows a box that says "Hello from JavaScript!". It also adds a button. When you click the button, the showAlert() function runs.

Save your index.html file and refresh. You should see a button. Click it, and a box should appear.

You Did It!

Congrats! You learned how to build a simple website with HTML, CSS, and JavaScript. You know the basics of HTML tags, elements, and attributes. You know how to add content, style it, and make it interactive.

This is just the start. There's more to learn. But you have a good base now. Keep trying new things. You'll be surprised what you can make!

Remember, coding for beginners can seem hard at first. But keep going! Anyone can learn to be a web developer. Good luck!

More to Learn

Want to learn more about web development? Check out these resources:

MDN Web Docs: Mozilla's site has lots of info about HTML, CSS, and JavaScript.
freeCodeCamp: This site has free courses on web development.
Codecademy: This site has courses on different programming languages.
W3Schools: This site has tutorials and info for web development.