TechKnowNet- Vikas Nath

TechKnow : Website Designing Course

a product of KnowNet ®

MODULE 2 : THE TEN COMMANDMENTS OF HTML.

In this module we will learn some basic but most widely used commands for designing the layout of a webpage. Knowing these commands you can do a lot of things such as change the paragraph alignment, change the spacing between two lines, change the font type, size and colour, and make an ordered or an unordered list etc. In short, you would have mastered almost 75% of webpage designing part.

Let's Get Started !

In this module, I will first show you a sample webpage (see the image below) as it appears on viewing with a web browser say Netscape Navigator or Internet Explorer and then explain the HTML Source Codes behind it. Actually it is one complete page but when viewed on a website viewer package - you will have to scroll below to see the entire page- so it has been broken into two images.

The webpage shown is that of an imaginary Rural Development Organisation named "Gyan".

"Gyan" is a Hindi word which means "Knowledge" ("Gyan" is what we all are seeking!). The broad vision of the organisation is "Local Self Governance through Knowledge Sharing". Gyan was formed in 1994 by a miscellany group of people and its head office is based in New Delhi. It has four regional offices in Jaipur, Bhopal, Hyderabad and Bangalore.

I assure you - that by end of this Module 2 you will be able to design an even better webpage of your organisation, your community or even of yourself than what is shown.

Now let us turn to your computer screen!

Open up a new file in your word editor, say Word Pad. Based on the learnings of Module 1, create the HEAD portion of this new file and leave the BODY portion blank for the time being. Save the file as gyan.html. Alternatively you may say it as gyan.txt and then rename it as gyan.html.

Your file gyan.html will now read something like this:

<HTML>
<HEAD>
<TITLE>Webpage of Gyan </TITLE>
<META name="description" content ="Designing of webpage for a rural development organisation called Gyan">
<META name="keywords" content ="web page, Gyan, governance, knowledge, sharing, 1994, Delhi, Jaipur, Bhopal, Hyderabad, Bangalore">
</HEAD>
<BODY> ------------- marking the beginning of the BODY

</BODY> ------------- marking the end the BODY
</HTML>

We will now step by step create the BODY of the webpage to look the same as the webpage of Gyan as shown in the image. The TEN COMMANDS of HTML follow:

THE "BOLD" COMMAND

 

To make any word, line or an entire paragraph Bold, place at the start of it and  towards the end of it. All the text appearing between  and will now appear Bold when viewed with a web browser.

NOTE : and command has been used to make the word "GYAN" appear in Bold in the starting line of the sample webpage. and command has also been used to make words "Regional Offices" appear in Bold. Let us do the same thing in the file you have created.

Your file gyan.html will now read something like this:

<BODY>
GYAN ------------- makes the word "GYAN" appear in BOLD
Regional Offices ------------- makes the word "Regional Offices" appear in BOLD
</BODY>

Now if you have understood how to use the BOLD command, then you have also learnt how to use the ITALICS command and the UNDERLINE command.

Use  and  to make a statement appear in Italics as in the case of second line of the sample webpage where it is written "Local Self Governance through Knowledge Sharing".

Use  and  to Underline a statement or a word. Any thing appearing between the codes  and  will appear underlined when viewed with a browser as in the case of the phrase "Core Values" as seen in the sample webpage. Let us use these two commands in the file you have created.

Your file gyan.html will now read something like this:

<BODY>
GYAN
Local Self Governance through Knowledge Sharing ------------- makes the statement appear in Italics.
Core Values ------------ makes the phrase appear Underlined.
Regional Offices
</BODY>

Let us once again go over the THREE COMMANDS we have learnt.

BOLD 

ITALICS

UNDERLINE 

THE "PARAGRAPH" COMMAND

 

The "Paragraph" Command is used to create a paragraph and align it either left, right, center or full. The command is very simple to use.  denotes the start of a Paragraph and  denotes the end of the Paragraph. The  command leaves ONE BLANK LINE before the start of the Paragraph while the  command leaves ONE BLANK LINE at the end of the paragraph when seen through the website viewer.

NOTE : and command has been used to separate the word "GYAN" appearing at the top of the sample webpage with the line "Local Self Governance through Knowledge Sharing".

Similarly, and command has been used to separate the paragraph "The overall mission of GYAN is to use the sword of knowledge-sharing ............ create equal opportunities to everyone to improve their quality of lives" from the paragraph "Gyan was formed in 1994, with the involvement of a miscellany group ............. as an autonomous body under the Society Registeration Act of India".

Similarly and command has been used to separate the paragraph "Gyan was formed in 1994, with the involvement of a miscellany group ............. as an autonomous body under the Society Registeration Act of India" from the paragraph "Core Values"and the paragraph "Regional Offices".

Let us try using the PARAGRAPH command in the file are working on.

Your file gyan.html will now read something like this:

<BODY>
GYAN ------------- transforms the word "GYAN" into a separate paragraph.

Local Self Governance through Knowledge Sharing ------------- transforms the sentence into a separate paragraph.

 The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives. ------------- transforms the sentences into a separate paragraph.

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India.  ------------ transforms the sentences into a separate paragraph.

Core Values ------------- transforms the phrase into a separate paragraph.
Regional Offices ------------- transforms the phrase into a separate paragraph.
</BODY>

Time to save this file "gyan.html" and view it in the web browser say Netscape Navigator. On viewing you will find that the file you are creating is starting to resemble the sample webpage shown above, except for the Paragraph Alignment.

Now we will learn how to align a Paragraph - Left, Right, Center and Full (both sides).

To LEFT Align a paragraph, we use the command and .

To RIGHT Align a paragraph, we use the command and .

To CENTER Align a paragraph, we use the command and .

To FULLY Align a paragraph, ( i.e both LEFTandRIGHT Aligned paragraph) we use the command
 and

Note : LEFT Align is the "DEFAULT" alignment when we use only and commands.

Now if you look at the sample webpage of "Gyan" you will find that :

the word "GYAN" on the top is CENTER Aligned.

The line "Local Self Governance through Knowledge Sharing" is RIGHT Aligned.

The next paragraph "The overall mission of GYAN is to use the sword of knowledge-sharing ........" is FULLY Aligned. (some browsers do not support "FULL" Alignments and therefore you would be seeing them "LEFT" Aligned)

The next paragraph "Gyan was formed in 1994.... " is LEFT (or default) Aligned.

Let us try using the PARAGRAPH ALIGNMENT command in the file are working on.

Your file gyan.html will now read something like this:

<BODY>
GYAN ------------- Center Aligns the word "GYAN".

Local Self Governance through Knowledge Sharing ------------- Right Aligns the Paragraph.

The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives. 
------------- Fully Aligns the Paragraph.

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India.  ------------- the paragraph continues to remain default Left Aligned as before.

Core Values ------------- the paragraph continues to remain default Left Aligned as before.
Regional Offices ------------- the paragraph continues to remain default Left Aligned as before.
</BODY>

I am sure you would not be having any problem so far. If you have any problems till this point just shoot an email to us at knownet@knownetweaver.org and let us know about the difficulty you are facing. We would be glad to help you!!

Let us once again go over all the COMMANDS we have learnt.

BOLD 

ITALICS

UNDERLINE 

PARAGRAPH 

PARAGRAPH (LEFT Align) 

PARAGRAPH (RIGHT Align) 

PARAGRAPH (CENTER Align) 

PARAGRAPH (FULL Align) 

Now we will learn some more NEW commands.

THE "FONT" COMMAND

 

The FONT command is a very useful command to change the font type, size and color of the text being written in the BODY section of the webpage. There are three aspects of the FONT command : FONT FACE, FONT SIZE and FONT COLOR. We will learn about each of them one by one.

FONT FACE : Font Face indicates the font types in which the text to be written. There are hundreds of Font Types but the most common ones used are Arial, Arial Black, Arial Narrow, Courier, Helvetica, Times New Roman, Univers, Verdana etc.

These common Font Faces are supported by most of the Web Browsers. The default Font Face is Times New Roman.

To change the FONT FACE of text, we use the command and where
............ denotes the possible Font Types such as Arial, Arial Black, Arial Narrow, Courier, Helvetica, Times New Roman, Univers, Verdana etc.

If you notice the sample webpage of "GYAN" you will find that the Font Type in which the heading "GYAN" is written is "Arial". The subsequent line "Local Self Governance through Knowledge Sharing" is written in "Arial Black". The subsequent paragraph "The overall mission of GYAN is to use the sword of knowledge-sharing ..........." is written in "Helvetica". The subsequent paragraph "Gyan was formed in 1994......" is written in "Courier."

All the remaining Paragraphs are in the default font type "Times New Roman."

Let us try using the FONT FACE commands in the file you are working on.

Your file gyan.html will now read something like this:

<BODY>
GYAN ------------- Changes the Font Face of "GYAN" from the default font face "Times New Roman" to "Arial"

Local Self Governance through Knowledge Sharing  ------------- Changes the Font Face of the line from the default font face "Times New Roman" to "Arial Black."

 The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives.  ------------- Changes the Font Face of the paragraph from the default font face "Times New Roman" to "Helvetica."

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India.  ------------- Changes the Font Face of the paragraph from the default font face "Times New Roman" to "Arial Black."

Core Values ------------- The Paragraph continues to be in the default font "Times New Roman".
Regional Offices ------------- The Paragraph continues to be in the default font "Times New Roman".
</BODY>

Save the file "Gyan.html" and view it in a web browser to see how close it looks to the Webpage of "Gyan." I am sure it would be looking even closer to the original webpage.

FONT SIZE : Font Size indicates the Size of the text. It can be expressed as 1, 2, 3, 4, 5,6 and7. The default Font Face is 2.

To change the FONT SIZE of text, we use the command and where ............ denotes the possible Font Sizes such as 1, 2, 3, 4, 5,6 and7.

If you notice the sample webpage of "GYAN" you will find that the Font Size in which the heading "GYAN" is written is 6.. The subsequent line "Local Self Governance through Knowledge Sharing" is written in Font Size 4. The subsequent paragraphs are in the default Font Size of 2.

Let us try using the FONT SIZE commands in the file you are working on.

Your file gyan.html will now read something like this:

<BODY>
GYAN  ------------- Changes the Font Size of "GYAN" from the default size "2" to "6".

Local Self Governance through Knowledge Sharing ------------- Changes the Font Size of the line from the default size "2" to "4".

The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives.  ------------- Changes the Font Size of the paragraph from the default size "2" to "3."

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India.  ------------- Changes the Font Size of the paragraph from the default size "2" to "3".
Core Values - ------------- Continues to be in default font size "2".
Regional Offices ------------- Continues to be in default font size "2".
</BODY>

Save the file "gyan.html" and view it in the web browser. Is it looking any closer to the sample webpage in terms of Font Types and Font Sizes?

FONT COLOR : Font Color indicates the Color of the text. It could be BLUE, GREEN, RED, BLACK, YELLOW, WHITE etc. The default Font Color is BLACK. Apart from these colours there can be thousands of other colours which are represented by HEXADECIMAL codes.

HEXADECIMAL codes are not as frightening as they sound. It is nothing but representation of any COLOR by its unique alpha- numeric code (a combination of Alphabets and Numbers!).

For example, the color BLACK is representated by 000000 while the color WHITE is representated by ffffff. Some of the general colors and their hexadecimal codes are :

Colours which can be reprentated by their Names or Hexadecimal Codes

BLACK=000000
RED=FF0000
BLUE=0000FF
GREEN=00FF00
PINK=FF8080
YELLOW=DBDB00
BROWN=804000

Colours which can be reprentated only through Hexadecimal Codes

PURPLE = 400080
LIGHT RED=FF6A6A
LIGHT BLUE=71B8FF
LIGHT GREEN=95FF95
LIGHT BROWN=FFA74F
LIGHT PURPLE=FF75FF
LIGHT GREY=C0C0C0
and hundreds of many more color types.....

To change the FONT COLOR of the text, we use the command and where ............ denotes the possible Font Colors such as BLUE, GREEN, RED, BLACK, YELLOW, WHITE , BROWN etc.

If you notice the webpage of "GYAN" you will find that the Font Color in which the heading "GYAN" is written is "BLUE". The subsequent line "Local Self Governance through through Knowledge Sharing" is in RED color. The subsequent paragraph "The overall mission of GYAN is to use the sword of knowledge-sharing ..........." is in "GREEN" color. The subsequent paragraph "Gyan was formed in 1994......" is written in "BROWN" color.

All other Paragraphs are in the default color BLACK.

Let us try using the FONT FACE commands in the file you are working on.

Your file gyan.html will now read something like this:

<BODY>


GYAN  ------------- Changes the Font Color of "GYAN" from the default color Black to Blue.

Local Self Governance through Knowledge Sharing  ------------- Changes the Font Color of the line from the default color Black to Red.


The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives.  ------------- Changes the Font Color of the paragraph from the default color Black to Green.

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India.  ------------- Changes the Font Color of the paragraph from the default color Black to Brown.

Core Values -------------- The font color continues to remain default Black.

Regional Offices -------------- The font color continues to remain default Black.

</BODY>

The same Font Colors could also be specified by using the HEXADECIMAL codes. In that case the file would like this:

<BODY>

GYAN  ------------- Changes the Font Color of "GYAN" from the default color Black to Blue.

Local Self Governance through Knowledge Sharing  ------------- Changes the Font Color of the line from the default color Black to Red.


The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives.  ------------- Changes the Font Color of the paragraph from the default color Black to Green.

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India.  ------------- Changes the Font Color of the paragraph from the default color Black to Brown.

Core Values -------------- The font color continues to remain default Black.
Regional Offices -------------- The font color continues to remain default Black.
</BODY>

Save the file "gyan.html" and view it in the web browser. Are the colors of your file matching those of the sample webpage? They should start matching.

Now we will learn some more NEW commands.

THE "FONT" COMMAND

 

Break  is one of those exceptional commands which do not have an ending command. It function is just to give a LINE BREAK to start a sentence from the next line. Its function is similar to that of the "ENTER" key on the keyboard while working in a word-processing package.

Writing the code at the start of any text would start the same text from the next line when
viewed in a web viewer package.

Now if you notice in the sample webpage of GYAN, the address portion for writing to Gyan makes use of the BREAK command because each address line starts from a new line.

Let us try using the BREAK command in the file you are working on.

Your file gyan.html will now read something like this:

<BODY>

GYAN 

Local Self Governance through Knowledge Sharing 


The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives. 

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India. 

Core Values
Regional Offices

To know more about our activities, you can write to us at : -------- Changes this line into a Paragraph and inserts one BLANK LINE above and below it.
Gyan
 D- 147 Virtual Colony ---- Starts the address line from a new line.
 New Delhi ---- Starts the address line from a new line.
 India ---- Starts the address line from a new line.
 Phone +91 11 12345678 ---- Starts the address line from a new line.
 Fax +91 11 87654321 ---- Starts the address line from a new line.
 email: gyan@gyan.org ---- Starts the address line from a new line.
 website : http://www.gyan.org ---- Starts the address line from a new line.

</BODY>

You may like to save the file "gyan.html" and view it in the web browser to so whether the command is doing its job.

Now we will learn one more command before we finish this MODULE 2.

THE "LIST " COMMAND

<OL> <UL> <LI>

The list command is very useful in inserting BULLETS, Numbers or Alphabets to separate different lines. Lists could be Ordered Lists (UL)or Unordered Lists (OL).

Ordered Lists are those which follow a sequence, say: 1, 2, 3, 4, 5... or a, b, c, d, e .......... or i, ii, iii, iv, v ......... or I, II, III, IV, V......

Example of Ordered Lists are :

Apple
Orange
Coconut
Peach

Apple
Orange
Coconut
Peach

Apple
Orange
Coconut
Peach

Apple
Orange
Coconut
Peach

Apple
Orange
Coconut
Peach

Unordered Lists are those which do not follow a sequence and are merely bulleted by either disc, square or circle.

Example of Unordered List are:

CIRCLE TYPE

Apple
Orange
Coconut
Peach

DISC TYPE

Apple
Orange
Coconut
Peach

SQUARE TYPE

Apple
Orange
Coconut
Peach

Now if you just look at the sample webpage of GYAN you will find that the five Core Values of Gyan form an Unordered List while the four regional offices of Gyan form an Ordered List.

To create an Unordered List (UL) we use the commands <UL TYPE = "........">, </UL> and <LI>, where ...... denotes either Square, Circle or a Disc. The default Unordered List type is DISC.

<UL> marks the start of the Unordered List and </UL> marks the end of the Unordered List.

<LI> or Line Interval indicates the begining of the line where bullets have to be inserted.

Let us create the following unordered list:

Apple
Orange
Coconut
Peach

The HTML codes for it would be:

<UL TYPE="DISC">
<LI>Apple
<LI>Orange
<LI>Coconut
<LI>Peach
</UL>

Let us try using the Unordered List Command to create the CORE VALUES portion of the sample webpage of GYAN. Here you will notice that the bullets are in shape of SQUARE.

Your file gyan.html will now read something like this:

<BODY>

GYAN 

Local Self Governance through Knowledge Sharing 

The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives. 

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India. 

Core Values
<UL TYPE ="SQUARE">
<LI>Pursuit of vision as a long term strategy.
<LI>Belief in democracy and non-violence.
<LI>Mainstreaming local people's involvement in all aspects of decision-making.
<LI>Inculcating gender equity and concerns in all actions.
<LI>Building, strengthening and replicating the knowledge revolution.
</UL>
Regional Offices

To know more about our activities, you can write to us at :
Gyan
 D- 147 Virtual Colony
 New Delhi
 India
 Phone +91 11 12345678
 Fax +91 11 87654321
 email: gyan@gyan.org
 website : http://www.gyan.org

</BODY>

Save the file "gyan.html" and view it in the web browser. Is the Unordered List showing up on viewing the webpage?

To create an Ordered List (OL)we use the commands <OL type = "........">, </OL> and <LI>,
where ...... denotes either 1, I, i, A or a. The default Ordered List type is 1, 2, 3....

Let us create the following Ordered list:
1. Apple
2. Orange
3. Coconut
4. Peach

The HTML codes for it would be:

<OL TYPE="1">
<LI>Apple
<LI>Orange
<LI>Coconut
<LI>Peach
</OL>

Let us try using the Ordered List Command to create the CONTACT OFICES portion of the sample webpage of GYAN. You will notice that the ordered list is of the type i, ii, iii, iv........

Your file gyan.html will now read something like this:

<BODY>

GYAN 

Local Self Governance through Knowledge Sharing 

The overall mission of GYAN is to use the sword of knowledge-sharing to empower people by building capacities in them to understand local governance structures and helping them play an active and informed role in decision-making. The aim of empowering people is to shape their lives and create equal opportunities to everyone to improve their quality of lives. 

Gyan was formed in 1994, with the involvement of a miscellany group of people comprising of academicians, grassroots practitioners, social scientists, media person and members of the judiciary. The organisation is registered as an autonomous body under the Society Registration Act of India. 

Core Values
<UL TYPE ="SQUARE">
<LI>Pursuit of vision as a long term strategy.
<LI>Belief in democracy and non-violence.
<LI>Mainstreaming local people's involvement in all aspects of decision-making.
<LI>Inculcating gender equity and concerns in all actions.
<LI>Building, Strengthening and Replicating the knowledge revolution.
</UL>
Regional Offices ----------- Creates a new Paragraph
The main office of Gyan is in New Delhi. There are four regional offices of Gyan in India. These are at:
<OL TYPE ="i">
<LI>Jaipur
<LI>Bhopal
<LI>Hyderabad
<LI>Bangalore
</OL>

To know more about our activities, you can write to us at :
Gyan
 D- 147 Virtual Colony
 New Delhi
 India
 Phone +91 11 12345678
 Fax +91 11 87654321
 email: gyan@gyan.org
 website : http://www.gyan.org

</BODY>

There is nothing more to learn now in this MODULE!!

THE TIME HAS COME TO SAVE YOUR FILE ONCE AGAIN !!

See for yourself whether your file "gyan.html" fully resembles the < href="manual2.html#image">sample webpage!!
If so, you have mastered 75% of the Web designing.

Even if it does not resemble the sample webpage, don' t worry - just write us an email at knownet@knownetweaver.org to let us know the problem you are facing and we will get back to you.

End of Module 2

Go to Module 3
Go to Module 4

Go back to Module 1

Do let us know of your feedback at knownet@knownetweaver.org

TechKnow is designed by Vikas Nath with grateful inputs from Pankaj Acharya. TechKnow is a part of the series of resources being developed under the KnowNet Initiative.

Sign Guestbook View Guestbook