Back Next

Web page design course
Lesson 1

Course support : You can ask your course questions in Learnem support forums .

Please support us by visiting our support forums and asking your questions and answering questions of others.

1-1 Introduction

So you have decided to design your web pages yourself! Good decision. So let's start quickly.

Web pages are ordinary files with .htm or .html file extensions. They contain a code named "hyper text mark-up language" or html. This codes when viewed in a browser like Internet Explorer or Netscape will be seen as beautiful web pages however code under web page may be complicated.

To design an html web page you have two options:

a. You can use a web page editor like Microsoft FrontPage to create web pages. It works exactly like Microsoft word (a complicated editor program used for creating and editing book, letter etc pages.) You just type text, insert graphics and finally save your document as an html web page. By the way word 2000 itself can save your existing documents as html pages.

So you see designing a web page can be very easy. But soon you will see that this is not a good option for creating a professional web page.

b. Second option is to learn html codes and write html pages in a simple text editor. As we said your codes will be seen as WebPages when viewed in a web browser. 

1-2 Reasons for choosing second option

- If you want to design professional web pages using these tools will not be enough. You must be familiar with html codes. 
- Results of these editors are big and sometimes chaotic code. Maintaining this code is very difficult.
- If you want to design dynamic web pages in future you will need to know html codes. 
- If you will need forms in your pages to send information to server and return result pages back to browser you will need to know html codes. 
- There are other reasons that dictate us to learn html  coding and not satisfy with these tools.

1-3 Tools you will need 

You will need a simple text editor to write html codes. For example you can use notepad in windows or any text editor in other operating systems. You will also need a browser like Internet explorer or Netscape Navigator. In this course we will assume that you are working in windows 9X/NT/2000. 

1-4 Start Here

Now open notepad and type the following code. 

Example 1-1:

<HTML>
Hello world!
</HTML>

Now save the text as "page11.html" To browse html file open windows explorer and double click on the file. You must see your first web page opened in your web browser. Note: If you have any question about lessons. You can ask them in our support forums. Visit our website and click on "support forums" link.

<HTML> and </HTML> are called tags. First one is a start tag and second is an end tag. Tags are something like commands in programming languages. <HTML> tag tells the browser that this is start of the HTML and </HTML> marks its end.

<HTML> </HTML> mark start and end o a html page. 

1-5 HTML code headers

Every html page must have a header. Header contains important information about the page. Different tags are used for different sections of a header. Header of an html page is specified by <HEAD> and </HEAD> tags.

<HTML>
<HEAD>
.
.
.
</HEAD>
</HTML>

We will enter header information between <HEAD> </HEAD> tags.

1-6 Title 

One of the most important parts of a header is title. Title is the small text that will appear in title bar of viewer's browser. So html document will be as below. 

<HTML>
<HEAD>
<TITLE>Title of the page</TITLE>
</HEAD>
</HTML>

1-7 Web page body
Now our web page needs a body in which we will enter web page content. As you may guess we will use these tags:

<BODY> </BODY>

Body will come right after header end tag. So our web page will be something like this 

Example 1-2:

<HTML>
<HEAD>
<TITLE>My company web page</TITLE>
</HEAD>
<BODY>
Welcome to our homepage. More text here.
</BODY>
</HTML>

Now type html code in notepad and save it as "page2.html". Then view html file in your browser by double clicking on it in windows explorer.

1-8 Extended <BODY> tag
Most of html tags we will learn have optional parameters and extensions. Here we will learn to extensions for <BODY> tag.

1-9 Background color for body of web page
If you want you can change background color of your web page by extending <BODY> tag as below.

Example 1-3:

<HTML>
<HEAD>
<TITLE>Page with Back Color</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
Page with Back Color
</BODY>
</HTML>


This will change your background color to green. Format of  color number is RRGGBB. You know that each color is a combination of three main colors: Red, Green and Blue. In color format RR is value of red component of the main color in hexadecimal format. GG is value of green component and BB is the value of blue component.

Two digit hexadecimal number can be anything between 00 to FF i.e. 0 to 255 in decimal format. So if we write 00FF00 we mean (red=0, green=255, blue=0) so the result is a pure green color. 

You can produce 16 million colors in this way but pay attention that not all of the browsers will be capable to show all these colors. So test your web page in 256 colors mode.

1-10 Background Image

We can use a background picture for web page instead of  background color. You must have a ready image file in .gif or .jpg formats. Now you must extend <BODY> tag as below. "image1.gif" is file name of he image we want to use as background image.

<BODY BACKGROUND="image1.gif">

Example 1-4:

 <HTML>
<HEAD>
<TITLE>Page with background image</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
<B>Page with background image.</B>
 </BODY>
</HTML>


Image file must be in the same folder as your html file. Otherwise browser will not be able to find it.

Notice: You can find examples of this lessons in our website. There you must go to resources section and then click on "Web email course example page."

Exercises:
Attention:  
 Do not use any html editing program like MS FrontPage . You must work on the codes yourself. 
Course support: 
 Paid students must send exercises to their tutor. Tutor will return corrected exercise to the student. Others can ask their  questions in Support forums in our web site.

1- Write your web page code with image1.gif as its background picture. 

2- Write above code with a blue color instead of image as its background.

3- List tags you learned in this lesson with a small description.

 

============================================================ 
Copyright Notice :

© 2000,2001 Siamak Sarmady and Learnem Group . All rights reserved. This text is licensed to be used on ProgrammingUni website. Any kind of reproduction, redistribution in any form is strictly prohibited without written permission of the writer. 

Back Next