Scribd
Upload
5 views

File

Uploaded by

Salma Shaheen
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

File

Uploaded by

Salma Shaheen
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Please refer to the wireframe below to understand how your website should look like.

Instructions provided for you to use HTML and CSS to create a web page with a 2-column
layout and the following specifications:

1. Organize your CSS and images in different folders. (Hint: Always use small letters for
folder/file names and avoid special characters including spaces. This will help you link your
CSS and images quickly). Create a web page called index.html and add your name and
email in HTML comments at the top of the page. (1 mark)
2. Link the main style sheet as well as a normalize style sheet to the home page (You can
download normalized one or have your own version). (0.5 mark)
3. Format the body of the page so it’s 900px width, has a border of your choice, and is
centered in the browser window. (1 mark)
4. In the header, float the logo image to the left and make sure there is white gap between the
logo and the title + tagline. In addition, change to a color of your choice, add a font family
and add a shadow to the Site Title. For the tagline add a style bold or italic. Browser default
colours of the title will not be awarded marks. (2 marks)
5. Adjust the font sizes for all the headings so they are as shown in the design. Make sure the
different types of headings are in different colours of your choice. Browser default colour of
the headings/text will not be awarded marks. (2 mark)
6. Format the links in the sidebar so they’re displayed in boldfaced colour of your choice
whether they’ve been visited. If a link has the focus or the mouse hovering over it, display it
in a different colour. Browser default colours of the links will not be awarded marks. (2
marks)
7. Format the links in the right section so they’re displayed in a colour of your choice whether
they’ve been visited. If a link has the focus or the mouse hovering over it, display it in a
different colour. Browser default colours of the links will not be awarded marks. (2 marks)
8. Add a full width image as shown in the wireframe (You can use your own downloaded
image). (0.5 mark)
9. Format the list to increase the space between the list items, increase the line height to 1.5.
(1 mark)
10. Reduce the font size for the footer and center it. Browser default font size of the text in
footer will not be awarded marks. (0.5 mark)
11. Add a border of your choice below the header, add a background to the footer, and change
the colour of the footer text to a contrasting color. (2 marks)
12. Float the sidebar so that it is displayed to the left of side as shown in the wireframe. (Hint:
The width of the sidebar should be approximately one third of the body). Be sure to clear
the next appropriate section so it’s not broken. (2 marks)
13. Adjust the margins and padding for the elements on the page so it looks as shown in the
design. (Note: because the unordered list is given some left padding by default, you don’t
need to apply any additional margin or padding to it.) (1 mark)
14. Add references to your images and quote in an ordered list. (0.5 mark)
Website is visually appealing, nothing broken (i.e., broken image or CSS links), and no
unexpected behavior. Website structure looks similar to wireframe provided. (2 marks)

Here's how to create your webpage index.html with a 2-column layout using
HTML and CSS, as per your specifications. I’ll guide you through the setup for
organizing the files, HTML structure, and the CSS styling required.

Folder Structure

/project-folder

/css

normalize.css

style.css

/images

logo.png

banner.jpg

index.html

Step 1: HTML (index.html)

First, create the HTML file index.html. Make sure to include your name and
email in the comments.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>Your Website Title</title>

<!-- Normalize CSS -->


<link rel="stylesheet" href="css/normalize.css">

<!-- Main Style CSS -->

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<!--

Name: [Your Name]

Email: [Your Email]

-->

<!-- Wrapper for the content -->

<div class="container">

<!-- Header Section -->

<header>

<img src="images/logo.png" alt="Logo" class="logo">

<div class="header-text">

<h1 class="site-title">Your Website Title</h1>

<p class="tagline">Your Site Tagline Here</p>

</div>

</header>

<!-- Main Content Area -->

<div class="content-wrapper">

<!-- Sidebar -->

<aside class="sidebar">

<ul>
<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

<li><a href="#">Link 3</a></li>

<li><a href="#">Link 4</a></li>

</ul>

</aside>

<!-- Main Content -->

<section class="main-content">

<img src="images/banner.jpg" alt="Banner Image" class="full-


width-image">

<h2>Main Heading</h2>

<p>Welcome to the main content area of your website. Here is


some sample text.</p>

<h3>Subheading 1</h3>

<p>More content under a subheading.</p>

<h3>Subheading 2</h3>

<p>Additional information under a second subheading.</p>

<ol>

<li><a href="#">Image 1 Reference</a></li>

<li><a href="#">Image 2 Reference</a></li>

<li><a href="#">Quote Reference</a></li>

</ol>

</section>

</div>
<!-- Footer Section -->

<footer>

<p>&copy; 2024 Your Website. All rights reserved.</p>

</footer>

</div>

</body>

</html>

Step 2: CSS (style.css)

Now, create the CSS file style.css inside the css folder.

/* General Styles */

body {

width: 900px;

margin: 0 auto;

border: 2px solid #000; /* Choose a border color and style */

font-family: Arial, sans-serif;

/* Header Styles */

header {

border-bottom: 2px solid #ddd; /* Add border below header */

padding: 20px 0;

display: flex;

align-items: center;

.logo {
float: left;

margin-right: 20px;

.header-text {

float: left;

.site-title {

color: #1e90ff; /* Change the color */

font-size: 2.5rem;

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

.tagline {

font-style: italic; /* Make the tagline italic */

color: #555; /* Change the color */

/* Layout */

.content-wrapper {

display: flex;

clear: both;

padding: 20px 0;

/* Sidebar */
.sidebar {

width: 30%;

padding: 10px;

margin-right: 20px;

.sidebar ul {

list-style: none;

padding: 0;

.sidebar ul li {

margin-bottom: 15px;

.sidebar ul li a {

color: #1e90ff;

font-weight: bold;

text-decoration: none;

.sidebar ul li a:hover {

color: #ff4500; /* Change color on hover */

/* Main Content */

.main-content {
width: 65%;

.full-width-image {

width: 100%;

height: auto;

margin-bottom: 20px;

.main-content h2, h3 {

color: #333; /* Set heading colors */

.main-content p {

line-height: 1.5;

.main-content ol {

margin-top: 20px;

/* Footer */

footer {

text-align: center;

background-color: #1e90ff; /* Set background color */

color: white; /* Set text color */

padding: 10px 0;
font-size: 0.9rem;

Step 3: Normalize CSS

Download a normalize.css file and place it in the css folder to ensure


consistency across browsers.

You can find normalize.css here: https://necolas.github.io/normalize.css/

Explanation

 Folder Structure: The folders for CSS and Images are separate. Avoid
special characters in file names for easy linking.
 Header: The logo floats to the left, and the title and tagline are floated
next to it. The title has a shadow, and the tagline is italic.
 Body: The body is set to 900px wide and centered with a border.
 Sidebar: The sidebar is styled with bold links and a hover effect.
 Main Content: The content area is next to the sidebar, and an image
spans the full width of this section.
 Footer: The footer has reduced font size and is centered, with a
background and contrasting text color.
 Font Sizes and Colors: Headings, links, and other elements are
customized with non-default colors and sizes.

With this setup, your web page should resemble the wireframe you
described, and adhere to the specifications provided.

You might also like