denotes the end of the code.
For example : < HTML> and < /HTML>,
< HEAD> and < /HEAD>, < BODY> and < /BODY>.
Rule 3
HTML codes are case and space insensitive. It means you may type the HTML codes in upper caps < CODE>, lower caps < code> or initial caps < Code>. But it is a good practise to write all HTML codes in upper caps to make it easier to understand the codes. Further two HTML codes may be separated by any number of spaces or lines.
The time has now come to switch on your computers and open up the word editor say Word Pad. From the File Menu, open up a NEW file for designing your very first web page.
Your
file will now read like:
< HTML> ------------ marking
the beginning of HTML codes
< /HTML> ----------- marking the end of the HTML codes |
We will now develop the HEAD of the web page.
Type
< HEAD> to mark the beginning of the HEAD of the web page. Again using
Rule 2, we write < /HEAD> to display the end of the HEAD.
Your
file will now read like:
< HTML>
< HEAD> ------------ marking the beginning of the HEAD < /HEAD> ------------ marking the end of HEAD < /HTML> |
There are three main components of the HEAD of a webpage. These are :
TITLE of the web page.
DESCRIPTION of the web page.
KEYWORDS used in the web page.
We
use the HTML codes < TITLE> and < /TITLE> to write the title of the
webpage. Since TITLE is a component of the HEAD, we will have to write
the TITLE codes in between the codes of the HEAD. Let us give the title
of the homepage as "My First Web Page".
Your
file will now read like:
< HTML>
< HEAD> < TITLE>My First Web Page < /TITLE> ------------ marking the TITLE of the webpage < /HEAD> < /HTML> |
For writing the description and keywords of the web page we use the following HTML codes:
< META name="description" content="...........">
< META NAME="keywords" content="............" >
As an exception to Rule 2, there are no end codes for these two HTML codes. These two codes along with the Title code play an important role in appropriately classifying and retrieving your web pages on the internet.
Now
try to think of some appropriate description and keywords for your webpage
and fill in them in spaces denoted by "..........."
Your
file will now read like:
< HTML>
< HEAD> < TITLE>My First Web Page < /TITLE> < META name="description" content ="Designing of webpage"> < META name="keywords" content ="first, web page, TechKnow, Training, Manual"> < /HEAD> < /HTML> |
Stand back, the designing of HEAD of the webpage stands completed! It will be a good idea to save the new file you have created. Go to the File Menu and select "Save the File as" option. Then save the file, then save the file with a name of your choice but with the extension name as htm or html. Let us say we save it as test.html.
Alternatively, you may also save it as test.txt and later rename it to test.html
We
will now proceed to develop the BODY of the webpage.
Your
file test.html will now read like:
< HTML>
< HEAD> < TITLE>My First Web Page < /TITLE> < META name="description" content ="Designing of webpage"> < META name="keywords" content ="first, web page, TechKnow, Training, Course"> < /HEAD> < BODY> ------------- marking the beginning of the BODY < /BODY> ------------- marking the end the BODY < /HTML> |
The body contains the actual information we want to be displayed which in our case is the text- "This is the first web page I have designed using TechKnow"
So
type in this text between < BODY> and < /BODY>
Your
file test.html will now read like:
< HTML>
< HEAD> < TITLE>My First Web Page < /TITLE> < META name="description" content ="Designing of webpage"> < META name="keywords" content ="first, web page, TechKnow, Training, Course"> < /HEAD> < BODY> This is the first web page I have designed using TechKnow < /BODY> < /HTML> |
Now
save the file test.html once again and guess what ???
YOU HAVE FINISHED DESIGNING YOUR FIRST WEBPAGE
ANY PROBLEMS, MAIL US knownet@knownetweaver.org |
The time has now come to view the webpage what you have designed using HTML codes. To do this open up any website viewer package, let us say- Netscape Navigator. Go to File menu of the package and open the file test.html which you have saved on your computer.
On opening the file, this is what that should be displayed on your screen.
End of Module 1
Go to Module 2
Go to Module 3
Go to Module 4
Do let us know of your feedback at knownet@knownetweaver.org
TechKnow is designed by Vikas Nath with grateful inputs provided by Pankaj Acharya. TechKnow is a part of the series of resources being developed under the KnowNet Initiative.
Copyright © 2000 KnowNet Initiative¨.