Deliverable: Three (3) Web pages and two 12) Cascading Style Sheets (c3s) Comple
ID: 3594268 • Letter: D
Question
Deliverable: Three (3) Web pages and two 12) Cascading Style Sheets (c3s) Completa tha weekly lab basad on tha following: Wite the code for each lab assignment. The code is to be subrnitted in a single compressed Iclder (zip file) to the online course shell. The file must contain all htrm files, along with any other files that may be necessary for your project to run (ex: lext fles, images, elc.) . When saing the file, t should be saved as Lab # Last name First nitial ht For example f your name is Mary Smith the file for Lab 1 should be saved as Lab 1 Smith M htm Any and all written answers must be entered into the online course shell with the submission of the attached lab assignment. Follow the drections below to complete Lab Assignment 4 1. Re-create the sample Web pages listed below with nested ordered lists and nested unordered lists. This Web page will be reused for each part below). (As shown in Figure 1.) 2. Create the Web page from number 1 with siver background color set by a Cascading Style Sheet (ess). (As shown in Figure 2) 3. Create the Web page from number 1 with siver background color and Cornic Sans MS font set by a Cascading Style Sheet (css). (As shown in Figure 3) 4. Re-create the Web page sat from number 1 with Silver background color and Comic Sans MS font set by a Cascading Style Shaet (css). Then, using in-page tags to ovarride the CSS, set only the font of the sentence Hara is an Unordered list with saveral levels of sub-lists to red, Arial font (different than the rest of the paga). (As shown in Figure 4.) Finished Example CAUTION: This screen shot may not be an exact match to the assignment. Figure 1 cwsersiCindy d × e Mary Smith ile Edit ew Favorites lools Help This is page without ess applied Notice that the page is w These are the defult settings for the page hite and the lext is black Here is an Unordered list wth several levels of sub-lists This is level one This is also level one o This is level tuo oAgin in level bwo This is level three . Agnin in level three I am back to level two agata I am now back to level one This is the last ine of the nested unordered Ests Here is a similar ondered list 1. Level one 1. Level two . Level dhree 2. 3. 2. Level three again Level two again Level two once more 2. level one again 3. Level one oce more Back to reguar textExplanation / Answer
*********************************************************************************************************************************
1. Figure 1
<!DOCTYPE html>
<html>
<head>
<title>Figure 1</title>
</head>
<body>
The Silver background
<br><br>
Here is an Unordered list with several levels of sub-lists<br>
<ul>
<li>This is level one</li>
<li>This is also level one</li>
<ul>
<li>This is level two</li>
<li>This is also level two</li>
<ul>
<li>This is level three</li>
<li>This is also level three</li>
</ul>
<li>I am back to level two again</li>
</ul>
<li>I am back to level one</li>
<li>This is the last line of the nested unordered lists</li>
</ul>
Here is a similar ordered list<br>
<ol>
<li>Level one</li>
<ol>
<li>Level two</li>
<ol>
<li>Level three</li>
<li>Level three again</li>
</ol>
<li>Level two again</li>
<li>Level two once more</li>
</ol>
<li>Level one again</li>
<li>Level one once more</li>
</ol>
<br>
Back to regular text
</body>
</html>
*********************************************************************************************************************************
*********************************************************************************************************************************
2.Figure 2
html2.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css2.css">
<title>Figure 2</title>
</head>
<body>
The Silver background
<br><br>
Here is an Unordered list with several levels of sub-lists<br>
<ul>
<li>This is level one</li>
<li>This is also level one</li>
<ul>
<li>This is level two</li>
<li>This is also level two</li>
<ul>
<li>This is level three</li>
<li>This is also level three</li>
</ul>
<li>I am back to level two again</li>
</ul>
<li>I am back to level one</li>
<li>This is the last line of the nested unordered lists</li>
</ul>
Here is a similar ordered list<br>
<ol>
<li>Level one</li>
<ol>
<li>Level two</li>
<ol>
<li>Level three</li>
<li>Level three again</li>
</ol>
<li>Level two again</li>
<li>Level two once more</li>
</ol>
<li>Level one again</li>
<li>Level one once more</li>
</ol>
<br>
Back to regular text
</body>
</html>
css2.css
body{
background-color: Silver;
}
*********************************************************************************************************************************
*********************************************************************************************************************************
3.Figure 3
html3.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css3.css">
<title>Figure 3</title>
</head>
<body>
The Silver background
<br><br>
Here is an Unordered list with several levels of sub-lists<br>
<ul>
<li>This is level one</li>
<li>This is also level one</li>
<ul>
<li>This is level two</li>
<li>This is also level two</li>
<ul>
<li>This is level three</li>
<li>This is also level three</li>
</ul>
<li>I am back to level two again</li>
</ul>
<li>I am back to level one</li>
<li>This is the last line of the nested unordered lists</li>
</ul>
Here is a similar ordered list<br>
<ol>
<li>Level one</li>
<ol>
<li>Level two</li>
<ol>
<li>Level three</li>
<li>Level three again</li>
</ol>
<li>Level two again</li>
<li>Level two once more</li>
</ol>
<li>Level one again</li>
<li>Level one once more</li>
</ol>
<br>
Back to regular text
</body>
</html>
css3.css
body{
background-color: Silver;
font-family: Comic Sans MS;
}
*********************************************************************************************************************************
*********************************************************************************************************************************
4. html4.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css4.css">
<title>Figure 4</title>
</head>
<body>
The Silver background
<br><br>
<span>Here is an Unordered list with several levels of sub-lists</span><br>
<ul>
<li>This is level one</li>
<li>This is also level one</li>
<ul>
<li>This is level two</li>
<li>This is also level two</li>
<ul>
<li>This is level three</li>
<li>This is also level three</li>
</ul>
<li>I am back to level two again</li>
</ul>
<li>I am back to level one</li>
<li>This is the last line of the nested unordered lists</li>
</ul>
Here is a similar ordered list<br>
<ol>
<li>Level one</li>
<ol>
<li>Level two</li>
<ol>
<li>Level three</li>
<li>Level three again</li>
</ol>
<li>Level two again</li>
<li>Level two once more</li>
</ol>
<li>Level one again</li>
<li>Level one once more</li>
</ol>
<br>
Back to regular text
</body>
</html>
css4.css
body{
background-color: Silver;
font-family: Comic Sans MS;
}
span{
color: red;
}
*********************************************************************************************************************************
*
*
*
*
*
************************************************************************************************************
All four figures Figure 1, Figure 2, Figure 3, Figure 4 with their html and css files are given above.
Figure 1 does'nt have a css file, rest have css and have been given.
The outputs will be exactly same as provided in the question.
NOTE:
While running keep the html and css files in the same folder.
All the best. Kindly rate the answer if you find it useful.
********************************************************************************
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.