Lesson 3
Formatting text
Unless you tell it otherwise, the browser just displays the characters in a steady stream. If you want to start a new line, you have to use a line break.
<BODY BGCOLOR="#FFFFFF">
Lesson No 1<BR>
Lesson No 2<BR>
</BODY>
<BR> basically says to start a new line. Simlilar to <BR> is <P>. It denotes the start of a new "paragraph" and nearly always has the effect of breaking, and then skipping a line.
The above code with <BR> gives the output as :
Lesson No 1
Lesson No 2
If we use <P> tag , the line ends there and a line will be skipped.
<BODY BGCOLOR="#FFFFFF">
<P>Lesson No 1</P>
<P>Lesson No 2</P>
</BODY>
The above code gives the output as :
Lesson No 1
Lesson No 2
The browser won't recognize more than 1 space. For putting space while formatting text use " ".
<BODY BGCOLOR="#FFFFFF">
Something really cool
</BODY>
The above code gives the output as :
Something really cool
If you want to put space in between words use .
<BODY BGCOLOR="#FFFFFF">
Something
really
cool
</BODY>
The above code gives the output as :
Something
really
cool
There are quite a few of these special characters.
( non-breaking space)
< (< less than symbol)
> (> greater than symbol)
& (& ampersand)
" (" quotation mark)
<BODY BGCOLOR="#FFFFFF">
<CENTER>Something really cool</CENTER>
</BODY>
Will centralise the text - Something really cool - in the computer screen.
Something really cool
To make multiple blank lines, make an empty space with a line break for each blank line you want.
<BODY BGCOLOR="#FFFFFF">
Something really<BR>
<BR>
<BR>
<BR>
cool<BR>
</BODY>
The above code gives the output as :
Something really
cool
To place an image in a web page, first copy the image file to the folder in which the .html file is saved. Specify an image with the <IMG> (image) tag and also specify the source and the size.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>
Will display the image named chef.gif in the above dimension. If the html document is in a folder viz. Newfolder and the image named chef.gif is in a subfolder of Newfolder viz. images. Then use
SRC="images/chef.gif"
If the image is in one folder up from the html document, then
SRC="../chef.gif"
SRC="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory. In otherwords, images and Newfolder are at the same level - they have a common parent folder.
All references to images can have as their source the absolute (complete) URL. For example:
http://www.bizhat.com/images/chef.gif
If the image resides on a completely different server, absolute URL has to be used.
Another IMG attribute that deserves mention is ALT
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">
ALT is sort of a substitute for the image when the user is using a browser that isn't (for whatever reason) displaying images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a screen reader (a browser where the web page is read aloud). In those cases, that ALT attribute could be very important to your visitor.
The browser figures out how big the image is all by itself. You can specify whatever dimensions you want and override the proper dimensions. Try the folowing examples :
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>
<--BACK
NEXT-->
|