lab #10

fadoo

cs1150_lab10_fall2018.pdf

Home >Computer Science homework help >lab #10

CS1150 Introduction to Computer Science

Lab #10 – HTML, 30 points

Objective:

To study basic HTML concepts and using them to create simple webpages.

Instructions:

Make sure to do the Activity as outlined in the LabCH21.pdf and LabCH22.pdf file. The activity

is actually a tutorial that will help you to solve the problems in the exercises. It is expected that

you will complete the Activity before you begin the exercises. Create a zipped folder which will

contain all your HTML files and name it as “firstname_lastname_html_lab.zip”. Then, submit

the zipped folder to Pilot.

Required Software: A text editor, a browser, and either SSH Secure Shell or WinSCP.

The zip file should contain:

index.html (15 points)

__ (4 points): an unordered list

__ (4 points): a jpeg link

__ (4 points): a working link to links.htm

links.htm (15 points)

__ (3 points): at least three working links to your favorite sites on the World Wide Web

__ (3 points): a link to index.html

__ (3 points): a heading for your page

__ (3 points): a title for your page

__ (3 points): a paragraph of text.

__ (3 points): JavaScript code

Instructions:

For this lab, you’ll be creating a simple autobiographical web page.

1. (3 points)Create a new webpage of your own choice and name it as yourname_extracredit1.html.

2. Create a CSS file and apply it to your web page. Include the following CSS properties:

 background-color

 font

 font-size

 font-family

 position

 heading

 a href

 inline

You can use more properties in addition to the properties listed above.

3. Create a simple bio of yourself in the form of a web page, named index.html. Include the following

information

● Where you are from

● What your major is

● What your plans are after graduation

● What you hope to be doing 10 years from now

Also include a brief discussion of your hobbies and interests outside of school. Be creative: If you’re an avid

hiker or biker, a vegetarian, a world traveler, an expert knitter, a bassoonist, an excellent cook, or a national

champion hog caller, tell your story (or stories...). And hey, if there are any oddities about yourself (“My eyes

are two different colors” or “You should see my barbed wire collection” or “I was raised by the Borg”), mention

them on your page! [So basically a Facebook profile that the whole class will be able to see. Don’t put your

Social Security Number or address. Use paragraph tags to properly indent the content.]

4. (4 points) Include at least one unordered list on your page. Some possible topics include:

● Your favorite musical groups

● Your favorite foods

● Your most despised foods

● Your favorite books

● Your favorite TV shows

● Your favorite movies

5. Test your file! Open it up in a browser.

6. Make a new directory (folder) on your computer, and name it yourLastName_yourFirstName_html_lab

[Of course, substitute your name for yourLastName_yourFirstName. Example: If your name were

Apichatpong Weerasethakul, you would name the folder Weerasethakul_Apichatpong_html_lab] When

you submit your lab, this is the folder you will zip up and submit.

7. Put index.html (or a copy of it) inside. From this point on, we will refer to index.html as the home page.

8. Put a jpeg image in the folder. You can use your own image, or just use WrightStateRaiders.jpg from the

Pilot Dropbox.

9. (4 points) Edit your home page with your text editor: After the <BODY> tag near the top of your

HTML document, add a line of code that will make the JPEG image appear on your web page.

10. Test it out! As long as the image and the home page are in the same folder, you should see the image

appear in your page when you view the page with your browser.

11. Create a new file named links.htm, and save it in the same lab directory you made earlier.

12. Add the appropriate structural tags to set up your new links page, starting with <HTML>. (Refer to your

home page, or to the Activity section of Lab 21, if you need a reminder of what the structural tags look

like.)

13. Once you’ve got the appropriate structural tags in place, add a heading that says: YourName’s Favorite

Links. [Replace YourName with your name. So if your name was Gaius Octavius, you’d write “Gaius’s

Links”]

14. (3 points) Using the following screenshot and code [Colin: I copied them from the Lab 22 PDF file]

demonstrating the use of the <A> tag as a model, create your own simple links page showing a few sites

you enjoy. Include at least three links.

<HTML>

<HEAD>

<TITLE>Links Page</TITLE>

</HEAD>

<BODY>

<H2>Kelly's Links</H2>

<H4>Music Links</H4>

<UL>

<LI>

The Charles Mingus Homepage</A> gives the full lowdown on Mingus and

his sidemen, including an excellent annotated discography by Marcel-

Franck Simon.

Jazztenor.com</A> features saxophone practice tips, articles, interviews,

reviews, transcriptions of solos by John Coltrane, Sonny Rollins, Dexter

Gordon, and more!

</UL>

<UL>

<LI>One of the best spots for the latest news of the world is

<A HREF="http://www.theonion.com">The Onion</A>. Sometimes the

stories seem kind of hard to believe, but since they appear on

the web, they must be true...

</UL>

</BODY>

</HTML>

15. Test your new links page in the browser to make sure that it works. If you try clicking on a link in the

browser and get an error message, check to make sure you have no typos in your code. (By the way,

sometimes you’ll get an error message when trying to visit another site because the server for that site is

down. It doesn’t happen often, but it is a possibility. If you’re sure that there are no errors in your code

and that you’re online, and you’re still getting an error message when you click on a link, it’s possible

that’s the source of the problem.)

16. (3 points) On your home page, add a new paragraph that says “Check out some of my favorite links” on

a line just above the </BODY> tag toward the bottom of your document. Make the last three words of

that sentence (“my favorite links”) into a link that, when clicked on, will take you to your links page.

17. Make sure it works. Save your work, view it in your browser, try to click the link and see if it takes you

to links.html

18. (2 points) Add a button to links.html, that, when clicked on, will take you to your home page.

19. (2 points) Add the following to links.html: Using JavaScript, add:

● A prompt box/message window that prompts for the user’s name.

● An alert message window that outputs “Welcome to my links page, user_name” [user_name

should be replaced by the name that was entered. If the user enters “Thaksin Shinawatra”, then

the alert message should say “Welcome to my links page, Thaksin Shinawatra”

20. (required to receive any credit) Upload your pages to the WSU web server. Upload the file to the remote directory and see if it works there. [If you need a guide on how to do this, look at

“EasyGuideToUploadingWebPages.doc”. Basically, copy all your files from the lab folder to the

“www” folder. Remember that anyone in the world with an internet connection will be able to read it

when you succeed. Have fun but be cautious.]

REMEMBER: YOU MUST UPLOAD YOUR FILES TO THE WEB SERVER AND to

PILOT

Extra Credit 1 (5 points)

1. Create a webpage named as yourname_extracredit.html.

2. Create 3 buttons on the webpage and name them Red, Green and Blue respectively.

3. Whenever the user clicks on any of the button, background color should be changed with the respective

color. (eg. If the user clicks on Blue button then the background of your webpage should change to blue)

4. Create 3 more buttons on the webpage. Basic functionality of these buttons it to display a picture

whenever user clicks them. So, each button is associated with a picture and when the button is clicked its

respective picture is displayed on the webpage. [Three buttons will have three pictures associated with

them and only one picture will be displayed when a button is clicked at any given time]

REMEMBER: YOU MUST UPLOAD YOUR FILES TO THE WEB SERVER AND to PILOT
Extra Credit 1 (5 points)