Reference no: EM131708566

Assignment: HTML Web Page Lab

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.

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>
<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><P><B>This is Your Name's First Web Page!</B></P></CENTER>
                                 ↓
This is the text that will appear on your Web page.
NOTE: Replace Your Name with your first and last name.

<CENTER><P><IMG SRC="MyPicture.jpg"></P></CENTER>
                                             ↓
                      This is the picture you saved

<P>Two reasons I chose this picture</P> ←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.

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 <P> and </P> tags indicate the beginning and end of a paragraph

g. <B> and </B> 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).

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.