Reading: Creating Your First Web Page

Getting Started

So you want to make a web site. It’s easy. You don’t need any fancy software. Just a computer and you’re set. The software you will use is already on most computers that are sold today. So what do we need?

  1. A text editor
  2. A browser

A text editor is a program that let’s you write text. Actually, ASCII text. What’s ASCII text? Basically, the characters on your keyboard. On Windows computers the text editor program is called Notepad. You open it up by selecting: Start > Programs > Accessories > Notepad. Don’t confuse a text editor with a word processor. Using a word processor, like Word Pad or Word, will mess you up. Be sure you use Notepad.

A browser is software that let’s you view a web page. It takes what’s written on Notepad and interprets it. The browser shows you all the formatting; it’s what makes the page look pretty, or ugly, or whatever. There are lots of browsers. Two popular browsers are Internet Explorer and Firefox. To open a browser, either double click on the browser icon on your desktop, or select Start > Programs > Internet Explorer (or Firefox).

Let’s do a little experiment. Open a web page, say http://www.amazon.com. Now that you have Amazon open, right-click on the web page and choose “View Source” or “View Page Source”. What do you see? Lots of HTML code. Don’t worry if it looks a little complicated. It’s really pretty easy. You’ll make a web page in less than an hour. Just keep reading.

So what have we learned? You create a web page using Notepad. You view a web page using a browser. Lets make a web page!

Creating Your First Web Page

The best way to make a web page is to just dive right in. Open Notepad. To open notepad in Windows 7 and before: Start > Programs > Accessories > Notepad. To open notepad in Windows 8: Move your mouse over the start button and then into the bottom left corner. This brings up the new short menu .Click the Apps button at the bottom and you get a list of all installed apps in alphabetical order. At the bottom is notepad.

Once notepad is open, start typing (or if you’re lazy, like me, just copy and paste):

<html>

<head>
<title>The title goes here</title>
</head>

<body>

<h1>This is a level one heading</h1>

<p>My first lovely paragraph. Wow. This is fun.</p>

<p>My second lovely paragraph. We can make paragraphs forever.</p>

<h2>This is a level two heading</h2>

<p>This is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag has an ending tag.</p>

</body>

</html>

 

 

What does all this mean? The stuff between the < and the > symbols are “tags.” Tags (mostly) come in pairs, a beginning tag and an ending tag. The ending tag repeats the beginning tag, with a forward slash in it. For example, the web page starts with <html> and ends with </html>.

Each web page has two parts:

  1. The head, which begins with <head> and ends with </head>, and
  2. The body, which begins with <body> and ends with </body>

Beginning to get the idea? It’s easy.

So what goes in the head? The title. The title is what appears at the top of the browser, in the blue “title bar.” Everything else goes in the body, that is, between the body tags.

Most of what you have to say goes in paragraphs, just like in real life. A paragraph starts with <p> and ends with </p>. You can also put stuff between heading tags, which come in various sizes, from <h1>, <h2>, … through <h6>. Headings are usually used for, well, headings. The <h1> heading will make text bold and large. <h2> is a little smaller, and so forth. <h6> headings are quite small. Now, it may seem like a heading tag would go in the head, but it doesn’t. Headings go in the body, just like everything else (except the title).

After you create the web page, you must name it and save it. Naming a web page the right way is critical, so we devote a whole section to naming. Read on.