Question

In: Computer Science

4.8 LAB: News article (CSS) Create an external stylesheet so the provided HTML produces the following...

4.8 LAB: News article (CSS)

Create an external stylesheet so the provided HTML produces the following web page:

Example rattlesnake web page screenshot

Add CSS rules to styles.css for the given news article web page that matches the following styling:

Both article's images styled with a width of 300px
Article's <h1> tag styled with:
5px padding all around
Font family of Arial
Font size of 24px
Font color of white
Background color of red
Selecting the id of author-name-and-date, style the author name and date with:
Font family of Arial
Font size of 12px
Font color of lightgray
Article's text (<p> and <ol> tags) styled with:
Font family of Times New Roman
Font size of 16px
Font color of gray
Article's share links (<a> tags) styled with:
Font family of Arial
Font size of 12px
Font color of blue
Note: Colors, font sizes, padding, etc. must be exact.


****Here is the HTML Code ****
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet">
<title>5 Things to Know About Rattlesnakes and Their Babies</title>
</head>
<body>
<img src="http://www.arizona.edu/sites/default/files/UA_horiz_rgb_webheader_0.png">

<h1>5 Things to Know About Rattlesnakes and Their Babies</h1>

<p id="author-name-and-date">UA College of Pharmacy | Aug. 6, 2014</p>

<p>Arguably, snake season is year-round in Arizona, a state known for its rattlers. But baby rattlesnakes are born in July and August, making these two months especially dangerous for hikers, gardeners, children and others at high risk of exposure to rattlesnake bites.</p>

<img src="https://cdn.uanews.arizona.edu/s3fs-public/styles/2015_story_body_aspect_ratio_switcher/public/story-images/Snake%20bite%209-yr-old.jpg?OplFz4yPCASYlNqDwBjuNhjt0o6z_Djp&itok=9_xCW0fn">

<p>So far this year, 74 rattlesnake bites to humans have been reported to the Arizona Poison and Drug Information Center. Based at the University of Arizona College of Pharmacy, the center serves the entire state of Arizona with the exception of Maricopa County, providing free and confidential poison and medication information to callers around the clock.</p>

<p>Specialists answering the phones at the center regularly receive calls from Arizonans of all ages who don't realize they were bitten by a rattler. The poison center urges anyone who feels a mysterious sting, pinch or bite while outdoors to immediately call the center at 800-222-1222.</p>

<p>"We will ask a few questions that will help you either identify possible snakebite or eliminate it," said Keith Boesen, director of the Arizona Poison and Drug Information Center. "With snakebite, the sooner the medical treatment, the better the outcome, so calling us right away can make a very big difference for the victims and the medical teams treating them."</p>

<p>The center advises anyone who might come cross paths with rattlesnakes to be aware of these five things:</p>

<ol>
<li>Baby rattlesnakes range in length from 6 to 12 inches and are easily camouflaged by brush and grass.</li>
<li>Baby rattlesnakes are rattleless until they first shed their skins, so there will be no infamous "chica-chica" sound before they strike.</li>
<li>Despite their impish size, baby snakes have enough venom to be very dangerous if they bite a human.</li>
<li>Adult rattlesnakes do not always rattle an audible warning before or while they are biting.</li>
<li>It's a good idea to call the poison center if you notice an unidentified small cut or wound, even if you feel no pain. With the lack of telltale rattle warning, people can be bitten without knowing what has happened until they notice their symptoms and attribute them to a snakebite.</li>
</ol>

<p>Share: <a href="https://twitter.com/">Twitter</a> <a href="https://www.facebook.com/">Facebook</a> <a href="https://www.linkedin.com/">LinkedIn</a></p>
</body>
</html>

Solutions

Expert Solution

Dear Student ,

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

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

newsArticle.html :

<!DOCTYPE html>

<html>

<head>

<!-- <link> is used to refer to external stylesheet -->

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

<title>5 Things to Know About Rattlesnakes and Their Babies</title>

</head>

<body>

<img src="http://www.arizona.edu/sites/default/files/UA_horiz_rgb_webheader_0.png">

<h1>5 Things to Know About Rattlesnakes and Their Babies</h1>

<p id="author-name-and-date">UA College of Pharmacy | Aug. 6, 2014</p>

<p>Arguably, snake season is year-round in Arizona, a state known for its rattlers. But baby rattlesnakes are born in July and August, making these two months especially dangerous for hikers, gardeners, children and others at high risk of exposure to rattlesnake bites.</p>

<img src="https://cdn.uanews.arizona.edu/s3fs-public/styles/2015_story_body_aspect_ratio_switcher/public/story-images/Snake%20bite%209-yr-old.jpg?OplFz4yPCASYlNqDwBjuNhjt0o6z_Djp&itok=9_xCW0fn">

<p>So far this year, 74 rattlesnake bites to humans have been reported to the Arizona Poison and Drug Information Center. Based at the University of Arizona College of Pharmacy, the center serves the entire state of Arizona with the exception of Maricopa County, providing free and confidential poison and medication information to callers around the clock.</p>

<p>Specialists answering the phones at the center regularly receive calls from Arizonans of all ages who don't realize they were bitten by a rattler. The poison center urges anyone who feels a mysterious sting, pinch or bite while outdoors to immediately call the center at 800-222-1222.</p>

<p>"We will ask a few questions that will help you either identify possible snakebite or eliminate it," said Keith Boesen, director of the Arizona Poison and Drug Information Center. "With snakebite, the sooner the medical treatment, the better the outcome, so calling us right away can make a very big difference for the victims and the medical teams treating them."</p>

<p>The center advises anyone who might come cross paths with rattlesnakes to be aware of these five things:</p>

<ol>

<li>Baby rattlesnakes range in length from 6 to 12 inches and are easily camouflaged by brush and grass.</li>

<li>Baby rattlesnakes are rattleless until they first shed their skins, so there will be no infamous "chica-chica" sound before they strike.</li>

<li>Despite their impish size, baby snakes have enough venom to be very dangerous if they bite a human.</li>

<li>Adult rattlesnakes do not always rattle an audible warning before or while they are biting.</li>

<li>It's a good idea to call the poison center if you notice an unidentified small cut or wound, even if you feel no pain. With the lack of telltale rattle warning, people can be bitten without knowing what has happened until they notice their symptoms and attribute them to a snakebite.</li>

</ol>

<p>Share: <a href="https://twitter.com/">Twitter</a> <a href="https://www.facebook1.com/">Facebook</a> <a href="https://www.linkedin.com/">LinkedIn</a></p>

</body>

</html>

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

styles.css :

/* external stylesheet */

/* style rule for image */

img{

width:300px;

}

/* style rule for h1 */

h1{

padding: 5px;

font-family: Arial, Helvetica, sans-serif;

font-size: 24px;

color: white;

background-color: red;

}

/* style rule for id="author-name-and-date" */

#author-name-and-date{

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: lightgray;

}

/* style rule for p and ol */

p,ol{

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

font-size: 16px;

color: gray;

}

/* style for hyperlink */

a{

font-family: Arial;

font-size: 12px;

color: blue;

}

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

Output : Compile and Run newsArticle.html in the browser and will get the screen as shown below

Screen 1 :newsArticle.html

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

venereology answered 2 hours ago
Next > < Previous

Related Solutions

Given the html below, create css to produce the following illustrated color page output: Red for...
Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above">   I'm...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original code just add it to to make the next steps please: HTML: <nav> <ul class="Login-button"> LOG IN</ul> </nav> CSS: *{ margin: 0; padding: 0; list-style-type: none; } nav { height: 50px; background: #DEDFE0; display: flex; align-items: center; padding: 0 20px; } .login-button { padding: 5px 8px; cursor: pointer;} .login-button: hover { background: #BCBDC0; } PLEASE do the following: Create a transparent grey overlay over...
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...
Create CSS styling for this xml code 5.2. Change the CSS so only a single course...
Create CSS styling for this xml code 5.2. Change the CSS so only a single course is displayed. 5.2.1. You may add IDs or classes to the XML file a desired. <InformationSystems>    <Classes>        <CourseHeader>            <CourseNumber>CIS 145</CourseNumber>            <CourseName>Introduction to Relational Database</CourseName>            <Credits>5</Credits>        </CourseHeader>        <Description><![CDATA[Introduces relational database concepts and practices using business-related examples. OFTEC 111 or 108 recommended, or comparable competencies. Prerequisite: OFTEC 141 or MATH...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel and tourism company. Use between 8 and 12 pictures that will automatically change every 1 to 3 seconds. You may use the pictures from Assignment 1 and add more to the collection. The slide show will have the following features: Use a background image. The pictures must use a type of ‘transition’ ie Fade in/Fade out when the pictures change. Each picture must include...
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocks
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocksElliott university welcome block :2-3 pictures with bordersThree paragraphs describing a student experience the collegeAppropriate for the contentGallery page block:Consisting of 8 to 10 imagesFormatted for best loading on the web across all devicesText paragraph under each imageRemaining Two blocks can reflect content that you choose:Consisting of 3 paragraphs of text per blockConsisting of at least one image per blockLook...
Build a web page using an external CSS file based on the following specifications : a)...
Build a web page using an external CSS file based on the following specifications : a) The page must have a breaking point at 768px (desktop/mobile). b) The three sections contents (header, main and footer) must be full-width and no larger than 960px (horizontally centered block). Ma c) Header must be 80px high, full width and fixed and will show your name on the left /5 side. The burger icon should appear when the browser’s window is 768px or lower....
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT