Chapter 8 Exercise: Create a web page about the next place you would like to visit....
Chapter 8 Exercise: Create a web page about the next place you would like to visit. Save the files as nextstop.html and nextstop.css. Include the following HTML5 elements: header, nav, main, figure, figcaption, article, and footer. Configure the text, color, and layout with CSS. Make sure you apply components of responsive web design to ensure it displays well on both desktop and smartphone browsers. Hint: Add the viewport meta tag, configure flexible images, and edit the CSS to configure a media query with appropriate style rules for typical smartphone device display.
Homework Answers
Answer:
The HTML code:
<html>
<head>
<title>MNS</title>
<meta name="viewport" content="width=device-width"> //the viewport meta tag
<link rel="stylesheet" href="nextstop.css"> //linking to the css file kept on same folder
</head>
<body>
<h1 style="text-align: center">MY NEXT STOP</h1> //header
<nav>
<a href="home.html">Home</a> //nav tag for links
<a href="pre.html">Previous Stops</a>
<a href="blog.html">Blog</a>
<a href="youtube.html">Youtube</a>
</nav>
<main>
<article>
<h3>Places I'm going to visit.</h3>
<p>The following images show the places that i would love to visit and hence are going to be my next stop in this voyage, where i seek the truth.</p>
</article>
<figure> //image for city
<img src="img/barcelona.jpg" style="width: 100%">
<figcaption>Barcelona, Spain</figcaption>
</figure>
<figure>
<img src="img/luanda.jpg" style="width: 100%">
<figcaption>Luanda, Angola</figcaption>
</figure>
<figure>
<img src="img/mumbai.jpg" style="width: 100%">
<figcaption>Mumbai, India</figcaption>
</figure>
</main>
<footer>© 2018-2019. All rights reserved.</footer> //the code used is for copyright symbol
</body>
</html>
CSS code:
h1{
color: red; //set color of header to red
}
footer{
background-color: aqua;
}
nav{
text-align: center;
}
@media (max-width: 400px) {
nav, article,footer
{ //here this query simply tells the browser to hide the nav,article
visibility: hidden; //and footer when the screen size is below 400px.
}
the media query above can be used to size elements to make them responsive. But in the code that i have provided, it is responsive even without this since i have set the width attribute of image to 100%. The tells the browser to accommodate the picture to full of the screen width, already obtained via the viewport meta tag.
here is how the code works on browser:
And this is how the browser
act when screen width change:
I'm sure you know how to place these codes into files. But in case if you don't:
Place the html code on file nextstop.html in a folder( lets say myproject)
Place the css code on file nextstop.css in the same folder
Now create a new folder (img) and place the images you want to display. Refer to the src attribute of img tag inside the figure element
if you have any doubt, please comment below so that i can answer them. If you are satisfied with the answer please leave a thumbs up. It really matters.
Add Answer to:
Chapter 8 Exercise: Create a web page about the next place you
would like to visit....
Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page:...
Path of Light Yoga Chapter 7
Please help!!
Here is my code for the index page:
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<link rel="stylesheet" href="yoga.css" />
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="classes.html">Classes</a>
<a href="schedule.html">Schedule</a>
<a href="contact.html">Contact</a>
</nav>
<main>
<img class="floatleft" src="yogadoor2.jpg" alt="yogadoor2"
height="300px" width="250px">
<h2>Find Your Inner Light</h2>
<p>
Path of Light Yoga Studio provides all levels of yoga practice
in a tranquil, peaceful environment....
You've been hired to create a website for Eating Well in Season, a business in Glover,...
You've been hired to create a website for Eating Well in Season, a
business in Glover, Vermont, that delivers produce from local farms
to its customers. Another team member has created a style sheet for
the site but has been unable to resolve some errors in the code.
You continue your work on the site by linking to and debugging the
style sheet, incorporating a color scheme, and aligning the page
content.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eating Well...
Creating the Home and Template Pages Overview In this assignment, you will start building your Web...
Creating the Home and Template Pages Overview In this assignment, you will start building your Web site for your fictional organization by creating a homepage using HTML5 and some of the key elements that define a Web page. You are required to use either a simple text editor to write your code, or an enhanced text editor such as Brackets. Note: Microsoft Word is not a good tool for developing code because it is a document processor and not a...
Design an original, professional web site following the specifications listed below. This web sit...
Design an original, professional web site following the specifications listed below. This web site will be for a business you plan to set up for yourself or for someone else. The following is a detailed list of the requirements for your web site. READ them carefully. Instructions - Web Site Requirements for the web site: General: You will thoroughly test all your pages in more than one browser. All links MUST work. All graphics must show on the page. All...
Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...
Code for the movies page:
<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="style.css"
/>
<title>Daniel's Movie Page</title>
</head>
<body>
<a href="hobbies.html">Hobbies</a>
<h1>Movies and Actors</h1>
<ol>
<li class="ol-list1">Gravity</li>
<li>Avenger</li>
<li>Marshal</li>
<li>Interstellar</li>
<li>Dark Knight</li>
<li>Superman</li>
</ol>
<ul>
<li class="ul-list1">Robet Downey jr.</li>
<li>Sharuk Khan</li>
<li>Ranbir Kapoor</li>
<li>Sidhhart Malhotra</li>
<li>Angela Joli</li>
<li>Leonardo DiCaprio/li>
</ul>
<h2>Favorite Movie</h2>
<p>
<b>Gravity:</b> The movie portrayed what happens to
an astronaut if he/she
is pushed away from spaceship.It was terrifying how much...
Question 1 To remove the underlining from an <a> element, you can use CSS to set...
Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...
Question 1 To remove the underlining from an <a> element, you can use CSS to set...
Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...
New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...
New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case
Problem 3.
mas_register.js
"use strict";
/*
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 3
Filename: mas_register.js
Author:
Date:
Function List
=============
formTest()
Performs a validation test on the selection of the conference
session package and the conference discount number
calcCart()
Calculates the cost of the registration and saves data
in session storage
writeSessionValues()
Writes data values from session storage in to the
registration...
Path of Light Yoga Chapter 7
Please help!!
Here is my code for the index page:
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<link rel="stylesheet" href="yoga.css" />
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="classes.html">Classes</a>
<a href="schedule.html">Schedule</a>
<a href="contact.html">Contact</a>
</nav>
<main>
<img class="floatleft" src="yogadoor2.jpg" alt="yogadoor2"
height="300px" width="250px">
<h2>Find Your Inner Light</h2>
<p>
Path of Light Yoga Studio provides all levels of yoga practice
in a tranquil, peaceful environment....
You've been hired to create a website for Eating Well in Season, a
business in Glover, Vermont, that delivers produce from local farms
to its customers. Another team member has created a style sheet for
the site but has been unable to resolve some errors in the code.
You continue your work on the site by linking to and debugging the
style sheet, incorporating a color scheme, and aligning the page
content.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eating Well...
Code for the movies page:
<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="style.css"
/>
<title>Daniel's Movie Page</title>
</head>
<body>
<a href="hobbies.html">Hobbies</a>
<h1>Movies and Actors</h1>
<ol>
<li class="ol-list1">Gravity</li>
<li>Avenger</li>
<li>Marshal</li>
<li>Interstellar</li>
<li>Dark Knight</li>
<li>Superman</li>
</ol>
<ul>
<li class="ul-list1">Robet Downey jr.</li>
<li>Sharuk Khan</li>
<li>Ranbir Kapoor</li>
<li>Sidhhart Malhotra</li>
<li>Angela Joli</li>
<li>Leonardo DiCaprio/li>
</ul>
<h2>Favorite Movie</h2>
<p>
<b>Gravity:</b> The movie portrayed what happens to
an astronaut if he/she
is pushed away from spaceship.It was terrifying how much...
New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case
Problem 3.
mas_register.js
"use strict";
/*
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 3
Filename: mas_register.js
Author:
Date:
Function List
=============
formTest()
Performs a validation test on the selection of the conference
session package and the conference discount number
calcCart()
Calculates the cost of the registration and saves data
in session storage
writeSessionValues()
Writes data values from session storage in to the
registration...
Most questions answered within 3 hours.
-
Which of the following pairs of ions have the same electron
configuration?
I: Br− and Se2−...
asked 1 hour ago -
The Foremost Composite Materials Company is planning a two-day
sales conference for October 19-20. The conference...
asked 1 hour ago -
3) Illustrate the observed pattern of relatedness of organisms
versus adaptations to specific conditions. This means...
asked 2 hours ago -
In winter a lake has a 0.35 m thick ice layer over 1.10 m of
water....
asked 3 hours ago -
Assuming the following has been encrypted with a Vigenere cipher
below, use the method(s) and assumptions...
asked 3 hours ago -
How would I use switch statements to write a program that will
take an input of...
asked 3 hours ago -
Imagine a reaction in which methane gas combusts at a constant
pressure of 1 atm and...
asked 3 hours ago -
Two parallel wires (each 12 m in length) are separated by a
distance of 0.065 m...
asked 3 hours ago -
Suppose there were three masses at the corner of uniform
equilateral triangle. The masses are m1...
asked 3 hours ago -
Situation: A building that is 618 m above the ground floor. How
many times would a...
asked 3 hours ago -
help me and discuss one successful and one
unsuccessful international company/busines in Indonesia.whyit
succeed and why...
asked 3 hours ago -
I- Choose the best answer
Which of the following statements about the structure and
packaging of...
asked 3 hours ago