How to Make a Simple Website with HTML

So, You want to learn how to make a website with HTML? Awesome! HTML is the base of the web. Browsers use it to show you websites every day. This guide will show you the basics, step by step. You don't need any special skills to start!

What is HTML?

Before we get started, let's talk about what HTML is. Think of it like the bones of a website. It gives the website structure. HTML uses tags (they look like this: < and >) to make things like titles, paragraphs, and lists. These tags tell the browser what to show.

HTML isn't like coding languages such as JavaScript. HTML is a markup language. It doesn't do math or logic. It just shows content.

Setting Up Your Space

Want the best part about learning HTML? You don't need fancy tools! You just need a text editor and a browser. Here's what to do:

Text Editor: Pick a text editor. You'll write your code here. Here are some good ones:

Visual Studio Code (VS Code): Free, strong, and has helpful tools for web stuff.
Sublime Text: Simple and has good features.
Atom: Made by GitHub. You can change it how you want.
Notepad (Windows): Simple but works. Just save your files with ".html" at the end.
TextEdit (Mac): Like Notepad, but for Macs. Make sure it saves files as plain text.

Web Browser: You probably have one already! Chrome, Firefox, Safari, and Edge are all great for seeing your HTML files.

Your First HTML File: "Hello, World!"

Let's make your first HTML file! It's like a tradition. It helps make sure everything is working right.

Open your text editor.
Type this code in:

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

Save the file as "index.html". Be sure to add ".html" at the end. If it asks, choose "All Files" to save it right.
Open "index.html" in your browser. Double-click it, or right-click and choose "Open with..." and then your browser.

Did it work? You should see "Hello, World!" in big letters. Below that, it should say "This is my first web page using HTML."

Understanding How HTML is Built

Let's look at the code we just wrote:

<!DOCTYPE html>: This tells the browser it's using HTML5. Put this at the top of your code.
<html>: This is the main part. Everything else goes inside these tags.
<head>: This has info about the page, like the title and how to style it (CSS).

<title>: This is the name of the page. It shows in the browser tab.

<body>: This is what you see on the page. Everything in here shows up in the browser.

<h1>: This is a big title. You use titles to organize the page. There are six types, from <h1> to <h6>.
<p>: This makes a paragraph. Use paragraphs for blocks of text.

Important: Most HTML tags come in pairs. You have an opening tag (like <p>) and a closing tag (like </p>). The closing tag has a slash (/) in front.

Important HTML Tags

Now you know the basics. Let's see some other important tags:

Titles: <h1> to <h6>

Titles help organize your content. <h1> is the most important, and <h6> is the least. Use them in order.

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

Paragraphs: <p>

The <p> tag makes paragraphs of text.

<p>This is a paragraph of text. You can write multiple sentences here to explain a topic or provide information.</p> <p>This is another paragraph. See how the browser puts space between them?</p>

Links: <a>

The <a> tag (anchor) makes links to other pages. The href tells it where to go.

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

The target can tell the link to open in a new tab. Use target="_blank" for that.

<a href="https://www.google.com" target="_blank">Visit Google (Opens in a new tab)</a>

Images: <img>

The <img> tag puts images on the page. The src tells it where the image is. The alt gives text for if the image can't show.

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

Important: Make sure the image (image.jpg) is in the same folder as your HTML file. Or, tell the code where to find it.

Lists: <ul>, <ol>, and <li>

HTML has two kinds of lists:

Unordered Lists (<ul>): These have bullet points.
Ordered Lists (<ol>): These have numbers.

List items use the <li> tag.

<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>

Text Styles: <strong>, <em>, <b>, and <i>

Use these tags to style text:

<strong>: Shows important text. Usually makes it bold.
<em>: Shows emphasized text. Usually makes it italic.
<b>: Makes text bold. (Use <strong> for important text).
<i>: Makes text italic. (Use <em> for emphasis).

<p>This is <strong>important</strong> text.</p> <p>This is <em>emphasized</em> text.</p> <p>This is <b>bold</b> text.</p> <p>This is <i>italic</i> text.</p>

Sections: <div>

The <div> tag makes sections on the page. It's like a box for other HTML stuff. You can use it to style things (with CSS). Use <div> to make sections like a header, content, and footer.

<div id="header"> <h1>My Website</h1> </div> <div id="content"> <p>This is the main content of the page.</p> </div> <div id="footer"> <p>Copyright 2023</p> </div>

The id gives the <div> a name. You can use this name to style it with CSS or use it with JavaScript.

Adding Info to HTML Tags

HTML tags can have "attributes". These give more info about the tag. We saw some before, like href in the <a> tag and src and alt in the <img> tag.

Attributes go in the opening tag, like this: attribute="value".

Some common attributes:

id: Gives a tag a unique name (like in the <div> example).
class: Gives a tag one or more class names (use these for CSS styling).
style: Adds styles to the tag (not good for big projects; use CSS files instead).
title: Gives a tag a title (shows up as a tooltip when you hover over it).

How to Build Your Website with HTML

You know the tags now. Let's see how to build your website.

A website usually has these parts:

Header: Has the website's logo, menu, and maybe a banner.
Menu: Helps people go to different pages.
Content: The main part of the page.
Sidebar: Extra info, links, or ads.
Footer: Copyright info, contact info, and links to legal stuff.

You can use <div> tags with id or class to make these sections. HTML5 also has tags like <header>, <nav>, <main>, <aside>, and <footer>. These help make the code more clear.

Checking Your HTML

Write good HTML! This helps make sure your website looks right in all browsers. You can use online tools to check for errors. One is the W3C Markup Validation Service: https://validator.w3.org/

What's Next: Learning CSS

HTML gives your website structure. CSS (Cascading Style Sheets) makes it look good. Learn CSS after HTML. It lets you change colors, fonts, and how the page looks.

Web building uses both HTML and CSS. Learn both to make great websites. Try to find lessons that teach them together. Or, focus on CSS once you know HTML well.

In Conclusion

Good job! You now know the basics of how to make a website with HTML. You know HTML tags, how HTML is built, and how to make simple pages. Keep trying things out. You'll be making awesome websites soon! Check out online tools, try different tags, and check your code to make sure it's good. Happy web designing!