HTML Web Page

HTMLWebPageInstructions.pdf

Home >Computer Science homework help >HTML Web Page

HTML Web Page Lab

Page 1 of 6

This assignment will introduce you to the Hyper Text Mark‐up Language (HTML). With this assignment, you will create a basic Web page with a picture and some text. You will use Windows Notepad to type the HTML tags and content. Notepad does not embed control characters into the text file like word processing applications do. You must use Notepad; do NOT use Microsoft Word. Once you complete the HTML code, you will open the HTML file using a Web browser to view your first Web page.

NOTE: Notepad is available on computers running Windows.

Instructions (25 points maximum)  Completeness, following directions, spelling and grammar are part of your score.

Your score will be based on:

1. Submit the Word document you create in step 7 and 8 below:

YourLastName Lab HTML.docx

Replace YourLastName with your actual last name.

2. Submit the Notepad file with the HTML code you type. The filename should be:

YourLastName MyHTML.htm <‐‐ examine your file name in Windows Explorer or File Explorer

(Windows tools)

3. Submit your picture file: MyPicture.jpg <‐‐ examine your file name in Windows Explorer or File Explorer (Windows tools) Do NOT add your name to this file!!!

QUESTIONS (read these questions before you begin; the instructions below contain the answers)

1. What is hypertext markup language (HTML)?  the answer is different than #2 below

2. What do HTML tags do?  the answer is different than #1 above

3. What type of program interpret the HTML code and displays the Web page on your screen?

4. What is the purpose of an ending tag </ > ?

5. What tags indicate to the browser to place data in the center of the Web page?

6. What tags indicate to the browser to place one item in a bulleted list?  read CAREFULLY!

7. What tag indicates to the browser to begin a new paragraph?

8. Are the HTML tags used in this lab case sensitive (yes or no)?

9. What is Web‐authoring software?

10. Provide one example of Web‐authoring software. Google to find the name of one brand of

Web‐authoring software.

What to Submit When you have finished, save and close all files and submit your three files at the class Web site:

1. YourLastName Lab HTML.docx (there is an example at the end of this document)

2. YourLastName MyHTML.htm <‐‐ examine your file name in Windows Explorer or File Explorer (Windows tools)

3. MyPicture.jpg <‐‐ examine your file name in Windows Explorer or File Explorer (Windows tools). Do NOT add your name to this file!!!

HTML Web Page Lab

Page 2 of 6

1. Use your Web browser to locate an image (picture) on the Web that you wish to place on your Web page. You will be asked later to identify two reasons why you chose the image. Alternatively, you can choose any picture you have saved on your computer.  The picture MUST be a .JPG or .JPEG file a. Test to see if your chosen image/picture is a .JPG  Because the HTML code you will be writing assumes a .JPG file, you should first check to see

if the picture you chose is a JPG file. i. Place your mouse pointer over the image you wish to include on your Web page ii. Right‐click iii. Click the Properties option iv. The file name within the properties window should have a file name extension

indicating that it is a .JPG file If it does not, find another picture that is in a JPG format Also the field Type will display JPEG image

v. Close the Properties window b. Save your picture as: MyPicture.jpg

i. Right‐click on the image or picture. A menu will appear on the screen ii. Click on the Save Picture As …  You must save the picture file in the same location as the HTML code.

2. Use NotePad to type your HTML code. Do NOT use a word processor. Most professionals use Web‐ authoring software to build Web sites as well as the Web pages within the Web site. a. Start NotePad

 Click the Start button | click into the Search programs and files search box | type Notepad  Click NotePad

b. Type the HTML code on the next page  The comments about the code (in Italics) should NOT be typed.  The text between < > is NOT case sensitive (see HTML on the next page). The text can be

UPPER case or lower case.  You do not have to use the same spacing between lines as shown. The extra spacing is only

for easier readability.

 HTML uses “tags” to indicate to the browser how to display information on a Web page. These tags explain WHERE data is displayed, the SIZE of the data, the COLOR of the text and screen background, and many other data properties.

 Most tags have a beginning, indicated by left and right angle brackets < >, and an end, indicated by a forward slash within the brackets </ >. The beginning tag indicates to the browser to begin a specific style or data property; the ending tag indicates to end a style or data property.

c. HTML Code  Your Web page is going to display a centered title, a picture, and a bulleted list that explains

two reasons why you chose the picture displayed on your Web page. Name what is in the picture. Avoid pronouns – do not say “He is my …”, “She is my favorite…”, “It is …”.

 Remember, do NOT type the comments shown in Italics.  Do NOT cut/copy and paste the HTML code to NotePad, as doing so typically prevents the

picture from displaying on the Web page.

 The HTML statements must be typed correctly for the Web page to be displayed.  HTML code is on the next page.

HTML Web Page Lab

Page 3 of 6

<HTML>

<head> <TITLE>My First Web Page</TITLE> This is the title at the top of the Web page window.

</head>

<body> This is the beginning of the main body of your Web page

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

This is the text that will appear on your Web page. NOTE: Replace Your Name with your first and last name.

This is the picture you saved

Two reasons I chose this picture The P indicates a new paragraph

<UL> The UL tag indicates a bulleted list

<LI> list one reason why you chose the picture here </LI>

The LI tag indicates one item in the bulleted list NOTE: Replace the text between the tags with your reason. <LI> list another reason why you chose the picture here </LI> </UL>

</body> This tag closes the body of the Web page

</HTML> This tag indicates the end of the HTML file.

HTML Web Page Lab

Page 4 of 6

3. Save your HTML file.  be sure to read and do the next two instructions 

a. The Save as type: text box MUST be changed to All files b. In the File name: text box type YourLastName MyHTML.htm  You must save this file to the same location where 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 Web browser c. Any words listed between <TITLE> and </TITLE> will appear at the top of your browser screen and

indicate the title of the Web page d. The information between <BODY> and </BODY> is displayed in the browser window e. To center information on the screen you place the data between <CENTER> and </CENTER> f. The and tags indicate the beginning and end of a paragraph g. and indicates bold type h. The <IMG SRC=”an image file name”> identifies the file name of the picture you want to display

on your Web page. The picture must be saved in the same storage area as your HTML file. i. <UL> and </UL> indicates the start and end of a bulleted list j. <LI> and </LI> indicates the start and end of a single bulleted item within a bulleted list

5. Next, view the HTML file named YourLastName MyHTML.htm by double‐clicking the file icon.  Your computer’s default browser will open the file and display it in Web page format

6. Troubleshooting a. To edit your HTML source code you must open Notepad first. Click File then click Open. You must

set the document type to All files (*.*) instead of Text Documents (*.txt). This is in the lower right‐hand corner of the Open dialog box

 If you need to edit the HTML source code a 2nd time (after you did 6.a), right‐click the file YourLastName MyHTML.htm Then select Open with and click Notepad. If this does not work, repeat the instructions in 6.a

b. If your Web page displays a box with a red X instead of your picture or a small rectangular placeholder icon, it could be due to one of the following: i. The JPG image MUST be in the same location where you saved the HTML file. ii. The picture file name may not match what you typed in the HTML source code file. The

HTML code must match exactly the name you gave the picture file. iii. Check the syntax of the IMG SRC line of HTML code. Ensure you did not type the commands

with reversed letters (e.g. SCR instead of SRC) or there is some other typo. iv. Ensure all of the pairs of tags are correct. v. If you cut/copied and pasted the HTML code, this could also cause problems. You must type

the HTML into Notepad. vi. You may not have selected a JPG image. Renaming a different type of image file does not

work. vii. Check the file names for both the HTML file and the Picture file in Windows Explorer or File

Explorer (Windows tools). The HTML file MUST end in a single .htm (MyPicure.htm) and the Picture file must end in a single .jpg. (MyPicture.jpg).

HTML Web Page Lab

Page 5 of 6

c. If your picture is too large (high resolution picture) – it is so large that you cannot see your entire web page on one monitor screen – you may do either A or B as follows: A. Provide multiple screen prints to so all of your web page is visible in the Word documents.

i. Screen print the top of the web page ii. Scroll down and screen print the bottom of the web page. NOTE: You may need to repeat

this again for super high resolution pictures. iii. Paste all screen prints into the Word document

B. Adjust the resolution of the picture (reduce the size) (these instructions are for Windows 7) i. Open Paint (click Start | in the Search box, type Paint | click Paint under programs at the

top of the menu. ii. Click the File tab (blue tab). iii. Click Open and then navigate to where you stored your JPG picture. iv. Click the Home tab. v. In the Image group, click Resize. vi. Select the 100 in the Horizontal size box then type 50.

Ensure the Vertical also changed to 50. vii. Press Enter or click OK viii. Save the picture. C. You can also try to shrink the size of the displayed Web page using Ctrl+‐ (minus)). Some

browsers do not accept this command but they offer a menu command. You will need to do research if the Ctrl‐ (minus does not work).

7. Screen print your Web page (displayed correct) in the browser window and paste it into a Word

document a. Open Word b. Type your first and last name at the top of the page and press Enter c. Save the Word document as YourLastName Lab HTML.docx d. Switch to the browser window with your Web page displayed correctly. Press ALT+PrtScn

(alternate button + print screen) to capture the open browser image. e. Switch back to the Word document. Ensure your cursor is a line or two below your name. Paste

the screen shot into the Word document. f. Press Enter two times and type: Answers g. Press Enter one time h. Type the answer to the following questions. Do NOT type the question – only the answer.

8. Type the ANSWERS to the 10 questions at the beginning of this document.  Do not write the question. Simply write the question number followed by your answer.

HTML Web Page Lab

Page 6 of 6

RUBRIC

A. Word document named YourLastName Lab HTML with your Name at the top (1) (potential deductions) a. Screen print of finished working web page (10)

Correct text, centered where appropriate, bullets as requested and picture displays correctly b. Answers to the ten (10) questions (1 point each)

B. HTML document named YourLastName MyHTML.htm (1) C. Picture document named MyPicture.jpg (1)  Do NOT add your name to this file) D. Quality: Spelling, grammar, completeness (potential deductions)