The <BODY></BODY> tags (yep, gotta close
them too) are where we start to have fun, and make our page look
just the way we want it to.
Right now, our page is just about as basic and simple as you can get.
If all you wanted to create was a web page with "Woohoo!" on
it.. you'd be gone by now, right? So, since you're still here, let's party!
Here's what
we have so far:
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY>
Woohoo! My First Web Page!
</BODY>
</HTML>
which looks like THIS
on the web
Let's add a little color. Look at the <BODY> tag now:
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY bgcolor="blue">
Woohoo! My First Web Page!
</BODY>
</HTML>
which looks like THIS on the web
NOTE: I've used a color NAME (blue) here to keep it simple. Later, we'll talk about hex values, which give you more choices.
We could go crazy and add a background texture! Look at the <BODY> tag now:
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY background="wp1bg.gif" bgcolor="blue">
Woohoo! My First Web Page!
</BODY>
</HTML>
which looks like THIS on the web
Patience, Grasshopper. NOW.. we tackle fonts, text color, and more :)
First, don't get too fancy with fonts. Oh, you CAN use any font you want..
and your page will look incredible when YOU look at it. Very nice. Unfortunately,
Begitta Schnickelgruber and her large circle of web-surfing friends and
family don't have that font installed on their computer. So their browser
will use it's default font and Begitta will see your page in a completely
different light. She may even think it stinks enough to send you a grumpy
email about it. And she WON'T come back.
So... let's choose a font that MOST folks will be sure to have. Those
most commonly used are :
Windows: - Arial, Comic Sans, Courier New, Georgia, Helvetica, Times New Roman (usually browser default), and Verdana.
Mac:
Arial, Chicago, Courier, Geneva, Helvetica, Times (usually browser default).
We're going to change the font and color of the text now - so it's easier
to read on the page. The background is dark, so we'll use Arial font,
and make it white. Look at the <BODY> tag:
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY background="wp1bg.gif"
bgcolor="blue">
<font face="Arial" color="white">Woohoo!
My First Web Page!</font>
</BODY>
</HTML>
which looks like THIS
on the web
Cool !
How 'bout we make it BOLD?
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY background="wp1bg.gif" bgcolor="blue">
<font face="Arial" color="white"><B>Woohoo! My First Web Page!</B></font>
</BODY>
</HTML>
Yeah! You could read that from space!
OK - maybe not .. but it stands out, right?
Bigger font you say?
Unless you specify a size, the browser will use a default size (usually "2" or 12pt)
So, let's specify. Look at the <font> tag
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY background="wp1bg.gif" bgcolor="blue">
<font face="Arial" color="white" size="4"><B>Woohoo! My First Web Page!</B></font>
</BODY>
</HTML>
And the RESULT
What? PICTURES?
You want PICTURES?
OK. Let's find one. (This one is named dispos2.jpg)
It is 118 pixels wide by 115 pixels high.
And add it to our page:
.
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY background="wp1bg.gif"
bgcolor="blue">
<font face="Arial" color="white"><B>Woohoo!
My First Web Page!</B></font><img
src="dispos2.jpg" width="118" height="115">
</BODY>
</HTML>
Now our page looks like THIS
Let's tidy that up a little. We're going to center the text and the image:
<HTML>
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY background="wp1bg.gif"
bgcolor="blue">
<div align="center">
<font face="Arial" color="white"><B>Woohoo!
My First Web Page!</B></font><img src="dispos2.jpg"
width="118" height="115">
</div>
</BODY>
</HTML>
and put a little distance between them:
<HEAD>
<title>Welcome to my first web page</title>
</HEAD>
<BODY background="wp1bg.gif"
bgcolor="blue">
<div align="center">
<font face="Arial" color="white"><B>Woohoo!
My First Web Page!</B></font><br><img
src="dispos2.jpg" width="118" height="115">
</div>
</BODY>
</HTML>
TAKE A LOOK
NOTE : If you want more space between - add another <br> (line break) tag. OR
Replace the <br> (line break) with a <p> (paragraph) tag BUT you must close the paragraph tag - like so:
<font face="Arial" color="white"><B>Woohoo! My First Web Page!</B></font><p><img src="dispos2.jpg" width="118" height="115"></p>
