1. Convert from inline CSS to internal CSS - file t1q1_solution_lastname.html <!
ID: 3725539 • Letter: 1
Question
1. Convert from inline CSS to internal CSS - file t1q1_solution_lastname.html
<!DOCTYPE html> <html> <head> <title>TWO DHTML PROBLEMS</title> </head> <body> <table> <th colspan="2">TWO PROBLEMS</th> <tr> <td>GRADE</td> <td>RECTANGLE</td> </tr> </table> </body> </html> ----------------------------------------------------------------------------- 2. Convert from inline CSS to external CSS - file t1q2_solution_lastname.html ----------------------------------------------------------------------------- <!DOCTYPE html> <html> <head><title>RECTANGLE PROBLEM</title> </head> <body> <form> <table> <tr><th colspan="2">RECTANGLE PROBLEM</th></tr> <tr> <td><label>Length:</label></td><td><input type="text"/> </td> </tr> <tr> <td><label>Width:</label></td><td><input type="text"/> </td> </tr> <tr> <td><label>Area:</label></td><td><input id="area" type="text" readonly/> </td> </tr> <tr> <td><label>Perimeter:</label></td><td><input type="text" readonly/> </td> </tr> <tr> <td colspan="2" > <center> <input type="button" value="Area" /> <input type="button" value="Perimeter" /> <input type="button" value="Both" /> <input type="reset" value="Clear" /> </center> </td> </tr> </table> </form> </body> </html> ----------------------------------------------------------------------------- 3. Convert from inline CSS to external CSS - file t1q3_solution_lastname.html ----------------------------------------------------------------------------- <!DOCTYPE html> <html> <head><title>SQUARE PROBLEM</title> </head> <body> <form> <table> <tr> <th colspan="2">SQUARE PROBLEM</th> </tr> <tr> <td><label>Enter side:</label></td> <td><input type="text"/></td> </tr> <tr> <td><label>Area:</label></td> <td><input type="text" readonly/></td> </tr> <tr> <td><label>Perimeter:</label></td> <td><input type="text" readonly/></td> </tr> <tr> <td colspan="2" > <center> <input type="button" value="Area"/> <input type="button" value="Perimeter"/> <input type="button" value="Both"/> <input type="button" value="Clear"/> </center> </td> </tr> </table> </form> </body> </html> ----------------------------------------------------------------------------- 4. Convert from inline CSS to external CSS - file t1q4_solution_lastname.html ----------------------------------------------------------------------------- <!DOCTYPE> <html> <head><title>SHIPPING PROBLEM2</title> </head> <body> <form> <table> <th colspan="2">SHIPPING</th> <tr> <td><label>Cart Price:</label></td> <td><input type="text" /> </td> </tr> <tr> <td><label>Shipping:</label></td> <td><input type="text" readonly/></td></tr> <tr> <td><label>Cost:</label></td> <td><input type="text" readonly/></td></tr> <tr> <td colspan="2" > <input type="button" value="REGULAR" /> <input type="button" value="EXPRESS" /> <input type="button" value="OVERNIGHT" /> <input type="button" value="CLEAR" /> </td> </tr> </table> </form> </body> </html>
Explanation / Answer
1.
<!DOCTYPE html>
<html>
<head>
<title>TWO DHTML PROBLEMS</title>
<style>
table{
border:solid black 5px;
}
th{
background:black;
color:white;
text-align:middle;
}
td{
border:solid black 5px;
}
</style>
</head>
<body>
<table>
<th colspan="2" >TWO PROBLEMS</th>
<tr> <td>GRADE</td>
<td>RECTANGLE</td>
</tr>
</table>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head><title>RECTANGLE PROBLEM</title>
<link rel="stylesheet" href="t1q2_solution_lastname.css">
</head>
<body>
<form>
<table>
<tr><th colspan="2">RECTANGLE PROBLEM</th></tr>
<tr> <td><label>Length:</label></td><td><input type="text" /> </td> </tr>
<tr> <td><label>Width:</label></td><td><input type="text" /> </td> </tr>
<tr> <td><label>Area:</label></td><td><input id="area" type="text" readonly /> </td> </tr>
<tr> <td><label>Perimeter:</label></td><td><input type="text" readonly /> </td> </tr>
<tr>
<td colspan="2" >
<center>
<input type="button" value="Area" />
<input type="button" value="Perimeter" />
<input type="button" value="Both" />
<input type="reset" value="Clear" />
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
table{
background-color:orange;
border:solid black 7px;
border-radius:25px;
}
th{
color:white;
background-color:black;
border:solid black 2px;
outline:solid black 2px;
}
input[type=text]{
background-color:#DEDEE6;
border:4px solid black;
}
input[type=button], input[type=reset]{
color:white;
background-color:black;
border:1px solid white;
}
3.
<!DOCTYPE html>
<html>
<head><title>SQUARE PROBLEM</title>
<link rel="stylesheet" href="t1q3_solution_lastname.css">
</head>
<body>
<form>
<table>
<tr>
<th colspan="2">SQUARE PROBLEM</th>
</tr>
<tr>
<td><label>Enter side:</label></td>
<td><input type="text" id="textRed" /></td>
</tr>
<tr>
<td><label>Area:</label></td>
<td><input type="text" readonly class="textYellow" /></td>
</tr>
<tr>
<td><label>Perimeter:</label></td>
<td><input type="text" readonly class="textYellow" /></td>
</tr>
<tr>
<td colspan="2" >
<center>
<input type="button" value="Area" class="red" />
<input type="button" value="Perimeter" class="white" />
<input type="button" value="Both" class="red" />
<input type="button" value="Clear" class="white" />
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
table{
color:white;
background-color:blue;
border:solid black 7px;
border-radius:25px;
}
th{
color:white;
background-color:black;
border:solid black 2px;
outline:solid black 2px;
}
.red{
color:white;
background-color:black;
border:1px solid red;
}
.white{
color:white;
background-color:black;
border:1px solid white;
}
.textYellow{
background-color:#DEDEE6;
border:4px solid yellow;
}
#textRed{
background-color:#DEDEE6;
border:4px solid red;
}
4.
<!DOCTYPE>
<html>
<head><title>SHIPPING PROBLEM2</title>
<link rel="stylesheet" href="t1q4_solution_lastname.css">
</head>
<body>
<form>
<table>
<th colspan="2">SHIPPING</th>
<tr>
<td><label>Cart Price:</label></td>
<td><input type="text" /> </td>
</tr>
<tr>
<td><label>Shipping:</label></td>
<td><input type="text" readonly /></td></tr>
<tr>
<td><label>Cost:</label></td>
<td><input type="text" readonly /></td></tr>
<tr>
<td colspan="2" >
<input type="button" value="REGULAR" id="blackBtn" />
<input type="button" value="EXPRESS" id="blueBtn" />
<input type="button" value="OVERNIGHT" id="orangeBtn" />
<input type="button" value="CLEAR" id="whiteBtn" />
</td>
</tr>
</table>
</form>
</body>
</html>
table{
color:black;
background-color:orange;
border:solid black 6px;
border-width:4px;
}
th{
color:white;
background-color:black;
outline-style:solid;
outline-width:2px;
border:2px solid black;
}
input[type=text]{
background-color:#DEDEE6;
border:4px solid black;
}
#blackBtn{
color:black;
background-color:white;
border:1px solid white;
}
#blueBtn{
color:blue;
background-color:white;
border:1px solid white;
}
#orangeBtn{
color:orange;
background-color:black;
border:1px solid white;
}
#whiteBtn{
color:white;
background-color:black;
border:1px solid white;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.