it404 assignment3
The figure 1 shows a sprite image that contains 7 different images.
Use CSS sprite techniques and write an HTML file to display the sprites of image as shown in figure 2.
Hint: You can left click on figure 1. image and save it as separated image file in order to use it through your HTML script.
Figure 1. 700×100 sprite image
Figure 2 sprite image output
|
2 Marks |
|
Learning Outcome(s): Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage. |
Question Two
Write the CSS rules of formatting text that creates the following web page with specifications mentioned on the panel. The HTML body is already given to you.
<!DOCTYPE html>
<html>
<head>
<title> Blended Learning </title>
</head>
<body>
<h1> About Blended Learning </h1>
<ul>
<li>
<h2> Blended Learning “Learning Future” </h2>
<p> Education technology …..</p>
</li>
<li>
<h2> Blended Learning Model at Saudi Electronic University: </h2>
<p> The blended ….. through (Blackboard).</p>
</li>
<li>
<h2> Benefits of blended learning </h2>
<ol>
<li> Benefit1 </li>
<li id=“flag”> Benefit2 </li>
<li> Benefit3 </li>
</ol>
</li>
</ul>
</body>
/html>
|
0.5 Marks |
|
Learning Outcome(s): Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage. |
Question Three
Write the CSS rules that produce the page in the following figure. The layout is fixed with width 500px and centered.
The HTML body is already given to you
HTML document
<!DOCTYPE html>
<html>
<head>
<title>IT404</title>
</head>
<body>
<div id=”wrapper”>
<div id=”header”><h1>IT404 Final Exam</div>
<div id=”main”>Today is Monday 23/12/2019.<br> Final exam day.</div>
<div id=”extras”> Quiz #1<br>Quiz #2</div>
<div id=”footer”>Saudi Electronic University 2018</div>
</div>
</body>
</html>
