Web Design Using HTML Quickly Learn Web Development Course Series

Learnem.com
Web Development Course Series
Quickly Learn
WebDesign
UsingHTML
By: Siamak Sarmady
LEARN’EM WEB DEVELOPMENT COURSE SERIES
Quickly Learn
Web Design Using HTML
Ver. 2.08.02
2000-2008 Learn’em Educational (Learnem.com)
By: Siamak Sarmady
1
Table of Contents
STARTING WITH HTML .................................................................................... 3
FORMATTING TEXT.......................................................................................... 9
PARAGRAPHS AND IMAGES ........................................................................... 15
LINKS AND LISTS ............................................................................................ 21
TABLES (1) ..................................................................................................... 27
TABLES (2) ..................................................................................................... 32
TABLES (3) ..................................................................................................... 40
FRAMES ........................................................................................................ 49
FRAMES (2) ................................................................................................... 54
FRAMES (3) ................................................................................................... 59
INTRODUCTION TO CASCADED STYLE SHEETS ................................................ 65
SERVER SIDE DYNAMIC WEB PAGES ............................................................... 70
HOW DO PHP AND ASP SCRIPTS WORK ......................................................... 74
CLIENT SIDE DYNAMIC WEB PAGES ................................................................ 79
FORMS AND SERVER SIDE CGI/SCRIPT PROGRAMS ........................................ 83
FORM FIELDS ................................................................................................. 89
FORM FIELDS (2) ............................................................................................ 93
2
S T A R T I N G
W I T H
H T M L
Lesson
1
Starting with HTML
W
eb 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 Firefox or other web browsers will be seen as a web page. Web pages you see in a
browser might seem simple, but the code under the web page may sometimes be complicated.
To design an html web page you have two options:
•
You can use a web page editor like Microsoft FrontPage, Adobe Dreamweaver or similar to create
web pages. Webpage editor software works like Microsoft Word™ (a complicated editor program
used for creating and editing pages of books, letters etc.). You just type text, insert graphics and finally
save your document as an html web page. Web page design software will generate the html code in
background and saves it in html file. Designing web pages in such software can be very easy. But if
you are going to create dynamic, well designed, professional web pages you will find that this is not a
good option. A professional web developer needs to understand the html code itself very well.
•
Second option is to learn html codes and write html pages in a simple text editor. As mentioned
earlier, your codes will be seen as WebPages when viewed in a web browser. After you have learned
html code and you are confident about your HTML knowledge, you can use web page design
software like Dreamweaver to speed up the process of editing pages.
Reasons why we should write HTML code (second option)
•
If you want to design professional web pages, using web page design software alone will not be
enough. You must be familiar with html codes to perform small modifications to the generated code.
Code generated by these software packages is sometimes big and chaotic and maintaining such code is
difficult. You will need to modify the code and optimize it or even write the code without their help.
•
If you want to design dynamic web pages (as in most of the websites) you will need to know html
codes to be able to generate it programmatically.
•
If you want to use forms in your pages to send information to your own or someone else’s server and
return result pages back to browser you will need to know html codes.
First Web Page
3
S T A R T I N G
W I T H
H T M L
For this course 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
Mozilla Firefox. In this course we will assume that you are working in Windows 9X/NT/2000/XP/Vista.
Open notepad and type the following code.
Example 1-1: page1-1.html
<HTML>
Hello world!
</HTML>
Now save the text as "page11.html". Notepad by default will add a “.txt” extension to every file it saves. To
make sure it will save your file with an “.html” extension you need to change “Save as type” setting in “Save
file” window to “All files” (Figure 1.1).
FIGURE 1.1: Saving a file in .html format.
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 (Figure 1.2).
4
S T A R T I N G
W I T H
H T M L
FIGURE 1.2: this is what you should see in your browser.
<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 the start of
the HTML and </HTML> marks its end. We normally do not put the text of web page directly inside
<HTML></HTML> tags (as you will see in next section) but this is enough for this simple example.
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.
One of the most important parts of a header is title. Title is the small text that will appear in title bar of the
browser software. So html document will be as below.
<HTML>
<HEAD>
<TITLE>Title of the page</TITLE>
5
S T A R T I N G
W I T H
H T M L
</HEAD>
</HTML>
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. Enter the html code in notepad and save it under the file name
"page2.html". Then view html file in your browser by double clicking on it in windows explorer.
Example 1-2: page1-2.html
<HTML>
<HEAD>
<TITLE>My company web page</TITLE>
</HEAD>
<BODY>
Welcome to our homepage. More text here.
</BODY>
</HTML>
FIGURE 1.2: The file page12.html being viewed in Internet Explorer. Look at the title bar of the window “My company web page”.
If you want you can change background color of your web page by extending <BODY> tag as below.
6
S T A R T I N G
W I T H
H T M L
<BODY BGCOLOR="#00FF00">
</BODY>
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 and computers will be
capable to show all these colors with significant difference.
Background Image
We can use a background picture for web pages instead of background color. <BODY> tag in HTML code
can be extended to include an image file name as the background of the page. Let’s assume we have an
"image1.gif" file and we want to use it as background. Image file must be in the same folder as our html file
otherwise browser will not be able to find it. (Or you can add the file path to the image file name).
Example 1-3: page1-3.html
<HTML>
<HEAD>
<TITLE>My company web page</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
Welcome to our homepage. More text here.
</BODY>
</HTML>
FIGURE 1.3: The file page13.html being viewed in Internet Explorer. Web page text and the background image tiled to entire web page.
7
S T A R T I N G
W I T H
H T M L
Exercises
Important: Do not use any html authoring program like MS FrontPage,
Expression or Dreamweaver. You must work on the codes using a simple text editor.
Paid students need to submit their exercises inside e-learning virtual campus.
Corrected exercises will be available inside virtual campus.
If you have obtained the e-Book only, you can discuss your homework
questions in Learnem.com support forums (in registered e-book users section).
1. Write your web page code and use a background picture for it.
2. Write above code with a blue color instead of an image as its background.
3. List tags you learned in this lesson with a small description.
8