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 containingUniversityLogo.pngand alt attribute containingLogo 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 containingSnakeBite.jpgand alt attribute containingSnake 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 <p> tag.
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
<title>. - Use
<h1>tags containing the hometown name followed by 3 sections, each using<section>tags. - 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<section>tags with<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.
Use a <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
<cite>tag.
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