In: Computer Science
Chapter 4 Assignments - Part #1 (Part #2 is on next page)
Submit an HTML file attached to an email with your web page containing the elements below.
- Create a web page with a comment containing your name after this line.
o
- In the head section, add character encoding.
- Add the title "Chapter 4 Web Page #1 - by yourname"
- Create a file called myStyles.css as the style sheet for the web page.
- Add the link for the style sheet in the index.html file.
- Create a banner ~180x800 for the web page using Snip, Paint, PowerPoint, or another program and add the banner (non-elastic banner) to the web page by creating a banner class in the style sheet and a "div" in index.html.
o Include a graphic and text in the banner.
- In the style sheet, redefine h1 as Tahoma, green, and 30 pixels.
- In the style sheet, redefine h2 as Arial, blue, and 20 pixels.
- Create a page box class in the style sheet with a background color and center the box on the page.
o Use a padding of 20%, and width of 80%, and a rounded corner border of 15px radius and 3px thick of some color.
o Inside the page box, add the text shown and answers to the questions below.
o Make the page box as wide as the banner regardless of browser resizing.
- Create a footer class with your name, the copyright symbol, and year centered.
o The footer will have a color background, a border 1 pixel thick that is a different color than the background.
o The footer text will use h3 and be white and italic o The footer text will be padded with 2 pixels top and bottom
Questions:
1. CSS documents the ________________ status of each style property.
2. CSS is used to define _________ _________ and attach them to HTML elements.
3. This statement /* browser note */ is a ____________ in CSS.
4. The _______ element for a CSS is placed inside the head element of the page.
5. The ____________ associates a rule to a set of HTML elements.
6. a:visited { color: #300 } will make __________ _________ red.
Solution for the above questions:-
(1) CSS documents the current status of each style property.
(2) CSS is used to define style for unique element and attach them to HTML elements.
(3) This statement /* browser note */is a comment in CSS.
(4) The <style> element for a CSS is placed inside the head element of the page.
(5) The <fieldset> associates a rule to a set of HTML elements.
(6) a:visited { color: #300 } will make 0% red.
SOURCE CODE:-
index.html
<!DOCTYPE html>
<!-- MY NAME -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="myStyles.css" />
<title>Chapter 4 Web Page #1 - by Name</title>
</head>
<body>
<div class="banner">
<p>Welcome to my website</p>
<img src="banner.png" />
</div>
<div class="Pagebox">
<h1>HTML Page box using CSS</h1>
<h2> Answers</h2>
<ol>
<li>Answer 1</li>
<li>Answer 2</li>
<li>Answer 3</li>
<li>Answer 4</li>
<li>Answer 5</li>
</ol>
</div>
<div class="footer"><h3>myname©2020</h3></div>
</body>
</html>
myStyles.css
.banner {
display: flex;
justify-content: center;
}
.banner p {
position: absolute;
color: yellow;
font-size: 40px;
font-weight: bold;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
h1 {
font-family: Tahoma;
color: green;
font-size: 30px;
}
h2 {
font-family: Arial;
color: blue;
font-size: 20px;
}
.Pagebox {
width: 500px;
padding-right: 20%;
border: 3px yellow solid;
border-radius: 15px;
background-color: lightblue;
margin: auto;
margin-top: 20px;
}
.Pagebox > h1 {
display: flex;
justify-content: center;
}
.footer {
display: flex;
justify-content: center;
padding: 2 0 2 0;
background-color: lightblue;
border: 1px red solid;
margin: auto;
margin-top: 20px;
width: 800px;
}
.footer h3 {
color: white;
font-style: italic;
}
li {
font-weight: bold;
font-size: 20px;
}