| HTML TUTORIAL S T A R T I N G W I T H H T M L 4 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).  opened in your web browser (Figure 1.2).S T A R T I N G W I T H H T M L |
<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>
S T A R T I N G W I T H H T M L
6
</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>
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>
S T A R T I N G W I T H H T M L
7<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.
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.
No comments:
Post a Comment