2020-10-05
Practice Midterm Solutions.
On practice midterm day, please post your problem solutions to the Practice Midterm
to this thread.
Best,
Chris
On practice midterm day, please post your problem solutions to the Practice Midterm
to this thread.
Best,
Chris
Problem # 4: Briefly explain the box model used in rendering HTML elements, labeling its parts. Give stylings for each of these parts for a div tag where the sizes of the parts make use of the last digits of your student ID.
The box model is used in html to help with style layout, and has several parts: the margin, which is the amount of free space around the box, the border, which is a usually solid border that separates the box's content from the outside, the padding, which is like the margin but in between the border and content, and finally the content, which is where you put the lines/picutres/ whatever that you want to be shown within the box. an example of such, using a div tag is:
div {
width: 6px; border: 4px; padding: 7px; margin: 7px;}
Problem # 4: Briefly explain the box model used in rendering HTML elements, labeling its parts. Give stylings for each of these parts for a div tag where the sizes of the parts make use of the last digits of your student ID.
The box model is used in html to help with style layout, and has several parts: the margin, which is the amount of free space around the box, the border, which is a usually solid border that separates the box's content from the outside, the padding, which is like the margin but in between the border and content, and finally the content, which is where you put the lines/picutres/ whatever that you want to be shown within the box. an example of such, using a div tag is:
div {
width: 6px;
border: 4px;
padding: 7px;
margin: 7px;
}
Question 4:
The box model is made up of 4 main parts: the margin, border, padding, and content. The margin has a magnitude that affects how much space there is outside of the border of the object. The border is the bounds of the object, and its style options affect the size and quality of the visible border of the object. Padding is similar to margin, but its magnitude affects the space between the content and the border (the inside). The content itself lies within the two object tags and is inside of all the other elements.
Example:
<div style="margin:2px;border:2px;padding:2px;">
CONTENT 2
</div>
Question 4:
The box model is made up of 4 main parts: the margin, border, padding, and content. The margin has a magnitude that affects how much space there is outside of the border of the object. The border is the bounds of the object, and its style options affect the size and quality of the visible border of the object. Padding is similar to margin, but its magnitude affects the space between the content and the border (the inside). The content itself lies within the two object tags and is inside of all the other elements.
Example:
<div style="margin:2px;border:2px;padding:2px;">
CONTENT 2
</div>
Problem 2:
Members: Qianhui Fan, Kynan Hui
<!DOCTYPE html>
<html lang= "en">
<head>
<title>Birthday Invitation</title>
</head>
<body>
<p>You are invited to a birthday party.</p>
<p>by Kynan Hui and Qianhui Fan</p>
<h1>Details</h1>
<ul>
<li>When: 11/04 at </li> <li>Where: The moon</li> <li>Bring your own food</li> <li>Bring lots of gifts</li></ul>
</body>
</html>
(Edited: 2020-10-05) Problem 2:
Members: Qianhui Fan, Kynan Hui
<!DOCTYPE html>
<html lang= "en">
<head>
<title>Birthday Invitation</title>
</head>
<body>
<p>You are invited to a birthday party.</p>
<p>by Kynan Hui and Qianhui Fan</p>
<h1>Details</h1>
<ul>
<li>When: 11/04 at </li>
<li>Where: The moon</li>
<li>Bring your own food</li>
<li>Bring lots of gifts</li>
</ul>
</body>
</html>
Group 10 - Chris Douglas and Trevor Glassey - Question 10
The Post/Redirect/Get pattern is a web design pattern that's implemented for forms and acts as a bit of a safety precaution. A user will submit form data with a post request, the server will process that request and send a 301 Redirect back, and then the browser will make a get request to that location. By sending that redirect it prevents users from using the back and refresh buttons to resubmit the data again by accident.
Example:
1. Browser - Post to https://militarydraftsignup.mil/signupName=Chris
2. Server - prosses data and returns 301 redirect to https://militarydraftsignup.mil/thankYou
3. Browser - Get https://militarydraftsignup.mil/thankYou
4. Server - returns https://militarydraftsignup.mil/thankYou
(Edited: 2020-10-05) Group 10 - Chris Douglas and Trevor Glassey - Question 10
The Post/Redirect/Get pattern is a web design pattern that's implemented for forms and acts as a bit of a safety precaution. A user will submit form data with a post request, the server will process that request and send a 301 Redirect back, and then the browser will make a get request to that location. By sending that redirect it prevents users from using the back and refresh buttons to resubmit the data again by accident.
Example:
1. Browser - Post to https://militarydraftsignup.mil/signupName=Chris
2. Server - prosses data and returns 301 redirect to https://militarydraftsignup.mil/thankYou
3. Browser - Get https://militarydraftsignup.mil/thankYou
4. Server - returns https://militarydraftsignup.mil/thankYou
<!DOCTYPE html>
<html>
<head>
(Edited: 2020-10-05) <title>Birthday Invitation</title></head> <body>
<header> <h1>Invitation for Shubham's Birthday</h1> </header>
<p> Birthday on: November 28, 2020.
You are all invited to join me as I celebrate my birthday on November 28. We will have a great time together but no jokes about my age will be allowed. </p>
<ul> <li>Raza</li> <li>Zack</li> <li>Thomas</li> </ul>
<p></body> </html>
Regards,
Shubham Patel</p>
<!DOCTYPE html>
<html>
<head>
<title>Birthday Invitation</title>
</head>
<body>
<header>
<h1>Invitation for Shubham's Birthday</h1>
</header>
<p>
Birthday on: November 28, 2020.
<br><br>You are all invited to join me as I celebrate my birthday on November 28. We will have a great time together but no jokes about my age will be allowed.
</p>
<ul>
<li>Raza</li>
<li>Zack</li>
<li>Thomas</li>
</ul>
<p><br>Regards, <br> Shubham Patel</p>
</body>
</html>
Problem Number #3
Crispino Madamba, Sachin Shah
<!DOCTYPE html>
<style>
.dropdown {
font-size: 24px;
}
</style>
<div class = "dropdown">
<label for="months" class = "dropdown">Months: </label>
<select name="months" id="months" class = "dropdown">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
</html>
Problem Number #3
Crispino Madamba, Sachin Shah
<!DOCTYPE html>
<style>
.dropdown {
font-size: 24px;
}
</style>
<div class = "dropdown">
<label for="months" class = "dropdown">Months: </label>
<select name="months" id="months" class = "dropdown">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
</html>
Problem #5
Group Members: Justin Nguyen, George Michael Cuevas
Problem #5
Group Members: Justin Nguyen, George Michael Cuevas
((resource:5.png|Resource Description for 5.png))
Problem # 7
Give an example of a HTML document which makes use of four different levels of cascading styles. Your example should show how one level of style overrides another. It should somewhere make use of !important to show that it is possible to prevent styles from being overridden.
<!DOCTYPE html>
<html>
<head>
<!-- Participants: Shubhan, Raza -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Birthday Invitation</title>
<style type="text/css">
.format {
font-size: 30;
color: red;
}
.important {
color:pink !important;
}
</style></head> <body>
<h1>My date of birth</h1> <ul> <li>Shubham</li> <li>Pollett</li> </ul>
<h1 class="external"> External format</h1> <h1>Default format</h1> <h1 class='format'>Internal/document format</h1> <h1 class="'format" style="font-size: 20; color:blue"> Inline format</h1>
<h2 class="important"> Internal format</h2> <h2 class="important" style="color: yellow"> Format forced to stay the same</h2>
</body>
</html>
CSS file:
.external {
font-size: 40; background-color: yellow; color: red;}
.head {
(Edited: 2020-10-05) background-color: lightblue; border: 1px solid brown;}
Problem # 7
Give an example of a HTML document which makes use of four different levels of cascading styles. Your example should show how one level of style overrides another. It should somewhere make use of !important to show that it is possible to prevent styles from being overridden.
<!DOCTYPE html>
<html>
<head>
<!-- Participants: Shubhan, Raza -->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Birthday Invitation</title>
<style type="text/css">
.format {
font-size: 30;
color: red;
}
.important {
color:pink !important;
}
</style>
</head>
<body>
<h1>My date of birth</h1>
<ul>
<li>Shubham</li>
<li>Pollett</li>
</ul>
<h1 class="external"> External format</h1>
<h1>Default format</h1>
<h1 class='format'>Internal/document format</h1>
<h1 class="'format" style="font-size: 20; color:blue"> Inline format</h1>
<h2 class="important"> Internal format</h2>
<h2 class="important" style="color: yellow"> Format forced to stay the same</h2>
</body>
</html>
CSS file:
.external {
font-size: 40;
background-color: yellow;
color: red;
}
.head {
background-color: lightblue;
border: 1px solid brown;
}
Question 8:
Set-Cookie: Bob=777777777;
Cookies can be used to implement sessions by sending a user a name value pair as a cookie with an expiry time. When this cookie is sent from the browser it is used to look for the file containing that user's data on the server.
Danny Song
Thomas Wang
Question 8:
Set-Cookie: Bob=777777777;
Cookies can be used to implement sessions by sending a user a name value pair as a cookie with an expiry time. When this cookie is sent from the browser it is used to look for the file containing that user's data on the server.
Danny Song
Thomas Wang
(c) 2024 Yioop - PHP Search Engine