Bergen internet computing questions
Internet Computing Spring 2024 Homework 2 There are 5 exercises in this homework Q1: Create an HTML document like the following. Set the width and height of these two images to both 200 px. When you hover the image on the left, it will expand to 300 x 300. When you hover the image on the right, it will shrink to 100 x 100. All the hyperlinks are not underlined. When you hover on the hyperlink, it will become underlined. The following shows when we move our mouse pointer on MSU link. Q2: Create an html which contains a table as the following When you hover on one of the table cell, it will highlight the entire row with background color of cyan and increase the font-size of all cells on that row to make the font-size larger than other rows . At the same time, it will change the color of the cell to red. The following is a screenshot when use move the mouse on top of cell ‘Apple’. Q3: In addition to hover pseudo-class, there are pseudo classes like focus, link and visited. For pseudo classes and elements refer to http://www.w3schools.com/css/css_pseudo_classes.asp In this exercise we will work on focus pseudo class. The syntax for writing pseudo class focus is the same as writing hover pseudo class. Once again we use : (colon) rather than . (period). For example to write focus rules for input tag we write input:focus { rules…..}, just like input:hover { rules…..} for hover. Write CSS rules to generate a form such as the one below. When the following text boxes are focused, their background color will change to yellow; when they are hovered, their background color will change to cyan. The figure shows below indicates last name text field was hovered. The background color changed to cyan, background set to red (not show here because we don’t have anything in the box yet), and box size enlarged as well. The following screen shot displayed as when last name field was focused (clicked by user). The background color changed to yellow and the foreground color is blue note the text box is still enlarged. After typing Smith on last name field. Note the foreground color is blue. Now moved to next field, first name field, the last name field go back to normal and first name field now enlarged. Once again the background changed to yellow to highlight the selection. After entered all the information. It looks like the following (everything is nirmal) When hovered now on any field, its background color is cyan and foreground color is red as we defined in our CSS rule. Q4: Use the @media we learned to set the following page’s a printer friendly version. The printer friendly version enables the printer to NOT print these images and will change the background color to white and foreground color black. The original body background-color was grey as shown below. Printer friendly version looks like picture shows below. The background color is now white and foreground is black. NOTE there is no red line border as shown below. The highlight of the border is to help you see what the printer supposed to print. Q5: Write an HTML to generate a green circle on your screen 200px from top and 200px from left. This circle has shadow on its southwest as below When you hover on the circle, the shadow will move from its southwest direction, in 4 seconds, to its southeast as shown below. Note the color of the shadow is now lightgreen. It is okay if you don’t want to change the color of the shadow. In that case, after 4 seconds of the hovering of the circle, it will look like the following: Extra credit (10 points) Write an HTML to generate a green circle (ball) on your screen 200px from top and 200px from left. Move the ball from center to left and back to center, then to its right then come back to center again. When the ball moves, its shadow also moves along. The following show when the ball start to move and its shadow is right under it. The ball is now in the left. Note the shadow reflect its position Now the ball is on the right side. You can set the animation duration around 10 seconds for each iteration. How to submit: Create an index.html which contains five (5) hyperlinks. The first hyperlink points to the solution of your Q1, the second to your Q2 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 and cannot run because you did not use relative links, then you will lose points. Create a folder and call it yourname-hw2 and put ALL these six (6) html documents (five exercises and one index.html) along with all images into this folder. 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! Sample index.html. Replace Jane Doe with your real name.
Collepals.com Plagiarism Free Papers
Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.
Why Hire Collepals.com writers to do your paper?
Quality- We are experienced and have access to ample research materials.
We write plagiarism Free Content
Confidential- We never share or sell your personal information to third parties.
Support-Chat with us today! We are always waiting to answer all your questions.