1.Objectives
• Become familiar with HTML and CSS technologies
• Learn how to imitate a web page
2.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. The web page to be imitated can be found here.
• Important Note: use of CSS is required
• You will need two png images to help you complete the web page: bar.png, and header.png.
• Please note that if you view the PNG image of the sample web page in a browser, some browsers will automatically resize the image to fit within the browser window.
• The page contains text at the top all in the same font. Then there are five active links labeled “Info”, “About”, “Portfolio”, “services” and “Contacts”.
• On the page you are going to build, the five active links should be made to point to the same page, say X.html at your website. The web page X.html should be divided into five parts, each separated by a horizontal line. Each part will begin with a header tag that looks like this
<h1 id=”Info”>
This is the start of X.html which corresponds to the “Info” link.
• You are to construct the five links so that when a person clicks on a link, (e.g. they click on “Info”) the page X.html is displayed and the section of X.html that has the corresponding name as the name of the link, is placed at the top, (i.e. the page scrolls up). Note that some browsers will not behave as such.
• 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: The web server automatically places an icon Powered by FreeWHA the bottom right of every HTML page. To avoid this icon you can add a <noscript> tag immediately in front of the </body> tag or click on the Announcements page to see more suggestions.
