Learnem Group presents:
Web page design
in 7 days !
Lessons 1- 7
By: Siamak Sarmady
Start Here
Copyright Notice :
© 2000,2001 Siamak Sarmady and Learnem Group . All rights reserved. This text is written to be used as text material for "Web
Page design Email Course". Any kind of reproduction, redistribution in any form without written permission of the writer is strictly
prohibited. This special version is prepared in PDF form. You can redistribute this file without any changes either in contents or in
file format. It can not be redistributed in printed form or any other media without permission of the writer.
Please state dictation, grammar or any other errors to: corrections@learnem.com
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.
Registration: You can also register for paid web design email course. If
you register you will benefit from strong one to one student support,
personal tutor, more facilities, discount for other courses, access to
students area and many more. Course fee for web page design email
course is $15 only. Paid students will receive 13 advanced lessons in
addition to 7 general lessons. You can register for paid course at:
Course Registration Here
Pdf fillable form creator - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
create a pdf with fields to fill in; create fillable form pdf online
Pdf fillable form creator - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
create a fillable pdf form online; convert excel to fillable pdf form
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.
Registration: You can also register for paid web design email course. If
you register you will benefit from strong one to one student support,
personal tutor, more facilities, discount for other courses, access to
students area and many more. Course fee for web page design email
course is $15 only. Paid students will receive 13 advanced lessons in
addition to 7 general lessons. You can register for paid course at:
Course Registration Here
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.
C# Create PDF Library SDK to convert PDF from other file formats
Create writable PDF from text (.txt) file. HTML webpage to interactive PDF file creator freeware. Create fillable PDF document with fields.
allow users to attach to pdf form; create a writable pdf form
VB.NET Create PDF Library SDK to convert PDF from other file
HTML webpage to interactive PDF file creator freeware. Create fillable PDF document with fields in Visual Basic .NET application.
acrobat fill in pdf forms; create fillable forms in pdf
- 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. 
C# PDF Field Edit Library: insert, delete, update pdf form field
A professional PDF form creator supports to create fillable PDF form in C#.NET. An advanced PDF form maker allows users to create editable PDF form in C#.NET.
attach image to pdf form; convert word doc to fillable pdf form
<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.
============================================================ 
© 2000,2001 Siamak Sarmady and Learnem Group . All rights reserved. This text is written to be used as text material for "Web
Page design Email Course". Any kind of reproduction, redistribution in any form without written permission of the writer is strictly
prohibited. This special version is prepared in PDF form. You can redistribute this file without any changes either in contents or in
file format. It can not be redistributed in printed form or any other media without permission of the writer.
Back
Next
Back
Next
Web page design course
Lesson 2
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.
Registration: You can also register for paid web design email course. If
you register you will benefit from strong one to one student support,
personal tutor, more facilities, discount for other courses, access to
students area and many more. Course fee for web page design email
course is $15 only. Paid students will receive 13 advanced lessons in
addition to 7 general lessons. You can register for paid course at:
Course Registration Here
2-1 Text Formatting
Until now we have learned to insert simple text into our web pages. In this lesson we will learn
text formatting 
techniques. This part of html writing skills is the most important part of our whole web design
course. So you must learn it word by word.
2-2 Changing text style
We can make a text bold, italic or underlined. If you want to make a text bold, you must inclose it
in <B>...</B> tags.
<BODY>
This is very <B> important </B>
</BODY>
In above text the word "important" is typed bold. You can make a text italic by inclosing it in
<I>...</I> tags.
And finally you can make some text underlined by inclosing it in <U>...</U> tags.
Example 2-1:
<HTML>
<HEAD>
<TITLE>Example 1, Lesson 2</TITLE>
</HEAD>
<BODY>
<B>This text is bold</B><br>
<I>While this one is Italic</I><br>
<U>and this text is underlined</U><br>
<B><I>Look at this, this is both bold and italic</I></B>
</BODY>
</HTML>
In above example you can see that how we can make a text both bold and italic or any other
combination.
You may notice the tag <BR> in the end of each line. Let's see what is this tag. If you insert enter
keys (new line characters) at the end of each line and wish that it will make new lines in your
output page you will soon be 
disappointed.
All lines will be in a single line in output web page. No matter how html code is written in separate
lines. To break lines in output web page you must insert <BR> tags in breaking points. Also pay
attention that <BR> tag is one of few single tags in html language . It has not an ending tag. 
2-3 Nested Tags
In previous section we saw a line of code with nested tags.
<B><I>This is both bold and italic</I></B>
When you use nested tags you must be sure that they do not overlap each other. They must be
nested exactly. For example some part of text may change to bold although it is not desired. 
2-4 Text with fixed width font
As you may know, regular fonts use different horizontal space. For example letter 'w' uses more
space than the letter 'i'. Sometimes we need a font with exactly the same width for all letters . For
example if you want to make a table of numbers and you want the columns to be exactly under
each other in different rows, we will need this kind of text.
To specify this kind of text you must use <TT>...</TT> tags. TT means Typewriter Text. 
2-5 Changing size and face of fonts
We can change face and size of fonts using <FONT>...</FONT> tags. Also using this tag alone will
not change the text. You need to use parameters for this tag. This parameters specify what kind of
change you need in text font. 
2-6 Size of font
To change size of font in a part of text, inclose it with a <FONT> tag as below:
<FONT SIZE=n>...,</font>
n is size of font. size of font must be a number between 1 and 7. If you insert some text without
determining its size default size will be 3. 
Example 2-2
<HTML>
<HEAD>
<TITLE>Example 2, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>1This text is bold</FONT><br>
<FONT SIZE=2>2This text is bold</FONT><br>
<FONT SIZE=3>3This text is bold</FONT><br>
<FONT SIZE=4>4This text is bold</FONT><br>
<FONT SIZE=5>5This text is bold</FONT><br>
<FONT SIZE=6>6This text is bold</FONT><br>
<FONT SIZE=7>7This text is bold</FONT><br>
</BODY>
</HTML>
2-7 Face of fonts
We can use a font for a part of text by specifying its name.
<FONT FACE="Font Name Here">...</FONT>
You must insert font name in double quotes in above tag.
Example 2-3:
<HTML>
<HEAD>
<TITLE>Example 3, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT FACE="ARIAL">This text is in ARIAL font</FONT><br>
<FONT FACE="IMPACT">This text is in IMPACT font</FONT><br>
</BODY>
</HTML>
In above example we have used Arial and Impact fonts while you can use any font you want.
Warning: Fonts will be displayed on your viewer if specified font is installed on your computer. So
be careful while using new fonts. It's better to use native windows fonts in your pages. Windows is
used by about %95 of web surfers.
Alternatively you can use several font faces for each part of your text. In this way your browser
will try alternative fonts if it can not find primary font.
<FONT Face="Arial,HELVATICA">...</FONT>
2-8 Changing font colors
In previous lesson you learned how to change web page background color. Here we will learn how
to change text 
color. Look at this example:
example 2-4:
<HTML>
<HEAD>
<TITLE>Example 4, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is in red color.</FONT><br>
<FONT COLOR="#00FF00">This text is in green color.</FONT><br>
<FONT COLOR="#0000FF">This text is in blue color.</FONT><br>
</BODY>
</HTML>
In above text different colors are used. You can change text color by changing color number. If
you don't remember how to specify color numbers return to previous lesson and review section on
"web page background color".
2-9 Combining Font attributes
We can obviously combine <FONT> tag parameters as we wish. In this way we will be able to
have text with different colors, font faces and font sizes.
You can even use text styles with <FONT> tag by nesting style and font tags.
<B><I><FONT SIZE="5" FACE="IMPACT" COLOR="#00FF00">
How is this ?
</FONT></I></B> 
2-10 Changing default font colors in a web page 
Each browser has its own default settings for text color, link color, visited link color and active link
color.
Text color default is black. Links are usually blue. To change default settings for these values you
must use <BODY> tag with more parameters.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" 
VLINK="#00FF00" ALINK="#FF0000">Some Text </BODY>
BGCOLOR: Web page background
TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link
2-11 End
This lesson included some of the most important techniques in html writing. Now you must be able
to use any kind of text in your web pages.
As remembering so much tags and parameters is difficult, you must use them repeatedly so that
you can remember them.
I always tell this sentence in my programming classes: "No one becomes a programmer
without programming"
Notice: You can find examples of this lessons in our website. There you must go to resources
Documents you may be interested
Documents you may be interested