Internet Computing

Internet Computing Spring 2024Hw 1 There are 4 exercises in this homework
Image, Lists, External linking, Tables, and Web Form
Ex 1: Construct a web page as shown below. You can use different images by copying different
images from Internet. These two images shall be placed side by side and have same height on
this web page. The web page shall have body background color (use bgcolor) of green. In your
submission make sure to include these two image files. When click on MSU link, your browser
will display MSU home page. Similar for MIT and Princeton.
Ex 2: Generate the following chart using table bgcolor, colspan, and rowspan attributes. The
table caption is Popularity of CS Topics.
Yourname shall be replaced with your real name and in italic and bold.
Note the background color of a cell can be set as bgcolor= vlaue while the value can be red,
green, cyan, and blue and so on. Note you need to generate the same table layout as shown
above. All strings shall be centered horizontally inside the cell. Make sure to center your whole
table on your web page. The width of the table is 80% of screen width. I.e., 10% space on the left
and 10% on the right of the table.
Ex 3: Nested lists
Create an html document such as the following. Use type = ‘I’ for I, II, III, a for a, b, c etc. Or
you can use CSS style attribute by setting property of list-style-type. It will allow you to specify
list type such as upper-alpha, lower-roman etc.
See https://www.w3schools.com/cssref/pr_list-style-type.asp for more information.
Ex 4: Create a web form as the following. All fields are required.
Requirements:
a. All user input fields shall be aligned.
b. Email must from montclair.edu
c. There are four buildings: CCIS, CELS, Richardson, and Science. CCIS is selected by
default (CCIS will be default selected).
d. Full Name field is automatically focus when load this page
When the page is loaded, it show as below on Google Chrome.
If the E-mail address is not montclair.edu, the Chrome will complaint as below
When user click on Request Date field, on Google Chrome, we shall see a calendar
There are four buildings for the drop down list as shown below
How to submit:
Create an index.html which contains four hyperlinks. For example, if your name is John
Doe then index.html would look like the following
The first hyperlink points to the solution of your exercise 1, the second to your exercise 2
etc. NOTE: use relative path rather absolute path when specify your hyper link. That
says, if I download your program and run on any computer, it shall work. For example, if
I download your program from Canvas to my computer or the MSU computer, I should
be able to run your index.html and all four exercises without any problem. If I cannot run
your program because you did not use relative links, then you will lose points.
It can be easily tested by downloading your Canvas submission and then see if you can
run these documents on a school computer.
Create a folder and call it yourname-hw1 and put ALL these five html documents (four
exercises and one index.html) plus two image files into this folder. Replace yourname
with your real name,
Zip this folder and submit it to Canvas
Important: To prevent your code mix up with others, you must follow the instruction to
submit your lab. Fail to follow the instruction, will cause you 20% of your grade!