Subject | ICT | Grade | 7 |
Trimester | 2 | Assessment Type | Practical Mid-Term Test |
Teacher | | Date given | Week 7 |
Student Name | | Time | 45 min | Marks | /20 |
Instructions: Choose your editor: You may use W3Schools TryIt Editor
1-Open Google and search for: : w3schools try it editor
2- In another tab, open: tnis-ict7.blogspot.com
3- Copy the code provided and paste it into the : W3Schools TryIt Editor:
<html>
<head>
<!-- Title of the web page displayed in the browser tab -->
<title>My Dream Room</title>
<!-- Main heading of the webpage -->
<h1>This is my dream room</h1>
<style>
/* General Styling */
/* Styling for the entire page body */
body {
font-family: Arial, sans-serif; /* Font style */
margin: 0; /* Removes default margin */
padding: 0; /* Removes default padding */
text-align: center; /* Centers text and content */
background-color: #f0f8ff; /* Light blue background color */
}
/* Main container for the room, using a CSS grid layout */
.main-room {
display: grid; /* Enables grid layout */
grid-template-areas: /* Defines grid structure for each section */
"bed bookshelf"
"table-chair window"
"rug rug";
gap: 10px; /* Space between grid items */
padding: 20px; /* Padding around the entire grid */
}
/* Section Styling for each room element */
.bed, .bookshelf, .table-chair, .window, .rug {
padding: 20px; /* Padding inside each section */
border: 2px solid black; /* Black border around each section */
border-radius: 8px; /* Rounded corners for sections */
background-color: lightgray; /* Light gray background */
text-align: center; /* Centers text inside each section */
}
/* Specific styling for each room item */
.bed {
grid-area: bed; /* Places the bed in its grid area */
background-color: lightblue; /* Light blue background for bed */
}
.bookshelf {
grid-area: bookshelf; /* Places the bookshelf in its grid area */
background-color: tan; /* Tan background for bookshelf */
}
.table-chair {
grid-area: table-chair; /* Places the table & chair in its grid area */
background-color: lightgreen; /* Light green background for table & chair */
}
.window {
grid-area: window; /* Places the window in its grid area */
background-color: lightyellow; /* Light yellow background for window */
}
.rug {
grid-area: rug; /* Places the rug in its grid area */
background-color: pink; /* Pink background for rug */
}
/* Image Styling */
/* Ensures images are responsive and look good in the layout */
img {
max-width: 100%; /* Ensures images don't overflow the container */
height: auto; /* Maintains aspect ratio */
margin-top: 10px; /* Adds space between image and text */
border-radius: 5px; /* Rounded corners for images */
}
</style>
</head>
<body>
<div class="main-room">
<!-- Bed Section -->
<div class="bed">
<h2>Bed</h2>
<img src="add the link here" alt="Bed" width="200" height="200"/>
</div>
<!-- Bookshelf Section -->
<div class="bookshelf">
<h2>Bookshelf</h2>
<img src="add the link here" alt="Bookshelf" width="150" height="150" />
</div>
<!-- Table and Chair Section -->
<div class="table-chair">
<h2>Table & Chair</h2>
<img src="add the link here" alt="Table and Chair" width="150" height="150" />
</div>
<!-- Window Section -->
<div class="window">
<h2>Window</h2>
<img src="add the link here" alt="Window" width="150" height="150"/>
</div>
<!-- Rug Section -->
<div class="rug">
<h2>Rug</h2>
<img src="add the link here" alt="Rug" width="150" height="150" />
</div>
</div>
</body>
</html>
Instructions:
Complete the tasks step by step and ensure your page works as expected.
Tasks:
Task 1: Add title:(2 marks)
Replace the title <h1> to the webpage:"This is my Dream room : [Your Full Name]"
Task 2: Modify the Background Color of the Entire Page :(4 marks)
Change the background color of the entire page to another color
Task 3: Change the background color of each individual section: bed, bookshelf, table &chair, and window sections. (4 marks)
Change the background color of the .bed, .bookshelf, .table &chair, and .window sections.
Task 4: Add an Image for the Bed Section (2 marks)
Replace the placeholder "add the link here" in the <img> tag for the Bed section with an actual image of a bed.
Task 5: Add a Picture of a Bookshelf (2 marks)
Add a picture of a bookshelf instead of using the placeholder "add the link here" for the Bookshelf section.
Task 6: Add a Picture of a Table and chair (3 marks)
Replace the placeholder "add the link here" in the <img> tag for the Table and chair section with an actual image of a Table and chair.
Task 7: Add a Picture of a Window (3 marks)
Replace the placeholder "add the link here" in the <img> tag for the Window section with an actual image of a Window.
Comments
Post a Comment