HomeworkLib
Question

2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions74/cfi/194!/4/4@0.00:0.00 Applying CSS Styles to Webpages HTML Chapter 4 HTML 177 6. In the head section of the index04.htmlHTML 178 HTML Chapter 4 Applying CSS Styles to Webpages 12. Clear the float for the nav section with the following style navApplying CSS Styles to Webpages HTML Chapter 4 HTML 179 In this exercise you applied linked, embedded, and inline styles to s

2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions: In this exercise, you will use your text editor to create external, embedded, and inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe header, nav, main, and tooter and a div element that surrounds all of the content to center the content on the page. You will also float an image to the left so that some of the content can fill the empty space to margins and borders to give your page a professional touch. The completed home page is shown in Figure 4-44. You will also use professional web development practices to indent, space, comment, and validate your code. ht of the image. Finally, you will clear the float and add the rig Durango Jewelry and Gem Shop Figure 4-44 Perform the following tasks I. Open your text editor, and then open the apply04.html file from the Data Files for Students. Use the File Save As feature to save the webpage in the chapter04lapply folder with the name index04.html to create the home page. 2. Modify the comment at the top of the index.html page to include your name and today's date. 3.Start a new file in your text editor, and save it in the chapter04Lapply folder with the name styles04.css to create a style sheet. 4. Enter a CSS comment as the first line of the external style sheet with your name and today's date. Recall that CSS comments are entered within / and characters. 5. Style the body element with a uniform black text color and light-green background color bodycolor: 000000 background-color: #D9P1C1 ;
74/cfi/194!/4/4@0.00:0.00 Applying CSS Styles to Webpages HTML Chapter 4 HTML 177 6. In the head section of the index04.html file, enter an element to connect the page to the external style sheet: Save your changes. Open or refresh index04.html in a browser to make sure that the style sheet is correctly connected to the HTML file 7. Your next task is to center the content on the webpage. To do this, add tags to surround the content in the wireframe, and then apply a style to center the content within the tag. opening tag just after the div id="outerwrapperT> b. In index04 html, insert the main border-radius: 2em) /atyle 15. In index04.hl, insert espa and tags around "Smoky quartz" and "Soulmate Crystal" in the first list item in the unordered list in the div id-"main" section. Use the style attribute to give each opening tag? b. What is the primary advantage of using an external versus embedded style sheet for the majority of your website styles? c. In step 15, two tags were given the same inline style. Why would you use inline styles versus embedded or external styles?
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "index04.html" is created, which contains following code.

index04.html :

<!--

Name :Sachin Tendulkar,

Date :28/05/2019

-->

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Durango Jewelry Pendant Gen</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- link to external style sheet file -->

<link rel="stylesheet" href="styles04.css">

<!-- embedded style sheet -->

<style>

#main{

border-radius: 2em;

}

</style>

</head>

<body>

<div id="outerwrapper">

<header>

<img class="addrightmargin" src="wirewrap01.jpg" alt="smoky quarts pendent" width="171" height="171">

<h1>Durango Jewelry and Gen Shop</h1>

<h2>Distinguished wire-wrapped jwelry, pendants, and gens</h2>

</header>

<nav>

<ul>

<li> <a href="classics.html">Classics</a>&nbsp;</li>

<li><a href="specials.html">Specials</a>&nbsp;</li>

<li><a href="gems.html">Gems</a>&nbsp;</li>

<li><a href="contact.html">Contact Me</a>&nbsp; </li>

</ul>

</nav>

<div id="main">

<p>Durango Jewelry and Gem Shop pampers you with one-of-a-kind , high

quality wire wrapped pendants and gems.

Our works of art are inspired by nature geometries and the vast

beauty of mother nature.</p>

<p>The featured pendant provides these characteristics:</p>

<ul>

<li>gemstone is <span style="font-weight:bold;"> "Smoky quarts"</span> also called a <span style="font-weight:bold;">"Soulmate Crystal"</span></li>

<li>gemstone is over two carats</li>

<li>wire is a mixture of antique colored copper and .930 pure silver</li>

<li>high-quality silver alloy requires very little polishing</li>

<li>pendent is approximately 4cm x 3cm</li>

</ul>

<p>Come to Durango Jewelry and Gem Shop to make your stay in Durango a life-time treasure</p>

</div>

<footer>

<p>Durango Jewelry and Gem Shop,10101 Main Street,Durango,Co | Established 1979</p>

<a href="mailto:gemologist@durangogen.com">Contact us through email</a>

</footer>

</div> <!--close the outerwrapper-->

</body>

</html>

***********************

index04.css :

/*

Name :Sachin Tendulkar,

Date :28/05/2019

*/

/* style rule for the body */

body{

color: #000000;

background-color: #D9F1C1;

}

/* style rule for the id=outerwrapper */

#outerwrapper{

width: 80%;

margin: 0 auto 0 auto;

}

/* style rule to apply font */

header,nv,footer{

font-family: calibri , arial,sans-serif;

}

/* style rule for id=main */

#main{

font-family: garamond,'Times New Roman',serif;

background-color: #F0F9E6;

padding: 10px;

}

/* style rule for footer */

footer{

font-size: 0.75em;

text-align: center;

}

/* style for image */

img{

float:left;

}

/* styel for nav */

nav{

clear: both;

}

/* style for class=addrightmargin */

.addrightmargin{

margin-right: 2%;

}


======================================================

Output : Open web page Index04.html in the browser and will get the screen as shown below

Screen 1 :index04.html

Durango Jewelry Pendant GenX+ KC localhost:8080/Durango/Index04.html Durango Jewelry and Gen Shop ain{TODAY} OD TODAY Disting

Screen 2:Screen when index04.html validated at https://validator.w3.org

¥ Showing results for contents of /X ← → 율 https://validator.w3.org/nu/#tectarea < I DOCTYPE html> <html lang-en <head> tit

Screen 3:Screen when index04.css validated at https://jigsaw.w3.org/css-validator

EI W3C CSS Validator results for Te С https://jigsaw.ws.org/css-validator/validator W3C The W3C CSS Validation Service W3C CS

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instru...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...

    n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapter; Lab 3 requires you to dive deeper into a topic covered in the chapter. Lab 1: Creating an External Style Sheet for City Farmer Problem: You work for a local but rapidly growing gardening supply company called City Farmer that specializes in products that support food self-sufficiency. The company has hired you to help create the...

  • Create an external style sheet named Lab05.css. In this style sheet put the following styles: At the top of the style sheet, add the line: @charset "utf-8"; Add this comment: /* Lab 5 Extern...

    Create an external style sheet named Lab05.css. In this style sheet put the following styles: At the top of the style sheet, add the line: @charset "utf-8"; Add this comment: /* Lab 5 External Style Sheet - Brandon  */ Style the h1 element with a background color of lightgreen and center the text. Style the p element with a blue text color and yellow background color. Style the p element of class .firstclass with a green text color. Style the...

  • 1. An _____ lets you place all of your CSS style definitions within one file that...

    1. An _____ lets you place all of your CSS style definitions within one file that you then reference from within each of your HTML page files. Group of answer choices external style set external sheet external style sheet external set sheet 2. Why should a designer use an external style sheet? Select all that apply. Group of answer choices One file controls all style elements for the entire website Removes the need to use HTML Make changes quickly External...

  • HTML Decide on a subject for your first web page. All page content must be related...

    HTML Decide on a subject for your first web page. All page content must be related to this subject. Create your first web page. Name the file Brandon-Lab01.html. The page must contain the foundation !DOCTYPE, html, head, and body tags. The html tag must also include the lang attribute with a value of en Place the following in the head of your page: Title the page Lab 1 - Brandon. Add the meta character set tag. A <link href="Lab01.css" rel="stylesheet"...

  • I have never created an external style before. This is the main Html that I am...

    I have never created an external style before. This is the main Html that I am using. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience...

  • Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following:...

    Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following: The project should include the following pages: home page form page 4 or more additional pages to render complete coverage a site map – three levels or more (not included in the page count) The pages should contain: a two- or three-column layout CSS must be used for layout one external CSS file will contain formatting for the site (the bulk of css goes...

  • PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the...

    PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the body element the id of TOOscary. Give the div the id of ghost. At the bottom of the page (just before the closing body tag) insert a script element. In the script element insert an assignment statement to save the content of the webpage using the variable candy. Hint: candy= document.getElementById(‘TOOscary’).innerHTML; We want to save it so we can bring it back after we...

  • Can someone please verify if the answers are correct? thanks 1₧Which type of select does the...

    Can someone please verify if the answers are correct? thanks 1₧Which type of select does the # symbol represent? id class tag 2- Which selector controls the style of an element when the mouse moves over the element? :onHover :mouseOver :over :hover 3- Which property changes the background color of an element? background-color: bground: bg-color: b-color: 4-In which way can a set of CSS styles be inserted into multiple HTML pages? All of the above External style sheet Internal style...

  • // I need help in creating and publishing a website with two pages for this assignment,...

    // I need help in creating and publishing a website with two pages for this assignment, I am new to this and need a bit of help as to what and how many HTML files I need to create, and CSS files. If anyone could send me a sample code or anything to start out with it would be appreciated ! I have attached the specifications and requirements below CPI 101 Introduction to Informatics Homework #1 Check Out My Website!...

  • i need help with this homework webpage and code too: The webpage must include: Global Structure...

    i need help with this homework webpage and code too: The webpage must include: Global Structure Tags Text Tags Images   Your first page must be named index.html Include a table within your site, challenge yourself to add a header in the table, and choose interesting border and/or cell formatting. Include a hyperlink within your site. Include an image in your site. Include a form in your site to demonstrate understanding of a variety of form components (the form does not...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT