More Raw HTML

This assignment continues where "HTML in the Raw" left off.

For this assignment you'll add these things to your web page:

Follow these steps:

1) Create a new folder for this assignment

a) Open your My Documents folder

b) Create a new folder called David's HTML, but change David to your name.

c) Move your HTML file from the last assignment into this new folder (it should have a name like David's Web Page).

2) Open your HTML file in Notepad

Right click on the file, and select Open With... then choose Notepad.

3) Set the background color

a) Find the body tag, which looks like this:

<body>

b) Change it to look like this:

<body bgcolor="red">

bgcolor is an attribute. Attributes modify a tag.

c) Preview your web page

Save your web page in Notepad. Then go back to your My Documents folder and double-click on your HTML file. It will open in Internet Explorer and you should see a red background color

d) Change the word "red" to a different color

Go to this web page for a complete list of color choices

e) Preview your web page

Save your web page and then go back to your web page in Internet Explorer and press the refresh button Refresh button

4) Set the text color

a) Add a text attribute to the body tag so that it looks like this:

<body bgcolor="red" text="rgb(0, 255, 0)">

(Of course, instead of "red" you'll have whatever color you used above.)

This will set your text color to green.

In this step, instead of using a literal color such as "green", we used an rgb color. An rgb color has three numbers: red, green, and blue. Each color can go from 0 up to 255.

For example:

rgb Value Result Explanation
rgb(255, 0, 0) red all red
rgb(127, 0, 0) dark red a little bit of red
rgb(0, 255, 0) green all green
rgb(0, 0, 255) blue all blue
rgb(255, 255, 255) white all colors
rgb(255, 255, 0) yellow red and green
rbg(127, 127, 0) dark yellow a little bit of red and green

See this web page for more rgb color examples.

b) Preview your web page

c) Experiment with different rgb color values

Change the numbers inside the parentheses and preview your web page to see how the text color changes

5) Add an image to your web page

Save Picture As...a) Open Internet Explorer and go to a web page that has a picture you want to use.

b) Right click on the picture and choose Save Picture As…

c) Save the picture to the folder you created in step (1).

d) Add this tag to your HTML file somewhere between the <body> tags:

<img src="filename.jpg">

e) Change "filename.jpg" to the name of the file you saved in step (c).

Notice that the img tag doesn't have a closing tag.

f) Preview your web page

6) Change the size of the image

a) Change the img tag so that it has a width and a height attribute:

<img src="filename.jpg" width="200" height = "300">

Of course, instead of "filename.jpg" you'll have the file name you used in step (5).

The image will stretch to a width of 200 pixels and a height of 300 pixels.

b) Preview your web page

c) Experiment with the width and height attributes to find a size you like. Preview your web page each time you make a change.

7) Add a border to your image

a) Change the img tag so that it has a border attribute:

<img src="filename.jpg" width="200" height="300" border="2">

Of course, instead of "filename.jpg" you'll have the file name you used in step (5) and the size you used in step (6). The number after the border attribute is the width of the image border in pixels. You can try different widths.

b) Preview your final web page

8) Turn in the assignment by copying the entire folder you created in step (1).

REVIEW

You've learned these new tags and attributes:

Item Type Explanation
bgcolor attribute changes the background color of a page
text attribute changes the text color of a page
img tag includes an image on a page
src attribute the file used for an image
width attribute an image's width
height attribute an image's height
border attribute the size of an image's border