Scribd
Upload
4 views

CISB11 HTML Assignment

This assignment teaches students how to create a basic HTML web page using Windows Notepad. Students will learn to save a JPG image from the internet, write HTML code to display the image and text, and save the file correctly. Finally, they will zip the HTML file and image into a single ZIP file for submission.

Uploaded by

Haocheng Zhang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

CISB11 HTML Assignment

This assignment teaches students how to create a basic HTML web page using Windows Notepad. Students will learn to save a JPG image from the internet, write HTML code to display the image and text, and save the file correctly. Finally, they will zip the HTML file and image into a single ZIP file for submission.

Uploaded by

Haocheng Zhang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Mt.

San Antonio College


CISB11
HTML Web Page Design Assignment
Purpose:
This assignment will introduce you to Hyper Text Mark-up Language (HTML).

With this assignment you will use Windows Notepad to write an HTML file. You will then open
the HTML file using the Internet Explorer (IE) browser.

Assignment:

1. Use Internet Explorer to locate an image on the Internet that you wish to place on your
home page.
a. Place your mouse pointer over the image you wish to include in your home page and
press the Right mouse button. Because the HTML code you will be writing assumes a
JPG image, we will first check if the image you chose is a JPG image. Click on the
Properties option. The file name within the properties window should have a file name
extension indicating that it is a JPG image. If it does not, find another image that is in a
JPG format.
b. Cancel the Properties window and right click on the image. A menu will appear on the
screen. Click on the Save Picture As option
c. The Save in dialog window is now open. In the Save in box at the top of the dialog
window click on the down arrow to navigate to the folder or drive you want to store the
image (flash drive, desktop, My documents, etc…)

d. You will also want to change the name of the image you are about to save. The name of
the image will be myimage [all one word]. To change the name of the image move to
the File Name box and highlight the current file name. As you begin typing the new file
name the previous name will be deleted.
e. If necessary, change the “Save As Type” textbox to JPEG format.
f. Finally click on the Save button. The image is now ready to be used for your home page.

2. Use NotePad to type your home page. NotePad can be found by going to Start/All
Programs/Accessories/NotePad
a. Below is the HTML code you will type to create your Web page. The words in Arial
font is the program code that you need to type. The comments about the program (in
Bold letters) should not be typed.

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE> This is the blue title at the top of
the Home Page Window.
</HEAD>

892924198.docx Page 1
<BODY> This is the beginning of the main body of your home page window.

<CENTER><P><IMG SRC=”myimage.jpg”></P></CENTER>

This is the image you saved to storage.

<CENTER><P><B>This is Your Name’s First Web Page!</B></P></CENTER>

This is the text that will appear on your web page.

</BODY> This command closes the body of the home page window

</HTML> This command ends the HTML program.

3. Save your HTML file.


a. The name of the file will be mywebpage.html
b. The “Files of Type” text box should be changed to “All files”.
c. You must save this file to the same folder or drive you saved the JPG image.

4. What the different parts of the HTML code mean


a. All HTML files Start with <HTML> and end with </HTML>
b. Everything between <HEAD> and </HEAD> is read first by the Internet Browser.
c. Any words listed between <TITLE> and </TITLE> will appear at the top of your
Internet Browser.
d. What is displayed in the browser window is the information keyed in between
<BODY> and </BODY>. This is what the viewer will look at.
e. To center information on the screen you place the data between <CENTER> and
</CENTER>.
f. The <P> and </P> is what you place around your sentences or paragraphs.
g. <B> and </B> will surround data that you want bolded.
h. The <IMG SRC=”an image file name”> identifies the name of the image you want on
your screen. The image must be on the same disk as your WordPad file.

5. You can view the HTML file named mywebpage by double-clicking on the file icon. Your
computer’s default browser (most likely IE) will open the file and display it in Web page
format.

6. If your Web page displays a box with a red X instead of your image, make sure that the file
name within the HTML code exactly matches the name you gave the image. If it does, then
try going back to the Internet and selecting a different image—making sure that the new
image you found is in the JPG format.

7. ZIP the HTML file and the image into a single ZIP file.

892924198.docx Page 2

You might also like