Your First Web Page Tutorial

Your First Web Page Tutorial


A Quick Intro to HTML

Seeing as we're just starting to put some articles together for Web Design Factory, I thought maybe we should start from the ground up. If you've never built a web page before, this article is for you. If you're a step beyond being a newbie, you'll be able to quickly identify if you've surpassed this level of design.

Before you start, take a look at our online tool Learn HTML By Example. You can even download the HTML tool  and use it on your local machine, or upload it to your web site. Using this tool while going through the tutorial will increase your retention.

All right, let's get started!

Step 1 - Create a Document

This part is easy. Just do the following:

  1. Open a simple text editor like Notepad (on Windows machines this is found in Start > All Programs > Accessories).
  2. On the blank file screen, type in "Hello, World".
  3. Then go to File > Save As to save a new file. In the Save as Type box, select All Files. In the File Name box, type mytestsite.html.
  4. Select a place to save the file and then click Save.

Viola! You have just created your first web page. To view it, just navigate to where you saved the file and double-click it to open it. It will open your new web page in your default browser. Didn't know it was that easy, did you?

If you do a little experimentation, you'll soon find out that no matter what you type into your HTML file, all the browser will show is the string of text you typed in. This can get old pretty fast. What about color? What about different fonts? What about FUN?

Formatting HTML

Step 2 - Formatting Your Document

In order for a browser to know how to display your web page, you have to tell it exactly what you want it to do. The simplist way to do this is by using Hypertext Markup Language, otherwise known as HTML.

Let's try something simple to begin with. Say you have a bunch of text, and you want to split it up into paragraphs. Your browser will ignore extra spaces and new lines in plain text, so you have to tell it what to do. Here's two ways to accomplish the same thing:

<p>This is one paragraph</p>
<p>This is another paragraph</p>

 Or you can do this:

 This is one paragraph
<br /><br />
This is another paragraph

Try copying this code into your new page, save it, then refresh the page on your browser. The two examples display slightly differently, but they accomplish the goal of separating text.

In the above examples, you can probably tell which part was HTML. That's right, it's the <p></p> and <br />. These elements are called tags. As you may have guessed, the <p> is short for paragraph, and the <br /> is short for break. HTML was designed with English speakers in mind, so it's fairly easy to remember which tags do what.

As you might have also noticed, the <p> tag has an ending tag, which is </p>. Most HTML has starting and ending tags, like <h1></h1> or <div></div>. There are also a few that don't, like <br />, <hr /> and <img> tags. For these, it's best to tell the browser that there is no ending tag by adding a backslash before the ending bracket. So for instance, instead of using <br>, use <br />.

More Formatting for Your Web Page

More Formatting for Your Web Page

Now that you know how to split text up on your web page, let's make it even easier to read by using headings.

HTML has several heading sizes to choose from, all the way from <h1> to <h8> or so. Using headings to format your web page has the added benefit of telling the browser, and eventually search engines, that the particular text inside of the heading is more important than the other text.

Try adding the following code to your new web page:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

As you can see, the font sizes for the headings get smaller as the numbers go up. This is because when you lay out your page, you will probably have an <h1> to describe the content of the entire page, and then you will split up the following content under smaller and smaller headings. I've rarely seen any headings past <h4> used.

Two other very useful tags are the <ol> and <ul> tags. These create ordered lists and unordered lists, respectively.  In addition to telling the browser that you want to start and end a list, you also have to tell it to start and end list items, which are contained in <li></li> tags. Here's an example you can paste into your code

<ol>
 <li>This is ordered list item one</li>
 <li>This is ordered list item two</li>
 <li>This is ordered list item three</li>
</ol>

<ul>
 <li>This is unordered list item one</li>
 <li>This is unordered list item two</li>
 <li>This is unordered list item three</li>
</ul>

A Complete Web Page in Code

Now you have a basic understanding about how a browser uses HTML to determine how to display text, images, and other elements. Let's add in one more example here of how a complete web page should look. You can use this code to start your own web pages:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <title>This is the title of the page</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 </head>
 <body>
  <h1>This is the heading</h1>
  <p>This is a paragraph in the body.</p>
 </body>
</html>

 Some elements you see in this example that we haven't gone over before is the <!DOCTYPE> tag and the <meta> tag. We'll go over these in future tutorials, but for now, the basic purpose of the DOCTYPE is to give the browser more information about the web page code. Same with the <meta> tag you see there.

Now it's time to play around! Either download our free Learn HTML By Example tool or visit our online version




Implied By Design Logo