Description
You should be able to compose documents directly in HTML and
CSS. This is very helpful as it is often necessary to modify existing
documents. Also, when writing server-side scripts one must generate
HTML.
• In this assignment, you are given an image of a web page. Your
task is to reproduce the page as closely as possible, writing
HTML and CSS directly, that is without using anything more
than a text editor. Snapshots of the web page to be imitated,
for 3 browsers can be found following these links:
Chrome: here.
Safari: here.
Firefox: here.
• Important Note: use of CSS is required
• You will need three (1) images to help you complete the web
page: bbn_logo.png, one_logo.png, checkmark.png. You
should not use any other image. Note: the 2 red buttons are not
built with images.
• Please note that if you view the images of the sample web page
in a browser, some browsers will automatically resize the
image to fit within the browser window.
• The page contains five (5) active links/buttons within the text.
The five links/buttons are labeled “One”, “Apply Now”, “Get
Info”, “Legal & Privacy”, and “Disclosures”.
• On the page you are going to build, the active links should be
made to point to the same page, say page2.html at your
website. The page page2.html should be divided into five parts,
each separated by a horizontal line. Each part will begin with a
paragraph tag that looks like this
This is the start of page2.html which corresponds to the “One”
link.
• You are to construct the five (5) links so that when a person
clicks on a link, (e.g. they click on “One”) the page page2.html
is displayed (on a new “tab” of a new popup window,
depending on user selection) and the section of page2.html that
has the corresponding name as the name of the link, is placed at
the top, (i.e. the page scrolls up).
• To test your hw#3, please view your web page using Firefox.
Resize your browser window to the same size as the PNG
image and then see if you have used the correct font, color and
size, and if the position of text is correct.
• Important Note: sometimes the www-scf.usc.edu web server
automatically places a message at the bottom of every HTML
page. The message begins with “USC does not screen or control
the content . . . “Due to this appended message, the HTML will
get misaligned. To avoid this message, you can add a <noscript
tag immediately in front of the </body tag or click on the
Announcements page to see more suggestions.
• In the Homeworks page, a video link is provided that will show
the expected functionality, especially the behavior to be
implemented in CSS.
3.Submission
You are required to submit your source code electronically to the
csci571 account so that it can be graded and compared to all other
student’s code via the MOSS code comparison tool. To submit your
file electronically, enter the following command from your UNIX
prompt:
$ submit –user csci571 –tag hw3 file1.html file2.html
style.css
You must link this homework to your class homework page so that
the graders can go to your website and grade your homework
