Create a Free Website

How to Create Static Web Pages


Learning Just the Basics of Static Web Pages

Attention: We strongly recommend that you complete our new tutorial on Liquid Web Pages instead of this one.
This tutorial teaches static or fixed width web page design.
Static web pages will soon be a thing of the past!!
The new tutorial is shorter and easier!

This short tutorial will guide you through the process of structuring your web page with as little HTML code as possible and formatting it using CSS (cascading style sheets).

How to Use this Tutorial
Read all information and then execute the Exercises at the bottom of each page. Complete all 9 exercises. Take the quiz if provided. Go to the next lesson when you can pass the quiz.

Getting Ready

Find NotePad or the text editor that you are going to use to complete the exercises. Since everything is going to be copy and paste, I recommend this option starting out!

Note: Mac users should use the text editor included with Apple systems.

Don't know How?
See:Using a Text Editor,
Previewing Saved Pages in a Browser,
How to find Notepad
and How to Copy and Paste

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites




Keep it organized!!

Important: Create a special folder to store your web pages in. Name it something like htdocs. To make it easy to find create it right on your c drive as c:\htdocs

This will help you to start out in an organized fashion and find the page with your browser when previewing.

Note: If using HTMLPad 2010 to create interactive web pages using scripts on a localhost server, store web pages in C:\indigoampp\apache-2.2.11\htdocs\ (See tutorial for set up)

HTML Code

The secret to learning and using HTML code is to use as little as possible. You should spend as much time or more learning about CSS (cascading style sheets) as you do learning HTML.

The Basic Web Page

This is all the code you need to get started. The code in red links your web page to your style sheet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>

Building Your Page Structure

The entire structure of your web page, its rows and columns, will be defined using fixed width and height divisions.

What's that? For now, think of divisions as 4 sided empty boxes on your web page that you are going to fill with content.

The code shown here placed between the body tags in your HTML code would be enough to produce a web page with 3 rows including a site heading, body content and a footer. The center-page division is used to center the content on the web page.

<body>
<div id="center-page">
<div id="heading"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>

CSS (Cascading Style Sheets)

The more you learn about CSS, the more sophisticated a website you will be able to build.

You can, however, create a very impressive website by just learning the basics.

How do you create a style sheet?

Here's the beauty. You don't need any special tools. You can create a style sheet using a simple text editor like NotePad. Just save your text file with a .css extension and put it in the same folder as your web pages.

Link your style sheet to your web page as shown above in the HTML code (red line of code) and you are ready to roll.

Every time you add a snip of HTML code to your web page, add the style settings for that code to your style sheet and test in your browser.

What the CSS Does

The CSS shown below defines the division named heading, specified in the HTML code as id="heading"

The width and height of the heading division are defined in pixels as px.
background-color: #99ccff sets the background color to light blue
and float: left moves the division to the left within its page or container.
Note: align="left" for divisions deprecated HTML5

 
#heading { 
width: 1000px;
height: 150px;
background-color: #99ccff ;
float: left
}

The HTML code and CSS presented so far would produce an empty, light blue colored box on the top of your web page measuring 1000 pixels wide and 150 pixels high.

First Exercise

Copy the code shown below and create an HTML page. Name the page firstpage.html.

If you are using NotePad, be sure to save your web page with a .html extension.

Then create your style sheet using NotePad. Name the style sheet style.css and save it in the same folder as your web page.

Be sure to name your style sheet style.css

In this first exercise we'll give you the code as it should appear in your HTML editor and Notepad (CSS).

HTML

Copy and Paste into NotePad

This is the HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="center-page">
<div id="heading"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>


Save the web page as firstpage.html



Style Sheet

Copy and Paste into NotePad. ( You will have 2 sessions of NotePad open at the same time.)

#center-page {
width:1000px;
margin: 0 auto 0 auto
}
 
#heading { 
width: 1000px; 
height: 150px; 
background-color: #99ccff;
float: left
}

Save style.css in the same folder as firstpage.html

Once you get the web page and style sheet saved, look at the HTML page with a browser or the Preview function of your HTML editor.


Code in NotePad or HTML Editor

HTML code in editor

CSS in NotePad or HTML Editor

style settings


The Result

If this is what you see, you are ready to continue:
web page in browser

Were you successful? If you were, congratulations!!

If not, go back and read the information again. Don't skip any steps.

If you typed the code check for errors.

Check the extensions that you saved each file with.

Make sure both files are in the same folder.

Try copying and pasting the HTML code and CSS.

The HTML code and CSS must be exactly as shown.


Ready to Proceed

Need Help?When you get everything working with the desired result in your browser, you are ready to proceed to the next exercise. Don't go on unless you have a basic understanding of the procedures presented so far.


Take a quiz. Take a Quiz on the Important Points.


Let's go to Exercise #2