Ukindia
Learn HTML Lesson 2
Jalfrezi Html lessons..Lesson 3 ..
Home Page..Learn to read Hindi..Write to us if you find this lesson useful
You may notice that the heading above is in Italics. This is because it is between the italic tags ( i and /i) . From now on we will use capitals for tags . So I and /I , U and /U ,B and /B mean that you have to put angled brackets opening and closing ones after each tag. The / tag eg /B means stop writing bold. This will become clearer when we do another sample page
Prints as
Right On!
In html the computer wont go the next line unless a BR tag is written at the end of the line. This can be a pain when we have a list of a lot of lines -for eg Zee movies would be printed without BR tags as
November Movies on Zee 1 Judaii 2. Judwaa. 3.Koshish etc .
A very useful tag to cope with this is the PRE ( preformatted text) and /PRE tag
This shows up as
November Movies on Zee
1 Judaii
2. Judwaa.
3.Koshish etc .
With these- PRE and /PRE tags the computer will print the spaces as you write them , but as you see it looks different from normal text.
Another way to deal with the problem of lists is to put in tags for an ordered (numbered) list OL and /OL , and each item in the list is put as LI . The computer will itself add the numbers for eg. 
This will print as
November Movies on Zee
- Judaii
- Judwaa.
- Koshish etc
Sometimes we need a list where the numbers are not necessary , and in this case the tag starts with an unordered list tag UL and ends with /UL eg.
Prints as
Note the computer indents the list and adds a bullet before each item.
One can nest an ordered and unordered list any number of times eg
This prints as
- Judaii
- Sri Devi
- Anil Kapoor
- Urmilla
Remember each of these tags is in pairs so for each OL you must have /OL .
If you dont want bullets replace OL with DL (defined list) , and LI with DT(defintion term) and DD(definition definiton). The DT term indents aone space and the DD another one. as follows eg
Prints as
-
Movies on Zee
- Judaii
- Sri Devi
- Judwaa
- Koshish etc .
Notice we got the slightly thicker horizontal line above by specifying another attribute after HR ie size=5 as in i) in the figure below . To get a solid black look as below we need to add another attribute as in ii) called NOSHADE .
For readers to get back to you its useful to include a mail tag
In the above you put in the email address after the mail to: , and put in the name of the company outside of the tag ( before the closing tag /a ) so that it is printed eg.
.
This is printed as Maini Solicitors
If you click on Maini Solicitors you will see a letter form come up and you can send your legal problem to them .
By putting an image inside the link tag the whole image becomes active ie a 'hot' link and clicking anywhere will take you to that site. For eg to go to the CNN site you write out this tag which tells the computer to go to www.cnn.com site when the image named button is clicked anywhere. eg . To go to CNN 
And the following is printed
To go to CNN 
One can use the mail tag to make the mail link more attractive by putting in a hot picture within the tag eg. Send us mail
by clicking on the box
and the following shows up
Send us mail 
by clicking on the box .
Simple tables are easy to make. Just tell the computer you want a Table printed by starting a TABLE tag . Then if you want two rows in the table put in two TR (table row) tags. After each TR tag put the data you want in each cell by telling the computer what it is with the TD (table data) tag. End with a /TABLE.For example the following table has two rows ie two TR tags .
the above table was not very exciting so lets give it a border
eg 
Lets widen the whole table to 50% of the page size as follows 
Lets darken the info in the first column to highlight it as follows with the TH tag
Lets make practical use of this skill . Imagine student A , B , C getting marks as follows in each month 
| January | February | March
|
|---|
| Student A | 45% | 47% | 52% |
|---|
| Student B | 82% | 65% | 33% |
|---|
|
Student C | 25% | 27% | 24% |
|---|
Note how we decreased the border thickness to 5 and how we left an empty table square at the top left by putting no info after TD . We have also increased the width to 75% of the page. Student A is improving each month while student B has fallen in love and Student C has no alternative but to go into politics (joke!)
We can align the info in each cell to the center , right or left by putting in the command align within the TR tag
| January | February | March
|
|---|
| Student A | 45% | 47% | 52% |
|---|
| Student B | 82% | 65% | 33% |
|---|
|
Student C | 25% | 27% | 24% |
|---|
Lets align all the info neatly in the center using the following tags
| January | February | March
|
|---|
| Student A | 45% | 47% | 52% |
|---|
| Student B | 82% | 65% | 33% |
|---|
|
Student C | 25% | 27% | 24% |
|---|
Note all tables should be started with TABLE tag and ended with /TABLE
COLSPAN and ROWSPAN are two attributes which modify the TH tag , for eg in the following TH for February increases the colspan for February to 2 and its rowspan to 4 while it increases the colspan for January to 2. You have to be careful not to give the browser impossible things to do eg columns in February to 10 and rows in January to 5 etc. otherwise the browser will crash..
| January | February | March
|
|---|
| Student A | 45% | 47% | 52% |
|---|
| Student B | 82% | 65% | 33% |
|---|
|
Student C | 25% | 27% | 24% |
|---|
You will note that the browser was given a difficult to tak to give February 4 rows and so you got unexpected results. That is why you need to test your page on the different browsers before putting them on the net .
To be contnued.