Lesson 5
Now we are going to look at a couple formatting tools availble to you. First one is <BLOCKQUOTE>. In most browsers it pulls your margins in from both sides.
<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs.
</BLOCKQUOTE>
</BODY>
<BLOCKQUOTE> helps in easy intending. See the text displayed in browser.
LIST types
There are ORDERED lists, UNORDERED lists and Definition lists.
This is an ordered list
What I want for Christmas
- Greeting cards
- a drum set
- a Chrisrmas cake
- a star
This is an unordered list
What I want for Christmas
- Greeting cards
- a drum set
- a Chrisrmas cake
- a star
UNORDERED list
Step 1 : Add a pair of unordered list tags.
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
</UL>
</BODY>
Step 2 : Add a few list items
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>Greeting cards
<LI>a drum set
<LI>a Chrisrmas cake
<LI>a star
</UL>
</BODY>
Step 3 : Save the file unordered _list.html and call it in browser. The display appears as:
What I want for Christmas
- Greeting cards
- a drum set
- a Chrisrmas cake
- a star
ORDERED list
Change the <UL> tag to <OL>.
<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<OL>
<LI>Greeting cards
<LI>a drum set
<LI>a Chrisrmas cake
<LI>a star
</OL>
</BODY>
The above code gives the output as :
What I want for Christmas
- Greeting cards
- a drum set
- a Chrisrmas cake
- a star
DEFINITION list
DEFINITION list is used to define a word like that in a dictionary.
Step 1 : Make a definition list tag and add a definition title...
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
</DL>
</BODY>
Step 2 : And a definition item.
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</DL>
</BODY>
The above code gives the output as :
10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
Horizontal Rule : Draws a horizontal line.
<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>
We have a few options available to us...
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50>
</BODY>
Save the file and view the output. Horizontal line length for the first case will be 20% of the screen. In the second case we get a line having 50 pixel in length.
This one is pretty self explanatory.
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>
Here the line having length 60% of the screen will be aligned left, right and center respectively.
We can control the thickness...
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=15>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>
Here the second line will be on of 60% of the screen's length and a width of 15 pixels. And in the third case we get a solid line having a width of 15 pixels.
With the <PRE> (preformat) tag, we can put a stop to that and have things displayed the way we type them.
<BODY BGCOLOR="#FFFFFF">
<PRE>
----------------------------------------
Sr No. Name Age Sex Country
1 Anil 23 M India
2 Cathe 19 F Germany
3 Chris 22 M Britain
----------------------------------------
</PRE>
</BODY>
The above code gives the output as :
----------------------------------------
Sr No. Name Age Sex Country
1 Anil 23 M India
2 Cathe 19 F Germany
3 Chris 22 M Britain
----------------------------------------
Try the same without the <PRE> tag and feel the difference.
Comment tag : comment must start with <!-- and end with -->. You can even put other html tags in a comment and they will be ignored. The browser will just keep ignoring everything until it sees a -->.
<BODY BGCOLOR="#FFFFFF">
A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, <!--Dear Rani, I will be meeting you at Hotel Meredian, Shimla on 26 th Jan at 1600 h--> notes to yourself, or write a helpful message to someone looking at the source of your page.
</BODY>
The above code gives the output as :
A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, notes to yourself, or write a helpful message to someone looking at the source of your page.
The viewer who is searching the hidden message has to view the source code of the page using View -> Source option from main Menu.
Now you now know all the basic tags need to create a web page!. Aren't there more tags? Oh yeah. Lots more. But you've got about 70% of the tags to make a web page. When you are familiarised with these main tags, you have to learn more advanced tutorials like Table Tutor, Form Tutor and Frames Tutor.
<--BACK
HOME-->
|
