Web Development and Design Foundations with HTML5 (8th Edition)
8th Edition
ISBN: 9780134322759
Author: Terry Felke-Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Concept explainers
Expert Solution & Answer
Chapter 3, Problem 7HOE
(a)
Explanation of Solution
Filename: format1.css
<!--HTML Tag-->
<html>
<!--Head Tag-->
<head>
<!--Style Tag-->
<style>
<!--Alignment for body tag-->
body
{
background-color: #FFFFFF;
color: #000099;
font-family: Arial, Helvetica, sans-serif;
}
<!--Alignment for hyperlink tag-->
a
{
background-color: #CCCCCC;
}
<!--Alignment for header tag-->
h1
{
font-family: "Times New Roman", serif;
color: #FF0000;
}
<!--Close Tag-->
</style>
<!--Close Tag-->
</head>
<!--Body Tag-->
<body>
<!--Heading Tag-->
<h1...
(b)
Explanation of Solution
Filename: format2.css
Program:
<!--HTML Tag-->
<html>
<!--Head Tag-->
<head>
<!--Style Tag-->
<style>
<!--Alignment for body tag-->
body
{
background-color: #FFFF66;
color: #00FF00;
}
<!--Alignment for hyperlink tag-->
a
{
background-color:#FFFFFF;
}
<!--Alignment for header tag-->
h1
{
font-family: "Times New Roman",serif;
background-color: #FFFFFF;
color: #00FF00;
}
<!--Close tag-->
</style>
<!--Close tag-->
</head>
<!--Body tag-->
<body>
<!--Heading tag-->
<h1>Pr...
(c)
Explanation of Solution
Filename: moviecss1.html
Program:
<!--HTML Tag-->
<html lang="en">
<!--Head Tag-->
<head>
<!--Title Tag-->
<title>External Style Sheet</title>
<link rel="stylesheet" href="format1.css">
<!--Close Tag-->
</head>
<!--Body Tag-->
<body>
<!--Header Tag-->
<header><h1>Harry Potter</h1></header>
<!--Main Tag-->
<main>
<p>Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's struggle against Lord Voldemort, a dark wizard who intends to become immortal, overthrow the wizard governing body known as the Ministry of Magic, and subjugate all wizards and muggles (non-magical people)...
(d)
Program Plan Intro
In order to modify the moviecss1.html page to link to the format2.css instead of format1.css, the below given code is one solution.
Change
<link rel="stylesheet" href="format1.css">
To
<link rel="stylesheet" href="format2.css">
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Create a webpage to showcase your favorite travel destinations. Follow the instructions below to build the webpage using HTML and CSS.
Requirements:
Use an external CSS file for styling.
Include a navigation bar (nav) at the top of the page with links to different sections of the webpage.
Create a header with a suitable title for your webpage.
Design a footer that includes contact information (email, phone number, etc.).
Implement a two-column layout for the main content.
Use an ordered list to list your top four favorite places to travel.
Create at least 4 html files talking about different places
Look and feel should be consistent across all pages
Use an unordered list to list some contact details (email, phone, etc.) in the footer.
Apply a background color to the webpage.
Customize the text color, font size, and text decoration as per your preference.
Add a background image that repeats horizontally across the webpage.
Set a maximum width and minimum width for the webpage.…
Create a webpage to showcase your favorite travel destinations. Follow the instructions below to build the webpage using HTML and CSS.
Requirements:
Use an external CSS file for styling.
Include a navigation bar (nav) at the top of the page with links to different sections of the webpage.
Create a header with a suitable title for your webpage.
Design a footer that includes contact information (email, phone number, etc.).
Implement a two-column layout for the main content.
Use an ordered list to list your top four favorite places to travel.
Create at least 4 html files talking about different places
Look and feel should be consistent across all pages
Use an unordered list to list some contact details (email, phone, etc.) in the footer.
Apply a background color to the webpage.
Customize the text color, font size, and text decoration as per your preference.
Add a background image that repeats horizontally across the webpage.
Set a maximum width and minimum width for the webpage.…
Create a webpage to showcase your favorite travel destinations. Follow the instructions below to build the webpage using HTML and CSS.
Requirements:
Use an external CSS file for styling.
Include a navigation bar (nav) at the top of the page with links to different sections of the webpage.
Create a header with a suitable title for your webpage.
Design a footer that includes contact information (email, phone number, etc.).
Implement a two-column layout for the main content.
Use an ordered list to list your top four favorite places to travel.
Create at least 4 html files talking about different places
Look and feel should be consistent across all pages
Use an unordered list to list some contact details (email, phone, etc.) in the footer.
Apply a background color to the webpage.
Customize the text color, font size, and text decoration as per your preference.
Add a background image that repeats horizontally across the webpage.
Set a maximum width and minimum width for the webpage.…
Chapter 3 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
Ch. 3.4 - Prob. 1CPCh. 3.4 - Prob. 2CPCh. 3.4 - Prob. 3CPCh. 3.8 - Prob. 1CPCh. 3.8 - Prob. 2CPCh. 3.8 - Prob. 3CPCh. 3 - Prob. 1MCCh. 3 - Prob. 2MCCh. 3 - Prob. 3MCCh. 3 - Prob. 4MC
Ch. 3 - Prob. 5MCCh. 3 - Prob. 6MCCh. 3 - Prob. 7MCCh. 3 - Prob. 8MCCh. 3 - Prob. 9MCCh. 3 - Prob. 10MCCh. 3 - Prob. 11MCCh. 3 - Prob. 12FIBCh. 3 - Prob. 13FIBCh. 3 - Prob. 14FIBCh. 3 - Prob. 15FIBCh. 3 - Prob. 1AYKCh. 3 - Prob. 2AYKCh. 3 - Prob. 3AYKCh. 3 - Prob. 1HOECh. 3 - Prob. 2HOECh. 3 - Prob. 3HOECh. 3 - Prob. 4HOECh. 3 - Prob. 5HOECh. 3 - Prob. 6HOECh. 3 - Prob. 7HOECh. 3 - Prob. 8HOECh. 3 - Prob. 9HOECh. 3 - Prob. 1WRCh. 3 - Prob. 2WRCh. 3 - Prob. 1FWD
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Similar questions
- Create a webpage to showcase your favorite travel destinations. Follow the instructions below to build the webpage using HTML and CSS. Requirements: Use an external CSS file for styling. Include a navigation bar (nav) at the top of the page with links to different sections of the webpage. Create a header with a suitable title for your webpage. Design a footer that includes contact information (email, phone number, etc.). Implement a two-column layout for the main content. Use an ordered list to list your top four favorite places to travel. Create at least 4 html files talking about different places Look and feel should be consistent across all pages Use an unordered list to list some contact details (email, phone, etc.) in the footer. Apply a background color to the webpage. Customize the text color, font size, and text decoration as per your preference. Add a background image that repeats horizontally across the webpage. Set a maximum width and minimum width for the webpage.…arrow_forwardDesign a basic wesbite layout for a restaurant with a home page, and about page, a menu page, and a contact page (with a form: form doesn't have to be useable!) PLUS a separate CSS file with style features. Use only HTML and CSS, no other formats.arrow_forwardCreate a simple, single-page website to display thumbnails of image files relating to a specific topic. These could be your own vacation photos, animal or nature images, favorite performers, athletes, etc. Images from copyrighted sources may be used for this purpose without permission, but should be credited as to their source. Size the thumbnails to maintain the correct aspect ratio (i.e., so that the images in the thumbs are not distorted), set the thumbs up as links to the actual image files, and organize the thumbnails. No hand written and fast answer with the explanationarrow_forward
- please also put the source code (.html) and animage of the output of your pagearrow_forwardCreate the page layout as shown in the screenshot above. In particular, we will call the top, bottom, left, and right portions of the page "header", "footer", "content", and "menu", respectively. Note that the content part of the page is further divided into three blocks: the top block has a heading and a paragraph, and is followed by two blocks - one on the left with two images, and one on the right with three "announcements". The header should use large, white, center-aligned text on a red background with a thick black border. There should be some space between the text and the border. The footer should use green, centered-aligned text on a gray background. The menu has an unordered list on a black background. The background of the list is red. Each item in the list is hyperlinked except for "Home". The unlinked text should be black, and the linked text should be white. When a user mouse over a link, the color of the text should change to black. There should be some space between…arrow_forwardCODE. ATTACH SCREENSHOT AS WELL. THUMBS DOWN FOR INCORRECT. OUTPUTarrow_forward
- Open index.html in your browser to view the file. Add the text, CH 5 Extend Your Knowledge, to the title element. Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules: Add a declaration for the position property with a value of -webkit-sticky. Add a declaration for the position property with a value of sticky. Add a declaration for the top property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position. In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations: Add a declaration for the position property with a value of relative. Add another declaration for the top property and specify a value of 90px. Add another declaration for the left property…arrow_forwardWrite the CSS for an id with the following attributes: float to the left of the page, light tan background, Verdana or sans-serif large font, and 20 pixels of padding.arrow_forwardthe given image, you have to make the text{xald:and italic. , hitmi code and output after domg it.arrow_forward
- Implement a Web Page with CSS stylesCreate a div element with a width and height of 500 px. Create a diagonal linear gradient using colors of the rainbow- Red, Orange, Yellow, Green, Blue, Indigo, Violet.arrow_forwardI need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions /* the styles for the elements */ * { margin: 0; padding: 0; } html { background-color: white; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 850px; margin: 0 auto; border: 3px solid #931420; background-color: #fffded; } a:focus, a:hover { font-style: italic; } /* the styles for the header */ header { padding: 1.5em 0 2em 0; border-bottom: 3px solid #931420; background-image: linear-gradient( 30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%); } header h2 { font-size: 175%; color: #800000; } header h3 { font-size: 130%; font-style: italic; } header img { float: left; padding: 0 30px; } .shadow { text-shadow: 2px 2px 2px #800000; } /* the styles for the main content */ main { clear:…arrow_forwardPlease help me with this 1. Make the body of the page have a background of tiled “waves.png” images. This image is in the images folder. 2. Add padding (10px) to the entire body of the page. 3. Add a top and bottom margin (10px) as well as padding (10px) to the each movie description. 4. Change the background of each movie description to white, and the background colour for the box enclosing the page content to the following RGB values: R = 246, G = 212, B = 212. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Movie Recommendations</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1> Movie Recommendations </h1> <h2> Some Science Fiction Movies Worth Watching </h2> </header> <div class="movie"> <h2> Ghost in the Shell <span…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning