Body section - the body tag
The body is the main part of the webpage. When you open the file in a browser, all written content between the <body>~</body> tags will be visible as the page content. But if you write things in plain text, the browser will get fussy. So what do you do?
That's right, you need to write the content of the page using the HTML langauge and stylesheets.
Below is an explanation of a basic webpage layout. It's just a basic example, so you don't have to stick to it. Think abot your visitors, what they would like to see and how you would like to show it to them, then design your layout around that.
Basic Webpage Example
Let's start with a basic example of a webpage. First, let's look at the example. This is a basic page layout; the HTML source code is as written below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./bodyexample.css">
</head>
<body>
<header>
<h1>Basic Website Layout</h1>
<nav class="topnav">
<ul>
<li><a href="#fakelink">Home</a></li>
<li><a href="#fakelink">About Us</a></li>
<li><a href="#fakelink">Contact</a></li>
<li><a href="#fakelink">Products</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About the Layout</h2>
<p>First, I'll explain this basic layout. This is what's called a "one-column" layout, because there is only one column going up and down with no sidebars, unlike the How To Homepage page which is a happy "two-column" layout.</p>
<p>This is one of the most basic layouts possible. Using this as a base, you can create a two-column layout with a different section on the left or the right, or even a three-column layout with both. That's just thinking in terms of boxes—the possibilities are endless if you try.</p>
</section>
<section>
<h2>The basics start right here</h2>
<p>People think of making websites as an arcane, difficult task, but in reality all you need to do is copy simple code. Anybody can do that.</p>
<p>It is true that big websites use complex frameworks that take a lot of learning, but the basics are in HTML and CSS. In fact, it's better for your computer to keep it like this. You only have to make it complicated if you decide to get insanely serious about it.</p>
</section>
<section>
<h2>Try it yourself!</h2>
<p>If you want to make a website, the best way to learn is by doing. Any kind of site is fine. Follow along with tutorials on the interent and things will shape up faster than you'd imagine.</p>
<p>Use another site as a reference and try to create just one page, no matter what it looks like. You might not be the happiest with it, but hey, ><em>you did that.</em> Now you will have an idea of the start-to-finish process and what you should do in certain situations.</p>
<p>Once you're at this stage you might start to think things like, "Next time, I want to do this sort of thing..." and it will get way more fun for you! So, why not give it a try?</p>
</section>
</main>
<footer>copyright © <a href="https://mouseling.net/howtohomepage/">MOUSELING.net/howtohomepage/</a></footer>
</body>
</html>
It might be a bit hard to look at, but this is all the HTML used in that page. The part in red is the body tag and everything in purple is HTML tags inside of the body tag. This is really the whole thing, although without styling it won't look the exact same when you copy-paste it.
If you can't think of anything, you might want to look at other websites for a while until you find something you're inspired by and trying to imitate it. Imitation is appreciation, and as long as you're not copy-pasting their code, this activity will give you a better idea of how websites work.
The idea behind this is that rather than studying, you'll learn by doing it right away. If you keep learning in mind while you make things, you'll have a tricked-out website in no time.
There are so many different HTML tags and CSS stylesheet rules that it's impossible to remember them all. Not even I can. But don't be intimidated by this! There are some tags that you might never use in your entire life. For now, when you want to use something, you can search it up online. For some examples, check Various HTML tags and Various CSS.
If you're truly stuck, use the Internet to find your solution!
Search engines are super powerful and can tell you almost anything you want to know. If trial and error doesn't work, your friends Google Search and Stack Exchange are here for you. It's surprisingly easy to find the solutions to your problems as long as you remember this!