Instructions: For HW3, you are to demonstrate the use of HTML and the Cascading
ID: 3875379 • Letter: I
Question
Instructions: For HW3, you are to demonstrate the use of HTML and the Cascading Style Sheets (CSS) Create two to three web pages. For example, a home page, a contact page, and a service/product page for a fictional small companylorganization. You need to write your own codes; do not copy/paste codes from any websites. Note: Hw3 focuses on static web pages Minimum Requirements: Be sure to make good use of formatting tags, links, images, and sematic elements for layout. Overall, each page should have the same general layout, color scheme, etc.; use a CSS file to do this Layout should include a banner area across the top with the companylorganization's name and logo, a body area in the center, and a footer area at the bottom. You can also add a left or right column The footer should include links to the home page and other pages you have developed The home page should have a body that includes a description of the company/organization and at least one Please resize your images so that they are 512x384 or less. One of the pages should use an element to link into a particular spot within the page For other a> elements, please use both relative url and absolute url in your pages, and please use nav> to group the ca> elements One of the pages should include an ordered and an unordered list One of the pages should include a table with at least two rows and two columns CSS should be used to format background, border, font, heading, , , padding, and One page should use CSS rules inside the tag as part of the chead> elements One CSS file should be used to format multiple pages Use both class and id attributes and apply specific styles to those classes and idsExplanation / Answer
home.html
<html>
<head>
<img src="logo.png" alt="Background" width="384" height="512">
<h1> ORGANIZATION NAME </h1>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div align="center">
<font size="5">
<nav>
<a href="contact.html">Contact</a>
<a href="service.html">Service</a>
</nav>
</font>
</br>
<div class="container">
<img src="background.png" alt="Background" width="1000" height="400">
<div class="centered"><font size="6">PUT CONTENTS OF BODY HERE</font>
Click here to visit this website: <a href="www.companyname.com">Company name</a>
</div>
</div>
</div>
</body>
<footer>
<p>Posted by: xyz</p>
<p>Contact information: someone@xyx.com</p>
</footer>
</html>
contact.html
<html>
<h2 id="C">Contact</h2>
<body>
<div class="container">
<div class="centered" ><font size="10"><strong>Contact </strong></font> </div>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
</tr>
<tr>
<td>ABC</td>
<td>XYZ</td>
<td>123456</td>
</tr>
<tr>
<td>DEF</td>
<td>MNO</td>
<td>12345</td>
</tr>
</table>
<a href="#C">Go back up</a>
</body>
<footer>
<p>
<a href="home.html"> Home page</a>
<p>Posted by: xyz</p>
<p>Contact information: someone@xyz.com</p>
</footer>
</html>
services.html
<html>
<body>
<div class="container">
<div class="centered" ><font size="10"><strong>Products and services </strong></font> </div>
<ul>
<li>P1</li>
<li>P2</li>
<li>P3</li>
</ul>
SERVICES:
<ol>
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ol>
</body>
<footer>
<p>
<a href="home.html"> Home page</a>
<p>Posted by: xyz</p>
<p>Contact information: someone@xyz.com</p>
</footer>
</html>