Objectives
Become familiar with HTML and CSS technologies
Learn how to imitate a web page
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. Screen shots of the web page to be imitated, to be scrolled vertically, can be found following these links:
Screen Shot 1
Screen Shot 2
Screen Shot 3
Important Note: use of CSS is required
You will need eight (9) images to help you complete the web page: lawyer.jpg, notebook.jpg, glasses.png, facebook.png, googleplus.png, instagram.png, twitter.png, youtube.png, grid.png.
You should not use any other image.
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 eight (8) active links within the text. Three
of the links are labeled “About”, “Projects”, “Services”.
Five (5) of the links are labeled with images for “Facebook”, “Google+”, “Instagram”, “twitter”, and YouTube.
On the page you are going to build, the three (3) active text links should be made to point to the same page, say page2.html at your website. The page page2.html should be divided into three parts. Each part will begin with a paragraph tag that looks like this
<p id=”home”
This is the start of page2.html which corresponds to the “About” link.
You are to construct the three (3) links so that when a person clicks on a link, (e.g. they click on “About”) the page page2.html is displayed (on a new “tab” or 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).
The five (5) image links point to www.facebook.com, www.plus.google.com, www.instagram.com, www.twitter.com, and www.youtube.com.
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.
In the Homeworks page, a video link is provided that will show the expected functionality, especially the behavior to be implemented in CSS.
Submission
You are required to submit your source code electronically to GitHub Classroom 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, see the documentation of GitHub Classroom.
You must link this homework to your class homework page so that the graders can go to your website and grade your homework.
