How to Make a Simple Website with HTML

Hey there! Want to build your own website? Learning how to HTML is the first step. Think of HTML as the basic structure of a house. It's the foundation! CSS and JavaScript are like the paint and furniture – they make it look good and do cool things.

Why Learn HTML?

Good question! Why bother learning HTML? Well, here’s the deal:

It's the Base: HTML is the starting point for all web stuff. You gotta know it!
You're in Charge: Want total control over your site? HTML gives it to you. No more relying on website builders!
Make it Yours: Customize everything to your liking. It's all about you!
Job Time!: Loads of tech jobs need HTML skills. Front-end developer? Website designer? You got it!
See How it Works: Even if you don't build sites, understanding HTML helps you see how other sites are made. Neat, huh?

HTML: The Basic Structure

Every HTML page has a basic structure. It's like a recipe. Gotta follow it! Here's what it looks like:

The <!DOCTYPE html> Part

This goes first. It tells the browser, "Hey, I'm using HTML5!" Just use <!DOCTYPE html>. Easy!

The <html> Section

This is the main part. It holds everything else, except that <!DOCTYPE html> thingy.

The <head> Area

This is for behind-the-scenes stuff. Like the title of the page, character set, and links to style files. Users don't see this.

The <title> Piece

This sets the page title. It shows up in the browser tab. Simple!

The <meta> Thing

This gives extra info about the page. Like the description and keywords. Good for search engines!

The <link> Element

This connects your HTML to CSS files. That's how you make it look pretty!

The <body> Zone

This is where the real content goes. Text, images, links – everything people see!

HTML Tags: The Essentials

HTML uses "tags" to define things. Tags look like this: < and >. Most come in pairs. Like <p> and </p>. Let's check out some important ones:

Headings: <h1> to <h6>

These make headings. <h1> is the most important. Like the main title. <h6> is the least. Use them right! Good for getting noticed online (SEO).

For example:

<h1>My Website Title</h1> <h2>Section Heading</h2> <h3>Subsection Heading</h3>

Paragraphs: <p>

This makes a paragraph. Easy peasy. It adds a blank line before and after.

Like this:

<p>This is a paragraph of text. It will be displayed with a blank line before and after it.</p>

Links: <a>

This makes a link. Click it, and you go somewhere else! The href tells it where to go.

Check it out:

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

Images: <img>

This puts an image on the page. The src says where the image is. The alt is a description. Good for when the image doesn't load, and also helps people who can't see the image know what it is.

Like so:

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

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

These make lists. <ul> is a bullet list. <ol> is a numbered list. <li> is a list item.

Unordered list:

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

Ordered list:

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

Tables: <table>, <tr>, <th>, <td>

These make tables. <table> is the whole table. <tr> is a row. <th> is a header. <td> is a cell.

For example:

<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>

The <div> Tag

Think of <div> as a container. It holds other HTML stuff. Good for styling with CSS.

The <span> Tag

<span> is like <div>, but it's for text. Use it to style parts of a sentence.

Emphasis: <strong> and <em>

<strong> makes text important (bold). <em> makes text emphasized (italic). They also tell the computer that the words are important, whereas just using <b> or <i> just make the words bold or italic, without giving the computer any clue that the words are important!

Make a Simple Website: Step-by-Step

Okay, let's build a site! It's easier than you think:

New File Time: Open a text editor. Save it as index.html.
Add the Basics: Copy this code into your file:

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

Add Your Stuff: Change the text in the <body>. Add more headings, paragraphs, images... go wild!
Save It: Save the file.
Open in Browser: Open index.html in Chrome, Firefox, or whatever you use. Boom! Your website!

CSS: Making it Look Good

HTML is just the structure. CSS is the style. You can add CSS in a few ways:

Inline Styles: Add styles right in the HTML. Not great for big projects. Messy!
Internal Styles: Add styles in the <head> section. Okay for small sites.
External Styles: Make a separate .css file. Link it to your HTML. This is the best way. Organized!

Linking to a CSS file:

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

JavaScript: Making it Interactive

JavaScript adds action to your site. Like making things move or change.

Inline Scripts: Add JavaScript right in the HTML. Not recommended for big projects.
External Scripts: Make a separate .js file. Link it to your HTML. Best way!

Linking to a JavaScript file:

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

Clean HTML: Tips

Want to write good HTML? Here's how:

Indent Properly: Make your code easy to read.
Add Comments: Explain what your code does. Future you will thank you!
Use Semantic HTML: Use the right tags for the right things.
Validate Your Code: Check for errors.
Keep it Short: Don't add extra stuff.

Learn More: Resources

Want to learn even more about HTML? Check these out:

Mozilla Developer Network (MDN): Tons of info about HTML, CSS, and JavaScript.
W3Schools: Lots of tutorials and examples.
Codecademy: Interactive coding lessons.
freeCodeCamp: Free tutorials and certifications.

Wrapping Up

Learning how to HTML is key to web development. Know the basics, and you can build your own sites. Keep learning, keep practicing, and don't be afraid to mess up. It's all part of the fun!

This tutorial should get you started. Now go build something amazing! Have fun with how to HTML!