WEB DEVELOPMENT: Need code for webpage specified below. MUST MATCH PHOTOS SHOWN
ID: 3876523 • Letter: W
Question
WEB DEVELOPMENT: Need code for webpage specified below. MUST MATCH PHOTOS SHOWN @ Bottom!! Make a simple web page. Create two files:content.html and style.css. Content.html will have all of the html content and will link to the style.css style-sheet.
In this web page, you should do the following:
1. Create a 6x6 table (inclusive of the header row) and fill in the table with your own contents.
-The upper left cell should be empty. The others should be non-empty.
-The table should have a caption detailing the contents of the table.
-The table should have a header section, all the cells in this section should have bold text (this is default).
-The first column of the table should have header cells that have italic text (these should not be bold).
-The table should have a footer section (this row is not counted in 6 rows in the table) made up of two cells, one should be 2 columns wide, the other should be 4 columns wide.
2. Create a list (ul, ol or dl) with at least 3 entries.
3. Create a div that is aligned to the left side of the page and takes up 3/4 of the page width, has a space of 20px between it and the previous element and has a class of 'outer-content'.
-Its background should be pink (or any color that looks like pink).
-Inside that div have another div called 'inner-content'.
-Its background should be blue (any kind of blue works).
-It should take up 3/4 of the parent divs width and should be centered.
4. Create two forms. One should submit via a post, the other via a get, they should have identical content.
-They should submit to http://classes.engr.oregonstate.edu/eecs/winter2015/cs290-400/tools/class-content/form_tests/check_request.php to better facilitate testing.
There should be 4 input types:
*A text input with a name attribute of 'text_input'
**A number input with a name attribute of 'numerical_input'
***A password input with a name attribute of 'password_input'
****A set of radio inputs-->They should be named 'candy'
These options should exist in this order
Snickers
Skittles
Mentos
Extra credit: Make the non-header rows alternate colors. To accomplish this you will need to use a pseudo-class called:nth-of-type()
Here is a picture of a site meeting the requirements (NOTE: There is a 2nd, identical form below the GET form that was cut off. It is the same in every way except it submits via POST instead of GET):
Who wins? Cell content indicates the status of the row entry Godzilla Batman Shaq Aaron Carter Abe Lincoln Godilla NA Batman Minor Win NA nor Loss Loss nknown nknown Total Victory Total Victory Total Loss Minor Loss Unknown Unknown Shaq Total loss Aaron Carter Unkown TotalLoss Minor Win NA Abe Lincoln Unknown Total Victory Unknown Footer 1 nknown /A Footer 2 Best language Wackyist Language SEGFAULTiest language Python Haskell Here is some content Some GET Data Text here: Number here: Password here: Select betwen: Snickers Skittles Mentos SubmitExplanation / Answer
Create a 6x6 table (inclusive of the header row) and fill in the table with your own contents.
<html>
<head>
<title> Displaying Table </title>
<head>
<body>
<!-- Table started here-->
<table border=1 cellspacing=0>
<!-- We will use caption tag for displaying the caption for the table -->
<caption> Computer Lab Time Table</caption>
<!-- font-weight and font-style are two attributes which are used for formatiing text. Thickness of the text is mentioned in font-weight and kind of style is mentioned in font-style -->
<thead>
<tr>
<td></td>
<td colspan=8>LAB 1 Time table</td>
</tr>
</thead>
<tr>
<th>Weekly TT </th>
<th>1</th>
<th> 2</th>
<th> 3</th>
<th> 4</th>
<th> 5</th>
</tr>
<tr>
<td> Monday</td>
<td>9A</td>
<td>5C</td>
<td>7C</td>
<td>L</td>
<td>10A</td>
</tr>
<td>Tuesday </td>
<td>9B</td>
<td>10A</td>
<td>8B</td>
<td>7A</td>
<td>3A</td>
<tr>
<td>Wednesday</td>
<td>L</td>
<td>L</td>
<td>8B</td>
<td>8C</td>
<td>7A</td>
</tr>
<tr>
<td>Thursday</td>
<td>8A</td>
<td>9A</td>
<td>8C</td>
<td>6C</td>
<td>6B</td>
</tr>
<tfoot>
<tr>
<td colspan=2></td>
<td colspan=4>*********************</td>
</tr>
</tfoot>
</table>
</body>
</html>
Create a list (ul, ol or dl) with at least 3 entries.
<html>
<head>
<title> list entries</list>
</head>
<body>
Various Chocolates Products in Market
<ul>
<li> 5 star</li>
<li> Dairy Milk</li>
<li> Perk<li>
<ul>
</body>
</html>
3. Create a div that is aligned to the left side of the page and takes up 3/4 of the page width, has a space of 20px between it and the previous element and has a class of 'outer-content'.
<html>
<head>
</head>
<Body>
<div>
<center>
<font size=28><b> Learning Portal</font><br>
</div>
<div class="outer-content">
<div class="inner-content" align="center">
Enter username:- <INPUT TYPE=TEXT ID='uid'>
<br><br>Enter Password:- <INPUT TYPE=password ID='pwd'>
<br><br>
User Type:- <select name="usertype" id="ut">
<option> Teacher
<option> student
<option> administrator
</select><br><br>
<INPUT TYPE=Button value="Login">
</div>
</div>
</BODY>
</html>
4. Create two forms. One should submit via a post, the other via a get, they should have identical content.
Get Method
<html>
<head>
</head>
<body>
<form action="http://classes.engr.oregonstate.edu/eecs/winter2015/cs290-400/tools/class-content/form_tests/check_request.php" method="get">
Enter Text: <Input type=text name="text_input"><br>
Enter Number:<Input type=text name="nemurical_input"><br>
Enter Password:<Input type=password name="password_input">
<input type="radio" name="candy" value="Snickers" >Snickers<br>
<input type="radio" name="candy" value="Skittles" >Skittles<br>
<input type="radio" name="candy" value="Mentos" >Mentos<br>
<input type=submit>
</form>
</body>
</home>
Post Method
<html>
<head>
</head>
<body>
<form action="http://classes.engr.oregonstate.edu/eecs/winter2015/cs290-400/tools/class-content/form_tests/check_request.php" method="post">
Enter Text: <Input type=text name="text_input"><br>
Enter Number:<Input type=text name="nemurical_input"><br>
Enter Password:<Input type=password name="password_input">
<input type="radio" name="candy" value="Snickers" >Snickers<br>
<input type="radio" name="candy" value="Skittles" >Skittles<br>
<input type="radio" name="candy" value="Mentos" >Mentos<br>
<input type=submit>
</form>
</body>
</home>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.