In: Computer Science
For this assignment, you can build on the 9th exercise that you made for the Assignment 1. So, you have a file named “band.html”.
Here is the band.html page that I did in the last assignment that this assignment starts off with:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment One</title>
<meta charset="utf-8">
</head>
<body>
<!--HTML to display name with largest heading element -->
<h1>My Name</h1>
<hr>
<!-- absolute link to school website -->
<a href="https://www.uncg.edu/">UNCG</a>
<hr>
<!--Unordered list to display days of the week -->
<h3>Week Days</h3>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
<hr>
<!--4 -->
<h3>Ordered List</h3>
<!--Ordered list -->
<ol type="A">
<li>HTML</li>
<li>XML</li>
<li>XHTML</li>
</body>
</html>
Website Section
<!DOCTYPE html>
<html lang="en">
<head>
<!--title for web page -->
<title>My Favorite Musical Group</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>My Favorite Musical Group: Old Dominion</h1>
<h3>Group Members:</h3>
<!-- Unordered list -->
<ul>
<li>Matthew Ramsey</li>
<li>Trevor Rosen</li>
<li>Brad Tursi</li>
<li>Geoff Sprung</li>
<li>Whit Sellers</li>
</ul>
<h3>Albums:</h3>
<!--Description List -->
<dl>
<li>Happy Endings (2017) - This album is my favorite of all their albums. It contains some well-known songs, such as "No Such Thing as a Broken Heart," "Hotel Key," and "Written in the Sand." </li>
<li>Meat and Candy (2015) - This album was their first album and it really set the tone for the rest of their music to come. It was an overall very vocally strong album. </li>
</ol>
<hr>
<!--hyperlink -->
click here for <a href="https://www.weareolddominion.com/">more details</a>
</body>
</html>
For the above question i'm done with my answer.
First check the output
Now this is the band.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment One</title>
<meta charset="utf-8">
</head>
<link href="band.css" rel="stylesheet" type="text/css">
<!--Adding stylesheet -->
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"> <!--Adding google fonts -->
<body>
<center>
<!--instead of nav use ul and li -->
<div class="content-center">
<div class="navigationbar">
<a class="active"
href="band.html">Home</a>
| <a
href="contact.html">contact</a>
| <a
href="tour.html">tour</a>
</div>
<!--HTML to display name with largest heading element -->
<h1>My Name</h1>
<hr>
<!-- absolute link to school website -->
<a href="https://www.uncg.edu/" style="color:#FFFFFF; font-weight:bold">UNCG</a>
<hr>
<!--Unordered list to display days of the week -->
<h3>Week Days</h3>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
<hr>
<!--4 -->
<h3>Ordered List</h3>
<!--Ordered list -->
<ol type="A">
<li>HTML</li>
<li>XML</li>
<li>XHTML</li>
</body>
</html>
Here band.html is completed and now this is band.css
footer
{
}
.content-center
{
background-color:#000000;
color:#FFFFFF;
height:auto;
width:80%;
text-indent: 5px;
}
h1
{
font-family: 'Roboto', sans-serif;
text-shadow: 2px 2px #ff0000;
line-height:2px;
}
.navigationbar
{
background-color:#FF0000;
height:50px;
width:100%;
font-size:24px;
text-align:left;
}
.navigationbar a
{
color:#FFFFFF;
font-style:normal;
font-weight:bold;
text-decoration:none;
word-spacing: 30px;
}
ul
{
text-align:left;
}
ol
{
text-align:left;
}
Now, the 2 pages as described in question
1 page tour.html
<html>
<head>
<title>tour.html</title>
</head>
<link href="band.css" rel="stylesheet"
type="text/css">
<body>
<center>
<div
class="content-center">
<ul>
<li><a
class="active" href="band.html">Home</a></li>
<li><a
href="contact.html">contact</a></li>
<li><a
href="tour.html">tour</a></li>
</ul>
</div>
</center>
</body>
2 page contact.html
<html>
<head>
<title>contact.html</title>
</head>
<link href="band.css" rel="stylesheet"
type="text/css">
<body>
<center>
<div
class="content-center">
<ul>
<li><a
class="active" href="band.html">Home</a></li>
<li><a
href="contact.html">contact</a></li>
<li><a
href="tour.html">tour</a></li>
</ul>
</div>
</center>
</body>
these web pages are performed very well, and the links are also
working, please check the links and the requirement of the
selectors. this selectors are used in band.css, as well as, in
band.html.