Create a web page based on this news article: https://uanews.arizona.edu/story/5-things-to-know-about-rattlesnakes-and-their-babies
Your web page should include the following components (in order):
<title>tag with content: 5 Things to Know About Rattlesnakes and Their Babies
- UA logo as
<img>tag with src attribute containing
UniversityLogo.pngand alt attribute containing
Logo of The University of Arizona.
<h1>tag with content: 5 Things to Know About Rattlesnakes and Their Babies
<p>tag with content: UA College of Pharmacy | Aug. 6, 2014
<p>tag with content: 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.
- Article photo as
<img>tag with src attribute containing
SnakeBite.jpgand alt attribute containing
Snake bite on side of child's foot.
- 4 more
<p>tags with contents (in order):
- 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.
- 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.
- “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.”
- The center advises anyone who might come cross paths with rattlesnakes to be aware of these five things:
- An ordered list with the following item contents (in order):
- Baby rattlesnakes range in length from 6 to 12 inches and are easily camouflaged by brush and grass.
- Baby rattlesnakes are rattleless until they first shed their skins, so there will be no infamous “chica-chica” sound before they strike.
- Despite their impish size, baby snakes have enough venom to be very dangerous if they bite a human.
- Adult rattlesnakes do not always rattle an audible warning before or while they are biting.
- 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.
<p>tag containing 3
<a>tags with content and href of:
- Twitter and https://twitter.com/
- Facebook and https://www.facebook.com/
- LinkedIn and https://www.linkedin.com/
The ordered list must not be inside a
2.2 LAB: Hometown web page (HTML)
Create a web page about your hometown like the example below.
Your web page must meet the following requirements:
- Use an appropriate title for the web page
<h1>tags containing the hometown name followed by 3 sections, each using
- The 1st section should contain a heading in
<h2>tags entitled “Location”. A single paragraph should briefly describe the town’s location.
- The 2nd section should contain a heading in
<h2>tags entitled “About”. Create at least 3 subsections that each use
<h3>headings. Each subsection should have a single paragraph describing something about your hometown.
- The 3rd section should contain a heading in
<h2>tags entitled “Things To Do”. Create an unordered list of interesting things to do in your hometown.
2.3 LAB: Photo gallery table (HTML)
Create a table that displays a photo gallery like the web page below.
<caption> tag that describes the photo gallery’s theme. The table should have 3 columns and 5 rows:
- The 1st row should use
<th>tags to list the Photo, Date, and Description headings.
- The 2nd – 4th rows should display the given vacation images in the 1st column with an alt attribute and brief photo description, a date when the photo was taken in the 2nd column, and a lengthier photo description in the 3rd column.
- The 5th row should span all 3 columns and contain copyright information, including the copyright symbol.
2.4 LAB: Poem (HTML)
Create a web page that displays the poem below.
- Use 2 paragraph tags for the stanzas and
<br>tags where necessary to keep the correct formatting.
- Use a 3rd paragraph for the author and date, and enclose the author and date in a
I'm Nobody! Who are you? Are you - Nobody - Too? Then there's a pair of us! Don't tell! They'd banish us - you know! How dreary - to be - Somebody! How public - like a Frog - To tell one's name - the livelong June - To an admiring Bog! By Emily Dickinson (1891) 2.5 LAB: HTML practice The template contains an <h1> tag for each question, 1 - 7. Each question is followed by an <hr> tag. Implement the solution to each question between the </h1> and <hr> tags. Do not remove any existing tags in the template. 1. (2 points) Given: Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. -- Steve Jobs a. Copy and paste the entire quote. b. Use 2 paragraph tags, one for the quote and another for -- Steve Jobs. c. Put an <i> tag in the first paragaph, enclosing all quote content. 2. (1 point) Note: For questions 2 and 3, place each answer inside a <p> tag. Also use character entities so the actual tags are visible on the web page. Ex: <img src="test.png"> renders as <img src="test.png"> Question 2: Print an ampersand in an HTML comment. <!-- & --> 3. (1 point) Using character entities for < and >, print: <p>Nice!</p> See note in question 2 for character entity example. 4. (1 point) Create a link to stuff.html, which is in the same directory as your .html solution file. The content of the <a> tag should be "Go to my stuff", without the quotes. 5. (1 point) Create an image link to https://www.zybooks.com/, using the zyBooks_logo.png image, which is in the same directory as your .html solution file. 6. (1 point) Recreate the list shown in the image below: Ordered list with 2 items: 1. Desktop 2. Mobile. Desktop has unordered sublist: Linux, Mac OS, Windows. Mobile has unordered sublist: Android, iOS. The outer list is an order list, and the nested lists are unordered. 7. (3 points) Create a table with 3 rows and 3 columns. The top row contains 1 cell that spans 3 columns. The leftmost cell on the next row spans 2 rows. All other cells span a single row and column. Each cell has a number. The numbers can be put in an <h1> tag if desired. The image below shows what the table should look like using <h1> tags around the numbers. To help illustrate cell location and row/column spans, the image of the table with borders is provided below. Borders are not required for credit in this lab, but can be added if desired. 2.6 LAB: Fan web page (HTML) Create a web page about one of your favorite musicians, similar to the example below. Example hometown web page screenshot Use the following HTML containers: <header> with <h1> tags that contain the musician's name <main> with 2 paragraphs: 1st paragraph gives some background information 2nd paragraph links to at least one website about the musician <footer> that lists who created the web page 2.7 LAB: Form for joining a social network (HTML) Create a web form as shown below that allows the user to enter personal information for joining a social network. The web page uses CSS to align the form widgets vertically. Example social network web page screenshot The form should: Use the POST method and the "multipart/form-data" enctype Submit to https://wp.zybooks.com/form-viewer.php Use a <label> for each form field and the label text shown in the image above Use a <div> to surround each label and form widget and a <div> around the submit button Use a text <input> with name and id "fullName" to get the user's name Use a text <input> with name and id "email" to get the user's email address Use a <textarea> with 3 rows, 50 columns, and name and id "about" to get a short description about the user Use a text <input> with type "file" and name and id "picture" to get the user's image Use a submit <input> button Use the required attribute for name and email fields 2.8 LAB: Happy birthday message creator (HTML) Edit the given web form that allows the user to enter a birthday message and select various message options. The web page uses CSS to align the form widgets vertically. The web page should look like the following: Example happy birthday web page screenshot The form should: Use the regular expression [a-zA-Z0-9-_\.]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)* for the email address <input> to verify the user enters what looks to be an email address Use a date <input> for specifying a date to send the message Use a color <input> for selecting the message color Use a number <input> with a default value of 0, minimum of 0, and maximum of 10 for number of times the message blinks Use a range <input> with a default value of 20, minimum of 0, and maximum of 50 for the music volume Use a submit <button> that reads "Send Birthday Message" Specify an id attribute for all form elements that matches the given for attribute of each associated <label> Specify a name attribute for all form elements that matches each element's id attribute 2.9 LAB: Starting lineup (HTML) Create a web form as shown below that allows the user to select a team's starting lineup for a game. Example starting lineup web page screenshot The form should: Use the POST method Submit to https://wp.zybooks.com/form-viewer.php Use a <p> to surround each label and form widget Use radio buttons for choosing Draft or Final with the name attribute "status" and values "Draft" and "Final" Make the Final radio button checked by default Add a <label> to each radio button so clicking the label text selects the radio button Use a drop-down with the following dates: March 20, March 24, April 2, April 6, April 13. The <select> name attribute should be "gameDate", and each <option> should use a value identical to the option's date. Use check boxes for choosing players: Aarav Agarwal, Ava Johnson, Julio Ortiz, Liam Rubio, Emma Witherspoon. The name attribute "player" should be used for all check boxes, and each check box should use a value identical to the player's name. Add a <label> to each checkbox so clicking the label text selects the checkbox Use a submit <input> with value "Submit" 4.1 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. The following style rules should be added to styles.css: The default fonts (in order of priority) should be Roboto, Helvetica, and sans-serif The heading "Comparison of Dealer Incentives and Loan Offers" should be 16px font using color #444444 and have centered text Define a container class whose contents is centered, has a 5 pixel margin, and defines a font size of 13px Each offer is defined in a <div> tag with the class offer. Define the offer class such that: Each offer is displayed inline-block, with a fixed width of 400 pixels, a 4 pixel margin, and centered text Each offer has a 1 pixel solid border using color #cccccc with a radius of 1 pixel Each offer uses a shadow defined as: box-shadow: 0px 2px 2px #dddddd, 0px 0px 5px #dddddd; The offer title is defined in a <div> tag with offerTitle class. Define the offerTitle class such that: The title uses 14px bold font with color #ffffff The title's background is colored #00b3b3 The title has no margin and 15 pixels of padding The offer contents are defined in a <div> tag with class offerContents. Define the offerContents class such that: Each offer contents div has 20 pixels of padding, a 2 pixel border radius for the bottom border, and background colored #fafafa Define CSS rules such that all tables have the following styling: The table should have a width of 100%, background colored #ffffff, no border spacing, a shadow defined as: box-shadow: 0px 2px 2px #dddddd, 0px 0px 5px #dddddd; Header cells should use a 12px bold font with color #777777 Data cells should use a font lighter than normal weight with color #444444 Header cells should have 10 pixels of padding and no margin Data cells should have 10 pixels of padding on the left and right, 20 pixels of padding on top and bottom, and no margin Both header cells and data cells should left align text Both header cells and data cells should have a solid bottom border of 1 pixel using color #f1f1f1 Define a class finalValue that defines a bold font weight with color #2222ff Add CSS rules to the embedded stylesheet so each element uses the following styles: <body> uses Arial, Helvetica, sans-serif font family, 18px font size, and #EDF4FB background color <h1> uses RGB (26, 69, 107) font color <li> uses #296CA8 font color <span> with "age" class uses an italic font style <span> with "recommended" class has a yellow background color and underlined text