So, you want to make a Web Page!
Lesson 2

adapted from Joe Barta's tutorials at- PageTutor.com

title


If you don't already have one, be sure to create a new folder titled Lesson_02 in your HTML folder

Let's start by creating a basic skeleton HTML page (just like you learned in Lesson 1)

<html>  

<head>  

<title>Lesson 2</title>  

</head>  

<body>  

</body>  

</html> 

Type something really cool.

<body>  

Something really cool  

</body>  

bar

Something really cool

 


IMPORTANT NOTE: Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. In many instances just hitting the refresh button doesn't quite do the trick. In that case...

Internet Explorer users: Click Refresh while holding down the CTRL key.
Netscape/FireFox users: Click Reload while holding down the SHIFT key.


I think the first thing we are going to learn is how to change background colors.

<body bgcolor="#ccffcc">  

Something really cool  

</body>  

bar

Something really cool

 

#ccffcc is computerese for light green. Here's a chart with few more colors

The topic of colors and browsers is rather interesting. Although it's not overly important to understand how browsers and colors work together at this point in time, you may want to come back to this section after the lessons and learn about Netscape's infamous 216 colors.


Save as: Lesson_02A.html in your Lesson_02 Folder (we'll create a Lesson 02B in a few seconds)


You can specify a background image instead. (Note, the image should be in the same folder as your HTML file. More on this below.)

<body background="swirlies.gif">  

Something really cool  

</body>  

bar

Something really cool

 

Here's the background image


swirlies.gif

In order for the image to show up, the browser has to be able to find it. For now, we want the image to be in the same folder as your HTML document (Lesson_02A.html). The easiest way to do this is to right click on the swirlies image above and choose Save Picture As (or some variant thereof). Browse to wherever you put Lesson_02A.htmland save the image there (HTML/Tutorials folder). Later we'll get into this stuff in a little more detail.

Save the image as swirlies.gif

Once you get the background to show up, save as Lesson_02B (in your Lesson_02 folder)


It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this...

<body background="bluebar.gif">  

Something really cool  

</body>  

bar

Something really cool

 

Here's the background image

bluebar.gif

Right click... save as... bluebar.gif


Save As: Lesson_02C.html (in your Lesson_02 folder)


FAQ: I've seen pages where the background is fixed and the page just scrolls over it. How can I do that?

A: Simple... add style="background-attachment:fixed" to the <body> tag...

<body background="mybackground.gif" style="background-attachment:fixed">  

Here is an example

Here is a good place to interject my thoughts on a hotly debated subject: This effect is achieved using CSS (Cascading Style Sheets). A case could be made that a LOT of traditional HTML markup can (and should) be made using CSS. But CSS is a lesson for another day. We crawl before we walk, walk before we run, etc, etc. Today we're learning the basics.... simple, old fashioned HTML markup. So, carry on....

On to Lesson 3