Lesson 2
To keep things a little cleaner I am only going to write what is in the <BODY> tags. I will omit the <HTML>, <HEAD> & <TITLE> tags. Needless to say, keep these in your document.
<BODY>
Something really cool
</BODY>
Whenever you make a change to your document, just save it, then hit the Reload button on your browser. The output will be displayed in browser as
Something really cool
To change background colors:
The folowing code will change the background colour from Gray to White.
<BODY BGCOLOR="#FFFFFF">
Something really cool
</BODY>
Something really cool
Will be displayed in white background.
Here the colour is obtained by combining the three primary colurs viz Red, Blue and Green. Their values are in hexadecimal start from 00 to FF.
You can specify a background image instead. (Note, the image should be in the same folder as your HTML file).
<BODY BACKGROUND="swirlies.gif">
Something really cool
</BODY>
Something really cool
Will be displayed in swirlies background. swirlies is a small gif file and it will be tiled to form the background of the page. When the size of the .gif is small, the loading of the page will be faster. So keep the .gif size the least.
We can make things bold using the <B> and </B> tags.
<BODY BGCOLOR="#FFFFFF">
Something really <B>cool</B>
</BODY>
Something really cool
What we are telling the browser is: at the <B> start making things bold, and at the </B> stop making things bold.
The same principle applies to italics.
<BODY BGCOLOR="#FFFFFF">
Something <I>really</I> <B>cool</B>
</BODY>
Something reallycool
..and underlining.
<BODY BGCOLOR="#FFFFFF">
<U>Something</U> <I>really</I> <B>cool</B>
</BODY>
Something reallycool
We can use tags in combination if we want to.
<BODY BGCOLOR="#FFFFFF">
Something really <I><B>cool</B></I>
</BODY>
Something really cool
This is an example of nested tags. If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser, they should be nested, not overlapping. Let me illustrate...
<THIS><THAT></THIS></THAT> Overlapping tags.... bad
<THIS><THAT></THAT></THIS> Nested tags.... good
We can change the font size too... It's pretty easy!
First add the <FONT> tags, then specify a SIZE attribute.
<BODY BGCOLOR="#FFFFFF">
Something really <FONT SIZE=6>cool</FONT>
</BODY>
Something really cool
Fonts come in 7 sizes and can vary from 1 to 7. The default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3.
Every browser has a default font setting - font name, size and color. Unless you have messed with it, the default is Times New Roman 12pt (which translates into 3 for our purposes) and it's black. Now we can specify font names other than the defaults. Like ARIAL and COMIC SANS.
<BODY BGCOLOR="#FFFFFF">
Something really <FONT FACE="ARIAL">cool</FONT>
</BODY>
Something really cool
The font will only display if your viewer has that font installed on their computer. You can hedge your bets a little by
specifying more than one font.
<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Welcome to Home Page</FONT>
The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font. You could just as well use <font> instead of <FONT>.
You can change the font colour if you like.
<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000">cool</FONT>
</BODY>
Here the word "cool" will be displayed in Red colour.
Something really cool
We can, of course use more than one ATTRIBUTE in a <TAG>...
<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT>
</BODY>
Here the word cool will be displayed with Arial font of size 7 in red colour.
Something really cool
The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...
Text is black
Links are blue
Active link is red
Visited link is purple
You can change these if you need to (notice I said need to). The whole world has gotten used to links being blue. Why confuse us?
You can change these defaults for the entire document in the <BODY> tag.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Something really cool
</BODY>
Save the file and see the result.
You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser.
So, as you surf along and you run into a really neat page and you find yourself thinking "How'd they do that?", the answer is only a couple clicks away.
<BODY BGCOLOR="#FFFFFF">
r
<FONT SIZE=4>o</FONT>
<FONT SIZE=4>l</FONT>
<FONT SIZE=5>l</FONT>
<FONT SIZE=6>e</FONT>
<FONT SIZE=7>r</FONT>
<FONT SIZE=7>c</FONT>
<FONT SIZE=6>o</FONT>
<FONT SIZE=5>a</FONT>
<FONT SIZE=4>s</FONT>
<FONT SIZE=3>t</FONT>
<FONT SIZE=2>e</FONT>
<FONT SIZE=1>r</FONT>
</BODY>
Try this example and see the display of the word "rollercoaster" as
rollercoaster
<--BACK
NEXT-->
|
