Configure the opacity property
Program plan:
Include the HTML tag “<HTML>”.
- Include the title on the webpage using “<head>” tag.
- Open the “<meta>” tag to set the viewport for visible area of webpage.
- Include the title on the webpage using “<title>” tag.
- Include the style tag using “<style>” for internal style.
- Add the style for “body” element.
- Internal style for media queries to design the web page.
- Add the style for “wrapper” element.
- Add the style for “offer” element.
- Add the style for “offer a” element.
- Add the style for “nav” element.
- Add the style for “nav ul” element.
- Add the style for “nav li” element.
- Add the style for “nav a” element.
- Add the style for “nav a:link” element.
- Add the style for “nav a:visited” element.
- Add the style for “nav a:hover” element.
- Add the style for “main” element.
- Add the style for “header” element.
- Add the style for “h1” element.
- Add the style for “h2” element.
- Add the style for “figure” element.
- Add the style for “figcaption” element.
- Add the style for “footer” element.
- Open the body of the web page using “<body>” tag.
- Use the two-column layout to design the webpage using “div” tag with name “wrapper”.
- Open the header of the web page using “<header>” tag.
- Open the navigation link using “<nav>” tag.
- Open the main of the web page using “<main>” tag.
- Open the section of the web page using “<figure>” tag.
- Use the two-column layout to design the webpage using “div” tag with name “offer”.
- Open the footer of the web page using “<footer>” tag.
- Close all the tags.
The HTML code creates a webpage to configure the opacity to display the lighthouse figure; initially it displays figure at 50% opacity, then slowly changes to 100% when the user places the mouse over the figure area.
Explanation of Solution
Program:
Filename: index.html
<!-- html opening tag -->
<html lang="en">
<!-- head opening tag -->
<head>
<!-- Title opening tag -->
<title>Lighthouse Island Bistro</title>
<!--Define the meta tag-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Style tag-->
<style>
/*Internal style for "*"*/
*{ box-sizing: border-box; }
/*Internal style for body tag*/
body
{
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
/*Internal style for div tag with id of "wrapper" "*/
#wrapper
{
background-color: #b3c7e6;
color: #000066;
width: 90%;
margin: auto;
min-width: 450px;
max-width: 1020px;
}
/*Internal style for header tag */
header
{
background-color: #869dc7;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
color: #00005D;
padding: 10px;
}
/*Internal style for h1 tag */
header h1 { padding-left: 200px;}
/*Internal style for span tag */
header span
{
font-style: italic;
font-weight: bold;
color: #00005D;
padding-right: 15px;
text-align: right;
display: block;
}
/*Internal style for navigation tag */
nav
{
float: left;
width: 150px;
letter-spacing:0.1em;
font-weight: bold;
}
/*Internal style for navigation "unordered list" tag */
nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
/*Internal style for navigation "list" tag */
nav li { border-bottom: 1px solid #ffffff;}
/*Internal style for nav "a" tag */
nav a
{
text-decoration: none;
display: block;
padding: 15px;
transition: background-color 2s linear;
}
/*Internal style for nav "a:link" tag */
nav a:link { color: #ffffff; }
/*Internal style for nav "a:visited" tag */
nav a:visited { color: #eaeaea; }
/*Internal style for nav "a:hover" tag */
nav a:hover
{
color: #869dc7;
background-color: #eaeaea;
}
/*Internal style for main tag */
main
{ background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
/*Internal style for h2 tag */
h2
{
color: #869dc7;
font-family: arial, sans-serif;
margin: 5px;
}
/*Internal style for figure tag */
figure
{ float: right;
margin: 10px;
padding: 5px;
background-color: #FFF;
border: 1px solid #CCC;
box-shadow: 5px 5px 5px #828282;
/*Set the opacity as "50%" */
opacity: .5;
/*Set the transition to change the opacity value 50% to 100% */
transition: opacity 1s linear;
}
/*Internal style for figure tag when mouse over the figure */
figure:hover { opacity: 1; }
/*Internal style for figcaption tag */
figcaption
{
text-align: center;
font-size: .8em;
font-style: italic;
}
/*Internal style for footer tag */
footer
{ font-size:70%;
text-align: center;
padding: 10px;
background-color: #869dc7;
clear: both;
}
/*Internal style for div tag with id of "offer" */
#offer
{
background-color: #eaeaea;
width: 10em;
margin: auto;
text-align: center;
}
/*Internal style for div tag with id of "offer a" */
#offer a
{
text-decoration: none;
color: #FF0000;
}
/*Internal style for header, main, nav, footer, figure, and figcaption tags */
header, main, nav, footer, figure, figcaption { display: block; }
/*Internal style for media queries to set maximum of 1024 size for web page. */
@media only screen and (max-width: 1024px)
{
body { margin: 0; background-color: #869dc7;}
#wrapper { width: auto; margin: 0; }
main { margin-left: 0; }
nav { float: none; width: auto; }
nav li { display: inline-block; padding: 0.5em; }
nav ul { text-align: center; }
nav a { border-style: none; }
h1, h2 { font-size: 120%; }
p { font-size: 90%; }
}
/*Internal style for media queries to set maximum of 768 size for web page. */
@media only screen and (max-width: 768px)
{
#wrapper { min-width: 0; }
header { background-image: url(lighthousemini.jpg); }
header h1 { padding-left: 0; }
h1, h2 { font-size: 100%; }
span { font-size: 80%; }
figure { display: none;}
nav, nav ul, nav li { padding: 0; }
nav li { display: block; }
nav a { display: block; padding: 0.5em 0; border-bottom: 2px ridge #00005D; }
}
<!--close the style tag-->
</style>
<!--Close head tag-->
</head>
<!-- Open the body tag-->
<body>
<!--open the div tag-->
<div id="wrapper">
<!--Open the header tag-->
<header>
<!--Display the h1 heading-->
<h1>Lighthouse Island Bistro</h1>
<!--Display the span tag-->
<span>the best coffee on the coast</span>
<!--Close the header tag-->
</header>
<!--Open the navigation tag-->
<nav>
<!--Open the unordered list tag-->
<ul>
<!--Display the navigation link using "a" tag-->
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
<!--Close the unordered list tag-->
</ul>
<!--Close the navigation tag-->
</nav>
<!--Open the main tag-->
<main>
<!--Open the figure tag-->
<figure>
<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island">
<!--Display the caption using figcaption tag-->
<figcaption>Island Lighthouse, Built in 1870</figcaption>
<!--Close the figure tag-->
</figure>
<!--Display the h2 heading-->
<h2>Locally Roasted Free-Trade Coffee</h2>
<!--Display the content using paragraph tag-->
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<!--Display the h2 heading-->
<h2>Specialty Pastries</h2>
<!--Display the content using paragraph tag-->
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<!--Display the h2 heading-->
<h2>Lunchtime is Anytime</h2>
<!--Display the content using paragraph tag-->
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<!--Display the h2 heading-->
<h2>Panoramic View</h2>
<!--Display the content using paragraph tag-->
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<!--open the div tag with id name of "offer"-->
<div id="offer">
<a href="#">Special Offer</a>
<!--Close the div tag-->
</div>
<!--Close the main tag-->
</main>
<!--Open the footer tag-->
<footer>Copyright © 2018
<!--Close the footer tag-->
</footer>
<!--Close the div tag-->
</div>
<!--Close the body tag-->
</body>
<!--Close the html tag-->
</html>
Output:
Note: Run the code and display the output web page.
Screenshot of the Webpage
Note: The lighthouse figure is initially at 50% opacity then it slowly changes to 100% when the user places the mouse over the figure area.
Screenshot of the Webpage
Want to see more full solutions like this?
Chapter 11 Solutions
Basics of Web Design: Html5 & Css3
- Consider the following program that counts the number of spaces in a user-supplied string. Modify the program to define and use a function, countSpaces, instead. def main() : userInput = input("Enter a string: ") spaces = 0 for char in userInput : if char == " " : spaces = spaces + 1 print(spaces) main()arrow_forwardWhat is the python code for the function def readFloat(prompt) that displays the prompt string, followed by a space, reads a floating-point number in, and returns it. Here is a typical usage: salary = readFloat("Please enter your salary:") percentageRaise = readFloat("What percentage raise would you like?")arrow_forwardassume python does not define count method that can be applied to a string to determine the number of occurances of a character within a string. Implement the function numChars that takes a string and a character as arguments and determined and returns how many occurances of the given character occur withing the given stringarrow_forward
- Consider the ER diagram of online sales system above. Based on the diagram answer the questions below, a) Based on the ER Diagram, determine the Foreign Key in the Product Table. Just mention the name of the attribute that could be the Foreign Key. b) Mention the relationship between the Order and Customer Entities. You can use the following: 1:1, 1:M, M:1, 0:1, 1:0, M:0, 0:M c) Is there a direct relationship that exists between Store and Customer entities? Answer Yes/No? d) Which of the 4 Entities mention in the diagram can have a recursive relationship? e) If a new entity Order_Details is introduced, will it be a strong entity or weak entity? If it is a weak entity, then mention its type?arrow_forwardNo aiarrow_forwardGiven the dependency diagram of attributes {C1,C2,C3,C4,C5) in a table shown in the following figure, (the primary key attributes are underlined)arrow_forward
- What are 3 design techniques that enable data representations to be effective and engaging? What are some usability considerations when designing data representations? Provide examples or use cases from your professional experience.arrow_forward2D array, Passing Arrays to Methods, Returning an Array from a Method (Ch8) 2. Read-And-Analyze: Given the code below, answer the following questions. 2 1 import java.util.Scanner; 3 public class Array2DPractice { 4 5 6 7 8 9 10 11 12 13 14 15 16 public static void main(String args[]) { 17 } 18 // Get an array from the user int[][] m = getArray(); // Display array elements System.out.println("You provided the following array "+ java.util.Arrays.deepToString(m)); // Display array characteristics int[] r = findCharacteristics(m); System.out.println("The minimum value is: " + r[0]); System.out.println("The maximum value is: " + r[1]); System.out.println("The average is: " + r[2] * 1.0/(m.length * m[0].length)); 19 // Create an array from user input public static int[][] getArray() { 20 21 PASSTR2222322222222222 222323 F F F F 44 // Create a Scanner to read user input Scanner input = new Scanner(System.in); // Ask user to input a number, and grab that number with the Scanner…arrow_forwardGiven the dependency diagram of attributes C1,C2,C3,C4,C5 in a table shown in the following figure, the primary key attributes are underlined Make a database with multiple tables from attributes as shown above that are in 3NF, showing PK, non-key attributes, and FK for each table? Assume the tables are already in 1NF. Hint: 3 tables will result after deducing 1NF -> 2NF -> 3NFarrow_forward
- Consider the ER diagram of online sales system above. Based on the diagram answer the questions below, 1. Based on the ER Diagram, determine the Foreign Key in the Product Table. Just mention the name of the attribute that could be the Foreign Key 2. Is there a direct relationship that exists between Store and Customer entities? AnswerYes/No?arrow_forwardConsider the ER diagram of online sales system above. Based on the diagram answer thequestions below, 1. Mention the relationship between the Order and Customer Entities. You can use the following: 1:1, 1:M, M:1, 0:1, 1:0, M:0, 0:M 2. Which one of the 4 Entities mention in the diagram can have a recursive relationship? 3. If a new entity Order_Details is introduced, will it be a strong entity or weak entity? If it is a weak entity, then mention its type (ID or Non-ID, also Justify why)? NO AI use pencil and paperarrow_forwardSTEP 1: The skeleton Let's start by creating a skeleton for some of the classes you will need. • Write a class called Tile. You can think of a tile as a square on the board on which the game will be played. We will come back to this class later. For the moment you can leave it empty while you work on creating classes that represents characters in the game. • Write an abstract class Fighter which has the following private fields: - A Tile field named position, representing the fighter's position in the game. A double field named health, representing the fighter's health points (HP). An int field named weaponType, representing the type of weapon the fighter is using. This value is used to rank different weapon types: higher values indicate higher weapon ranks. -An int field named attackDamage, representing the fighter's attack power. The class must also have the following public methods: 3 A constructor that takes as input a Tile indicating the position of the fighter, a double…arrow_forward
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
EBK JAVA PROGRAMMINGComputer ScienceISBN:9781337671385Author:FARRELLPublisher:CENGAGE LEARNING - CONSIGNMENT
Microsoft Visual C#Computer ScienceISBN:9781337102100Author:Joyce, Farrell.Publisher:Cengage Learning,