Specifications Please use your text editor of choice to create orderup.css , and
ID: 3700284 • Letter: S
Question
Specifications
Please use your text editor of choice to create orderup.css, and it must link as an external CSS.
orderup.css
For this orderup.css, you need to:
- Must use at least one HTML selector that applies to all tags of a specific type. i.e. body {...}
- Must use at least one ID selector. i.e. #myid {...}
- Must use at least one Class selector. i.e. .alert{...}
Add one picture of your business on the front page, can be of you, random building, or some logo, or any picture (the point is to embed a picture in the webpage)
This is a simple assignment so if you do the things listed above, even if simple, you will get full credit. This assignment is designed for extra credit so I will give extra points to those who put some decent styling into their webpages (trust me it is worth the extra effort). Submit a word doc with the extra changes you made beyond the ones described above
Submission
Please submit the following
orderup.html
<html>
<head>
<title>Orderup</title>
</head>
<body>
<h1>Order Up!</h1><br>
<h3>Place an order</h3>
<section>
<form id=payment action="file:///C:/Users/1515590036E/Desktop/results.html" method="get">
<fieldset>
<legend>Billing address</legend>
<label for=name>First Name</label>
<input id=name name=fname type=text placeholder="First name" required autofocus /><br>
<label for=name>Last Name</label>
<input id=name1 name=lname type=text placeholder="Last name" required autofocus /><br>
<label for=address>Street Address</label>
<input id=addr name=addr type=text placeholder="street address" required autofocus /><br>
<label for=address>City</label>
<input id=city name=city type=text placeholder="city" required autofocus /><br>
</text>
<label for=country>State</label>
<select>
<option value="AL">Alabama (AL)</option>
<option value="AK">Alaska (AK)</option>
<option value="AZ">Arizona (AZ)</option>
<option value="AR">Arkansas (AR)</option>
<option value="CA">California (CA)</option>
<option value="CO">Colorado (CO)</option>
<option value="CT">Connecticut (CT)</option>
<option value="DE">Delaware (DE)</option>
<option value="DC">District Of Columbia (DC)</option>
<option value="FL">Florida (FL)</option>
<option value="GA">Georgia (GA)</option>
<option value="HI">Hawaii (HI)</option>
<option value="ID">Idaho (ID)</option>
<option value="IL">Illinois (IL)</option>
<option value="IN">Indiana (IN)</option>
<option value="IA">Iowa (IA)</option>
<option value="KS">Kansas (KS)</option>
<option value="KY">Kentucky (KY)</option>
<option value="LA">Louisiana (LA)</option>
<option value="ME">Maine (ME)</option>
<option value="MD">Maryland (MD)</option>
<option value="MA">Massachusetts (MA)</option>
<option value="MI">Michigan (MI)</option>
<option value="MN">Minnesota (MN)</option>
<option value="MS">Mississippi (MS)</option>
<option value="MO">Missouri (MO)</option>
<option value="MT">Montana (MT)</option>
<option value="NE">Nebraska (NE)</option>
<option value="NV">Nevada (NV)</option>
<option value="NH">New Hampshire (NH)</option>
<option value="NJ">New Jersey (NJ)</option>
<option value="NM">New Mexico (NM)</option>
<option value="NY">New York (NY)</option>
<option value="NC">North Carolina (NC)</option>
<option value="ND">North Dakota (ND)</option>
<option value="OH">Ohio (OH)</option>
<option value="OK">Oklahoma (OK)</option>
<option value="OR">Oregon (OR)</option>
<option value="PA">Pennsylvania (PA)</option>
<option value="RI">Rhode Island (RI)</option>
<option value="SC">South Carolina (SC)</option>
<option value="SD">South Dakota (SD)</option>
<option value="TN">Tennessee (TN)</option>
<option value="TX">Texas (TX)</option>
<option value="UT">Utah (UT)</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</li>
</ol>
</fieldset>
</form>
</section>
</body>
</html>
results.html
orderup.css
Word document of extra additions if you made any
Explanation / Answer
Step 1:
In this first we have to create css file called orderup.css. css is nothing but cascading style sheet. the main use of css file applying styles to the html elements. there are 3 ways to apply styles for html elements.
1. Inline style sheet:
It is apply to unique elements.
Syntax:
<h1 style"color:blue">Order</h1>
2.Internal Style Sheet:
This is defined within style element in the head section.
<head>
<style>
body {
background-color: yellow;
}
</style>
</body>
3.External Style Sheet:
Use link tag in head section. it applys css too who;e web page.
<head>
<link rel="stylesheet" type="text/css" href="orderup.css">
</head>
In our requirement i used external style sheet,
Below is the code for orderup.css
body {
background-color: lightblue;
}
#billing {
color:blue;
}
.title {
color: red;
}
{
color:#3535465;
}
In the above css file i used different selectors like claas, id, element selectors.
Id Selector:
The is used to specify a style for a single, unique element.
This uses the id attribute of the HTML element, and is defined with a "#".
Class Selector:
This uses the class attribute of the html element and define with ".".
Element Selector:
This is used to apply for entire html elemnt where ever used.
Example:
h1{
color:red;
}
In the above css file i used color property only. instead of this we can use any of the other properties like font size, font style, alignment properties..etc.
Step 2:
Create orderup.html
Below is the code for orderup.html,
<html>
<head>
<title>Orderup</title>
<link rel="stylesheet" type="text/css" href="orderup.css">
</head>
<body>
<h1 class="title">Order Up!</h1><br>
<h3 class="title">Place an order</h3>
<section>
<body>
<form id=payment action="file:///C:/results.html" method="get">
<img src="store.jpg" alt="Furniture store" width="1000" height="1000">
<fieldset>
<legend id="billing">Billing address</legend>
<label for=name>First Name</label>
<input id=name name=fname type=text placeholder="First name" required autofocus /><br>
<label for=name>Last Name</label>
<input id=name1 name=lname type=text placeholder="Last name" required autofocus /><br>
<label for=address>Street Address</label>
<input id=addr name=addr type=text placeholder="street address" required autofocus /><br>
<label for=address>City</label>
<input id=city name=city type=text placeholder="city" required autofocus /><br>
</text>
<label for=country>State</label>
<select>
<option value="AL">Alabama (AL)</option>
<option value="AK">Alaska (AK)</option>
<option value="AZ">Arizona (AZ)</option>
<option value="AR">Arkansas (AR)</option>
<option value="CA">California (CA)</option>
<option value="CO">Colorado (CO)</option>
<option value="CT">Connecticut (CT)</option>
<option value="DE">Delaware (DE)</option>
<option value="DC">District Of Columbia (DC)</option>
<option value="FL">Florida (FL)</option>
<option value="GA">Georgia (GA)</option>
<option value="HI">Hawaii (HI)</option>
<option value="ID">Idaho (ID)</option>
<option value="IL">Illinois (IL)</option>
<option value="IN">Indiana (IN)</option>
<option value="IA">Iowa (IA)</option>
<option value="KS">Kansas (KS)</option>
<option value="KY">Kentucky (KY)</option>
<option value="LA">Louisiana (LA)</option>
<option value="ME">Maine (ME)</option>
<option value="MD">Maryland (MD)</option>
<option value="MA">Massachusetts (MA)</option>
<option value="MI">Michigan (MI)</option>
<option value="MN">Minnesota (MN)</option>
<option value="MS">Mississippi (MS)</option>
<option value="MO">Missouri (MO)</option>
<option value="MT">Montana (MT)</option>
<option value="NE">Nebraska (NE)</option>
<option value="NV">Nevada (NV)</option>
<option value="NH">New Hampshire (NH)</option>
<option value="NJ">New Jersey (NJ)</option>
<option value="NM">New Mexico (NM)</option>
<option value="NY">New York (NY)</option>
<option value="NC">North Carolina (NC)</option>
<option value="ND">North Dakota (ND)</option>
<option value="OH">Ohio (OH)</option>
<option value="OK">Oklahoma (OK)</option>
<option value="OR">Oregon (OR)</option>
<option value="PA">Pennsylvania (PA)</option>
<option value="RI">Rhode Island (RI)</option>
<option value="SC">South Carolina (SC)</option>
<option value="SD">South Dakota (SD)</option>
<option value="TN">Tennessee (TN)</option>
<option value="TX">Texas (TX)</option>
<option value="UT">Utah (UT)</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</li>
</ol>
<input type="submit" value="Submit">
</fieldset>
</form>
</section>
</body>
</html>
In this i used img tag for inserting image into the web page.
added submit button. after clicking on the submit button page is redirecting to result.html page.
For this i specified action attribute in form tag.
Example:
<form id=payment action="file:///C:/results.html" method="get">
Otherthan this i applied few of the style sheets.
Step 3:
Finally i created the results.html page.
Below is the code for results.html,
<html>
<head>
<title>Orderup</title>
<link rel="stylesheet" type="text/css" href="orderup.css">
</head>
<h2>Order Confirmed Successfully Confirmed and Placed.<h2>
</html>
In the above code i used simple heading tag called h2 and displayed text message.
if you want can apply style sheets also.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.