There are many good websites out there to tell you all you’ll ever need to know about making web pages, but some of them are either hard to understand, too flashy, or the examples aren’t really relevant to what you might want to do.
This tutorial is all about making a simple web page with text and graphic links to places that you, your younger siblings (if you are a HEK) or your children (if you’re a HEP) frequently visit. It is also known as a portal page.
Step 1: Building the framework of the page.
On your computer, open up Notepad or a similar text editor. I like to use Notepad because I can better control exactly what gets stuck in the page behind the scenes. First, we have to tell the browser that this is an HTML document, so we type this:
<html>
Almost every HTML tag has a matching closing tag, so skip down a few spaces and type this:
</html>
Now when a web browser looks at this file, it knows that everything between these tags will be displayed in a special manner. But even better, everything that you want to be displayed in the main body of your webpage goes between two matching tags called (you guessed it) BODY.
Your web page bones should now look like this:
<html>
<body>
</body>
</html>
Step 2: Giving your page a title.
Every page needs a title so the reader knows what it is about. If you’re making this portal page for small children, a title helps their reading skills, too.
Right after the first BODY tag, place a heading tag like this:
<h1>
The h1 makes the letters nice and big and keeps them on their own line. Type in whatever you want for a title like “My Webpage” and add the matching end tag. It should now look like this:
<h1> My Webpage </h1>
If you want the letters slightly smaller, try using h2 or h3.
Step 3 and continuously: Saving your work.
This is probably a good time to save all your work to a file. Click “save” from the menu in Notepad, and call the file something meaningful, like “mywebpage”. Be sure to save this file with an HTML extension and not a .txt. It’s also handy to save it right onto your desktop. Now minimize the Notepad window by clicking on that little minus sign up in the top right corner. There should be a webpage icon right there on your desktop, with the words “mywebpage”. Clicking on it should open it up in your brower window, and you’ll see a broad expanse of white webpage with your title in big letters at the top.
Cool, huh?
Let’s switch back to our file in Notepad. Click on it down there on the status bar, and we’ll see what we’ve accomplished so far. It should look something like this:
<html>
<body>
<h1> My Webpage </h1>
</body>
</html>
Step 4: Adding some links.
A web page is just some text and wouldn’t be any fun without somewhere to click, so here’s how to make that magic. You’ll need two things; the URL and whatever title you want to give the link.
The code to make your text “clickable” looks like this:
<a href=”http://where-you-want-to-go.com”> Click here on this text! </a>
Note this has a few parts: the beginning of the tag (the a href part), the URL of the page (close the tag), whatever text or the tile of the page to click, and the ending tag.
That is how you make a link. Put few links on one page, and now you have your very own portal page. If you have saved onto your desktop like described above, you have an easy, fast and relatively safer way to get to your (or your children’s) favorite Internet sites.
Step 5: Minor formatting.
Now, you don’t just want a whole string of links, you may want to add some descriptive text. How do you get to the next line? How do you make a paragraph? Sure, you can format it in Notepad, but we need to tell the browser what to do.
To get to a new line, you type the break tag. This is a self-contained tag, meaning it has no matching end tag, so the new rules are to make it self-closing. It looks like this:
<br />
Note the space then the closing bracket.
In action, it may looke like this:
This is my first line of text. <br />
I want this text on the next line. <br />
The browser makes it look like this:
This is my first line of text.
I want this text on the next line.
Let’s say we want a bit more space, say, between paragraphs of text. I’m glad you asked, because we’re up to the paragraph tag.
<p> This is a paragraph. It has many sentences. They usually follow the same train of thought, but mine tend to be a bit rambly. </p>
Looking under the hood at the web page we are building, it could look a lot like this:
<html>
<body>
<h1> My Webpage </h1>
<a href="http://atypicalhomeschool.net/">Best homeschooling blog ever</a>. <br />
Ron and Andrea sure are funny. And they have some interesting things to say about homeschooling. <br />
<p> Andrea has her own blog <a href="http://atypicalife.net/blog">here.</a>She writes funny stories about everyday life. Sometimes she makes me cry, though. </p>
</body>
</html>
You can probably imagine how that web page looks. That might be enough to get you started and I hope to encourage you to keep learning. In the next installment I’ll discuss images and making things look pretty, unless you figure out how to do that by then. Here’s a handy dandy HTML tag reference chart to get you going.
For some reason, the sidebar has slipped all the way down to the bottom, after the posts. Is this because I’m using Explorer?
Okay, I took computer class in high school (quit at the semester after receiving a marginal grade and absolutely no understanding) and tried again in college (intro to computers – I was lost on day one, thought I must have entered the wrong classroom). I can say that those experiences have given me a mental block to learning this stuff! I think your tutorial just might be the thing to get me past that…thanks!
can I be incredibly picky? Grovelling apologies in advance if you’d rather I didn’t! <h1> (hope that comes out right) is a header tag, there *is* a title tag and it’s rather important. Or where you going to go on to that in a bit? If so I’ll shut up again…
Thanks so much for this simple tutorial. It’s pretty sad when even HTML For Dummies is above my head!
This is just what we needed…thank you!