:‫الحاجات اللي المفروض تكون عارفها عملي لألمتحان‬

• HTML5
• CSS
• JS
• PHP

Introduction:
NUTS & BOLTS View:
Q1) What is the internet as NUTS & BOLTS view?
• millions of connected computing devices: hosts / end systems.
• Network apps.
• Communication links → fiber, copper, satellite, …etc.
• Routers to forward Packets.
• Protocols that controls sending & receiving of messages→ TCP, UDP, IP, HTTP, FTP, TFTP, Telnet.
• Internet (network of networks).

Internet Service View:

Q2) Explain briefly connection-oriented and connectionless service:
• connection oriented service guarantees that data transmitted from a sender to a receiver will
eventually be delivered to the receiver in-order and in its entirety.
• connectionless service: does not make any guarantees about eventual delivery. Typically, a
distributed application makes use of one or the other of these two services and not both.

Q3) What is the Difference between TCP/IP, UDP transport layer protocols?
UDP TCP
Connectionless Connection Oriented
Unreliable Reliable
Faster Slower
Lower header overhead Higher header overhead
No Acknowledgment Acknowledgment
Very basic error checking Extensive error checking
No sequencing of data packets Sequencing of data packets
No retransmission Retransmission of lost packets
VOIP Email
 Chapter 1 – World Wide Web:

1.1 Static web Site:

1.2 Dynamic Web Sites:

Q1) List 3 ways in which Web Applications are revolutionary compared to traditional applications.
Or: Web applications are revolutionary compared to traditional applications, Discuss.
Answer:
• Scale: Web applications serve 100 to 1000 times more users than traditional applications.
• Easy access: The Web makes it easy to access any application from anywhere in the world.
• Collaboration is possible on a much larger scale.
• No need to install binaries, and applications can be updated without requiring any effort from users.

1.3 Web Technologies:

1.4 Introduction to Web Servers:

Chapter 2 – Internet Technologies:

2.1 Internet Protocols:

2.2 Domain Name System (DNS):

Q.1 Explain What Are the main function of Domain Names? What is a Forward Lookup? Mention the original
Top-Level Domains.
Q.2 Explain the Domain Name System, function & components, & then mention the 7 original Top-level
domains.

Q.3 Explain the Domain Name System, function & components, according to below diagram

Answer:
• DNS: is a collection of databases, that contain information about domain names and its
corresponding data IP address.
For example, if someone types Tony.com into a web browser, a server behind the scenes will
map that name to the IP address e.g.: 206.19.49.149.

• The Domain name function: its way to identify and allocate computers connected to the internet
and no two organization can have same domain name.
 • Components of DNS:
− Name space
− Name servers
− Resolvers

• How DNS work:

− When a user of PC wants to communicate with site or
other type of connection.
− It sends domain name to the DNS server request and
receive the IP address.
− After receiving the IP, the connection between PC and
server web establish.

Q.4 List advantages of distributed DNS

Answer:
• Load Balancing: With millions of device and users accessing internet services from all over the
globe, at every instant. A Single DNS Server cannot handle the huge global DNS traffic.
• Distance to DNS Servers: If we have DNS servers near to our geographical location, we will
get faster replies for our DNS queries. This is possible by having a distributed DNS server
infrastructure.
• Redundancy: Distributed DNS server infrastructure provides redundancy and prevents a single
point of failure.
• Maintenance: Distributed DNS server infrastructure provides a way for easy to update the DNS
Servers and easy maintenance.
• Delegation: Because of the distributed architecture of the DNS, the control over portions of the
whole DNS namespace can be delegated to other organizations.

Q.5 You direct a browser to a URL http://www.myquestion.com/initial-page/index.html which replies with

a webpage with the following links: (& Exam Model 4 Q.3.1)

<a href=”/starts/with/a/slash”>LINK A</a> <a href=” no/starting/slash”>LINK B</a>

Provide the full URL that would be navigated to when you click both Link A and Link B. Explain the
syntax of a uniform resource locator.
Answer:
• First Link → http://www.myquestion.com/starts/with/a/slash
• Second Link → http://www.myquestion.com/initial-page/no/starting/slash
• URL Syntax:
Q.6 The following diagram outlining the process of displaying webpage “photoapp.com/”. write down a value
for each letter in the parentheses. Then order events occur (arrows only) when “www.photoapp.com/” is
typed into the browser.

Answer:
• This diagram outlines the process of displaying a web page when www.photoapp.com is typed into the
location bar of the browser for the first time (not cached in DNS cache).
Answer:

Letter label Values:

a) ➔ HTTP GET request
b) ➔ Web server
c) ➔ HTTP GET response
d) ➔ DNS response
e) ➔ DNS server

The order of events:

1. DNS lookup
2. DNS response
3. HTTP GET request
4. HTTP GET response
2.3 Hyper Text Transfer Protocol (HTTP):

Q1) True/False ➔ Because browsers must retain cookies, “Web servers are stateless, not browsers” (True)
(quiz 2020)
Q2) Web servers are stateless, not browsers. Discuss:
Answer:
• Web server is stateless because HTTP requests are independent, so the server can't tell if 2 requests
came from the same browser or user.
• On the other hand, browsers can store stateful information as cookies:
▪ Cookies are name-value pairs stored on the client’s hard disk by a web server in order to be sent
back to the web server in the next HTTP request.
▪ When the web server receives the cookie data, it can tell if the request came from a previous
visitor or not and can personalize the session accordingly.
▪ If the web server doesn’t receive a cookie data, it assumes that the user didn’t visit before, and
then sends name-value pairs to your machine in the header for the web server it sends.

Q3) Suppose user enters URL www.MTI.edu/CSDepartment/home.index, (contains text and references to 5 jpeg
images). Show HTTP request & response messages order, in both Non-Persistent & Persistent HTTP.
Answer:
• Non-Persistent (HTTP/1.0):
➢ Will open a new TCP connection for every single request/response pair.
1. Initial TCP connection (usually 1 RTT delay):
a. Web user requests for TCP connection at http://www.mti.edu/ on port 80.
b. Web server accepts the TCP connection at port 80 notifying the client.
2. The client sends HTTP request message (containing URL) into TCP connection socket. Message
indicates that client wants object CSDepartment/home.index.
3. Web server receives request message, and forms a response message containing the requested
object and sends message into its socket.
4. Web server closes TCP connection.
5. Client receives the response message containing html file and then displays html. Parsing the
html file, it finds 5 referenced jpeg objects.
6. It repeats steps 1→5 for each 5 jpeg objects.

• Persistent HTTP (HTTP keep-alive) (HTTP reuse) (HTTP/1.1):

➢ Will use the same TCP connection to send and receive all objects/
1. Initial TCP connection (usually 1 RTT delay):
a. Web user requests for TCP connection at http://www.mti.edu/ on port 80.
b. Web server accepts the TCP connection at port 80 notifying the client.
2. The client sends HTTP request message (containing URL) into TCP connection socket. Message
indicates that client wants object CSDepartment/home.index.
3. Web server receives request message and forms a response message containing the requested
object and sends message into its socket.
4. Client receives the response message containing html file and then displays html. While parsing
the html file, it finds 5 referenced jpeg objects.
5. repeat steps 2→4 for each 5 jpeg objects.
Q4) What is the difference between HTTP and HTTPS?
Answer:
HTTP HTTPS
Used to communicate between clients and servers in HTTPS is the secure encrypted version of HTTP
the WWW.
Appropriate when non-sensitive information needed Widely used in security concern areas such as online
to be exchanged. payment transactions.
Uses port 80 by default Uses port 443 by default
SSL Certificates not used Uses SSL Certificates for communication

2.4 Web Caching:

Q1) You observe a web application that receives a HTTP response header from an HTTP GET request
that contains the following line → Cache-Control: max-age=2628000
a. Describe the benefit a web application would get from having that line in a HTTP GET response
header. Give an example of a HTTP GET request done by your website that it would be appropriate
to apply this line.

b. Describe the Disadvantage of having this line on a HTTP GET response. Given an example of a
HTTP GET response done by your website that it would be inappropriate?

Q.1 “Cache-Control: max-age=2628000”,. Describe the benefit & disadvantages a web application would
get from having that line in a HTTP GET response header.

Answer:
• "max-age" defines the amount of time a file should be cached for, in this statement max-age is
equal to 2628000 seconds.
• Here, cache-control: max-age=262800 means that the returned resource is valid for
262800 seconds, after which the browser has to request a newer version.
• Benefits is for ensuring security and privacy as for banking websites or to always keep your pages
up to date to refresh frequently to see latest feeds.
• Disadvantages is that it puts a lot of load on the server because of repeated requests instead of
using cached copy with user.
Q.7 What is web cache? How caches keep up-to-date copies to retrieve? Explain using the two different
cases shown in the following figure between client / server http msg.

Answer:
• Web cache: Web caching is the storage of Web objects near the user to allow fast access, thus
improving the user experience of the Web surfer the main goal is satisfy client request without
involving origin server.
• Examples of some Web objects:
▪ Cache-friendly content (Tend to change infrequently):
o Logos and brand images
o Non-rotating images in general (navigation icons, for example)
o Style sheets
o General JavaScript files
o Downloadable Content
o Media Files
▪ Some items that you have to be careful in caching are:
o HTML pages
o Rotating images
o Frequently modified JavaScript and CSS
o Content requested with authentication cookies
▪ Some items that should almost never be cached are:
o Assets related to sensitive data (banking info, etc.)
o Content that is user-specific and frequently changed

• Goal: don’t send object if client has up-to-date cached version

• Here the Client specify date of cached copy in HTTP request:

1. HTTP/1.0 304 Not Modified

server: response contains no object if cached copy is up to date.

2. HTTP/1.0 200 Modified

server: response contains the specified object because the
server copy is updated.
2.5 Web Cookie:
Describe a simple attack that could be executed if browsers did not implement the Same-Origin Policy.
• One possible answer: if a good page is open in one tab and a bad page in another, the bad page could
modify and corrupt the good one (e.g., by stealing its cookies or posting its forms).

Describe the mechanism used by a web application to prevent its session cookies from being used by a
web application from a different company. (& Exam Model 3 Q.3.4)
What are cookies? Explain why major web sites use cookies (Exam Model 4 Q.3.3)
Answer:
• The same-origin policy is a critical security mechanism that restricts how a document or script
loaded from one origin can interact with a resource from another origin. It helps isolate potentially
malicious documents, reducing possible attack vectors.
• Two URLs have the same origin if the protocol, port (if specified), and host are the same for both.
You may see this referenced as the "scheme/host/port tuple", or just "tuple". (A "tuple" is a set of
items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.)
URL Outcome Reason
http://store.company.com/dir2/other.html Same origin Only the path differs
http://store.company.com/dir/inner/another.html Same origin Only the path differs
https://store.company.com/page.html Failure Different protocol
http://store.company.com:81/dir/page.html Failure Different port (http:// is port 80 by default)
http://news.company.com/dir/page.html Failure Different host

What are Internet Cookies and What Do They Do? Mention cookies components.

Answer:
• Cookies: Cookies are small files which are stored on a user's computer. They are designed to hold
a modest amount of data specific to a particular client and website and can be accessed either by the
web server or the client computer. This allows the server to deliver a page tailored to a particular
user (like advertisings).
• Cookies Components:

1. Cookie Counter Allows web developer to increase or decrease the value of a number in
a cookie.
2. Cookie Counter Allows web developer to redirect a visitor based on a predefined cookie
Redirect count value.
3. Cookie Delete Allows web developer to delete a cookie that has been set.
4. Cookie Expiration Allows web developer to set the period of time a cookie will reside on
a visitor's computer.
5. Cookie Redirect Allows web developer to know if a cookie is present, and if not, to
redirect to another page.
6. Cookies Enabled Checks to see if a visitor's browser has cookies enabled and redirects
to another page if it doesn't.
7. Display Value Allows web developer to display, anywhere on a page, the value which
was set in a cookie.
8. Get Value from Allows web developer to get a value from a form field (such as name,
Form Field address, etc.), to set in a cookie for future use.
 9. Get Value from Allows web developer to use a value generated in a prompt box to set
Prompt Message a cookie for future use.
10. Set Value Allows web developer to create a value, such as date and time of visit,
to set in a cookie for future use.
11. Store Value in Allows web developer to store a set value into a new form.
Form Field
12. Use Value in Allows web developer to use a value in a message box, an alert box, a
Messages prompt message, or confirmation box.

2.6 E-mail:
Q.2What are the main components of the email? Briefly explain the basic functions of the mail user agent.
(& Model 4 Q.1.2)

Answer:
• Email has three major components:
▪ User agents.
▪ Mail servers.
▪ SMTP (Simple Mail Transfer Protocol.
• Email user agent system supports five basic functions:
▪ Composition
▪ Transfer
▪ Reporting
▪ Display
▪ Disposition

Q.3 Discuss the main differences between POP3 & IMAP Protocols
Answer:
• POP3 (Post Office Protocol):
▪ Emails are stored on a single device
▪ Sent emails are stored on a single device
▪ Emails can be accessed from a single device
• IMAP(Internet Messaging Access Protocol):
▪ Emails are stored on server
▪ Sent messages are stored on server
▪ Messages can be synched and accessed from multiple devices
 Chapter 3 – HTML5 – CSS3:
3.1 HTML
& 3.2 HTML5:

Q1) Write the HTML code to generate the following lists using:
a) Alpha
b) Beta
i. Tilde
ii. Lambda
c) Zeta
<!-- types: 1|a|A|i|I -->
<ol type="a">
<li>Alpha</li>
<li>Beta</li>
<ol type="i">
<li>Tilde</li>
<li>Lambda</li>
</ol>
<li>Zeta</li>
</ol>
Q2) Select one or more: Tags of the head section in HTML5 (quiz 2020)
a) <body> <href> ( )
b) <style> <tr> ( )
c) <meta> <link> (✓)
d) <link> <style> (✓)
Q3) Write an HTML code to create the following form:
Answer (layout using table) (Obsolete method)(CSS is optional):

<html>
<head>
<title>Fruit</title>
<style>
* {
margin: 0;
}

input {
margin-bottom: 10px;
}

td {
vertical-align: top;
padding: 0 9px;
}

td[data-error]::after {
content: attr(data-error);
position: absolute;
margin-left: 10px;
color: red;
}
</style>
</head>
<body style="background-color: #ffff99; text-align: center;">
<h1 style="background-color: #ffcc00;">The World Of Fruit</h1>
<h2 style="margin-bottom: 20px;">Fruit survey</h2>
<form style="margin: center;">
<table>
<tr style="text-align: right;">
<td><label for="name"> Name: </label></td>
<td><input id="name" name="name" type="text" /></td>
</tr>
<tr style="text-align: right;">
<td><label for="Address"> Address: </label></td>
<td><input id="Address" name="Address" type="text" /></td>
</tr>

<tr style="text-align: right;">

<td><label for="email"> Email: </label></td>

<td data-error="Missing"><input id="email" name="email" type="email" /></td>

</tr>
 <tr>
<td style="text-align: right;">
<p style="width: 180px;">How many pieces of fruit do you eat per day?</p>
</td>
<td>
<input type="radio" id="s0" name="pof" />
<label for="s0"> 0 </label>
<br />
<input type="radio" id="s1" name="pof" />
<label for="s1"> 1 </label>
<br />
<input type="radio" id="s2" name="pof" />
<label for="s2"> 2 </label>
<br />
<input type="radio" id="s3" name="pof" />
<label for="s3"> More than 2 </label>
<br />
</td>
</tr>
<tr>
<td>
<p style="text-align: right;" for="fav">My favorite fruit</p>
</td>
<td>
<select name="fav-fruit" size="4">
<option value="apple"> Apple </option>
<option value="banana"> Banana </option>
<option value="plum"> Plum </option>
<option value="pomegranate"> Pomegranate </option>
<option value="orange"> Orange </option>
<option value="mango"> Mango </option>
</select>
</td>
</tr>
<tr>
<td><label for="like"> Would you like brochure </label></td>
<td><input type="checkbox" id="like" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="submit" /></td>
</tr>
</table>

<br />
</form>
<script>
const email = document.getElementById('email')
email.addEventListener('blur', function () {
email.value == '' ? email.parentElement.setAttribute('data-error', 'Missing')
: email.parentElement.removeAttribute('data-error')
})
</script>
</body>
</html>
 Another answer (layout using Grid):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The world of fruit</title>
<style>
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #ffff99;
}
.page-title {
text-align: center;
background-color: #ffcc00;
}
.form-title {
text-align: center;
padding-block: 0.8rem;
}
.grid {
display: grid;
column-gap: 0.6rem;
row-gap: 0.8rem;
grid-template-columns: repeat(2, auto);
justify-content: center;
}
.grid > :nth-child(odd) {
text-align: right;
}
[data-error]::after {
content: attr(data-error);
position: absolute;
margin-left: 10px;
color: red;
}
</style>
</head>
<body>
<h1 class="page-title">The world of fruit</h1>
<h2 class="form-title">Fruit Survey</h2>
<form action="" class="grid">
<label for="name">Name</label>
<input type="text" id="name" name="name" />

<label for="address">Address</label>
<input type="text" id="address" name="address" />

<label for="email">Email</label>
<div>
<input type="text" id="email" name="email" />
</div>
<!-- Radio Group -->
<p>
How Many pieces of fruit <br />
do you eat per day?
</p>
<div>
<div>
<input type="radio" id="f1" name="fruit-num" value="0" />
<label for="f1">0</label>
</div>
<div>
<input type="radio" id="f2" name="fruit-num" value="1" />
<label for="f2">1</label>
</div>
<div>
<input type="radio" id="f3" name="fruit-num" value="2" />
<label for="f3">2</label>
</div>
<div>
<input type="radio" id="f4" name="fruit-num" value="More than 2" />
<label for="f4">More than 2</label>
</div>
</div>
<!-- Select Menu -->
<p>My favorite fruit</p>
<div>
<select name="fav-fruit" size="4">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="plum">Plum</option>
<option value="pomegranate">Pomegranate</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
</select>
</div>

<!-- checkbox -->

 <!-- checkbox -->
<label for="brochure" class="alight-right"
>Would you like a<br />
brochure</label
>
<input type="checkbox" id="brochure" name="brochure" />
<span style="visibility: hidden" aria-hidden></span>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script>
const email = document.getElementById('email')
email.addEventListener('blur', function () {
email.value.trim() === ''
? email.parentElement.setAttribute('data-error', 'Missing')
: email.parentElement.removeAttribute('data-error')
})
</script>
</body>
</html>

Output:
Q4) Write an HTML code to create the following form :
 Answer (layout using table) (Obsolete method):
<html>
<head>
<title>Blue Developer Directory</title>
<style>
* {margin: 0;}

input {margin-bottom: 10px;}

td {vertical-align: top; padding: 0 9px;}

</style>
</head>
<body style="background-color: lightblue;">
<h1 style="background-color: blue;">Blue Developer Directory</h1>
<h2 style="margin-bottom: 20px;">Contact Us</h2>
<p>please use this form to contact a member of our website team</p>
<form style="margin: center;">
<table>
<tr style="text-align: right;">
<td><label for="name"> Full Name: </label></td>
<td><input id="name" name="name" type="text" /></td>
</tr>

<tr style="text-align: right;">

<td><label for="email"> Email Address: </label></td>
<td data-error="Missing"><input id="email" name="email" type="email" /></td>
</tr>

<tr style="text-align: right;">

<td><label for="Phone"> Phone Number: </label></td>
<td><input id="Phone" name="Address" type="text" /></td>
</tr>

<tr>
<td style="text-align: right;">
<p style="width: 180px;">Best time to call</p>
</td>
<td>
<input type="radio" id="s0" name="pof" />
<label for="s0"> Morning </label>

<input type="radio" id="s1" name="pof" />

<label for="s1"> Afternoon </label>

<input type="radio" id="s2" name="pof" />

<label for="s2"> Evening </label>
</td>
</tr>

<tr>
<td>
<p style="text-align: right;" for="fav">Budget</p>
</td>
<td>
<select name="budget">
<option value="none" disabled selected>Select one</option>
<option value="high">High</option>
<option value="low">Low</option>
</select>
</td>
</tr>
 <tr>
<td>
Services Needed:
<br />
(Check all that apply)
</td>
</tr>

<tr>
<td>
<input type="checkbox" id="html" />
<label for="like">
Html
</label>
<input type="checkbox" id="php" />
<label for="like">
PHP
</label>
</td>
</tr>

<tr>
<td>
<input type="checkbox" id="aps" />
<label for="like">
ASP
</label>

<input type="checkbox" id="java" />

<label for="like">
Java
</label>
</td>
</tr>

<tr>
<td>
<input type="checkbox" id="cpp" />
<label for="like">
C++
</label>
<input type="checkbox" id="design" />
<label for="like">
Design
</label>
</td>
</tr>

<tr>
<td><input type="submit" value="submit form" /></td>
</tr>
</table>

<br />
</form>
</body>
</html>
Answer (Using Grid Layout):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blue Developer Directory</title>
<style>
* {margin: 0;}
body {background-color: lightblue;}
.page-title {background-color: blue; color: white;}
.form-title {padding-block: 0.8rem;}
.grid {
display: grid;
column-gap: 0.3rem;
row-gap: 0.8rem;
grid-template-columns: repeat(2, auto);
justify-content: start;
justify-items: start;
}
.lg-gap {column-gap: 3rem;}
form {padding-inline-start: 0.5rem;}
</style>
</head>
<body>
<h1 class="page-title">Blue Developer Directory</h1>
<h2 class="form-title">Contact Us</h2>
<form action="">
<p>Please use this form to contact a member of our website team</p>
<div class="grid lg-gap">
<label for="name">Full Name:</label>
<input type="text" name="name" id="name" />

<label for="email">Email Address:</label>

<input type="text" name="email" id="email" />

<label for="phone">Phone Number:</label>

<input type="tel" name="phone" id="phone" />

<p>Best Time to Call</p>

<div>
<input id="morning" type="radio" name="call-time" value="morning" />
<label for="morning">Morning</label>

<input id="afternoon" type="radio" name="call-time" value="afternoon" />

<label for="afternoon">Afternoon</label>

<input id="evening" type="radio" name="call-time" value="evening" />

<label for="evening">Evening</label>
 <input id="evening" type="radio" name="call-time" value="evening" />
<label for="evening">Evening</label>
</div>

<p>Budget</p>
<div>
<select name="budget">
<option value="none" disabled selected>Select one</option>
<option value="high">High</option>
<option value="low">Low</option>
</select>
</div>
</div>
<p> Services Needed: <br /> (Check all that apply) </p>
<div class="grid">
<div>
<input type="checkbox" value="html" />
<label for="">html</label>
</div>
<div>
<input type="checkbox" value="PHP" />
<label for="">PHP</label>
</div>
<div>
<input type="checkbox" value="ASP" />
<label for="">ASP</label>
</div>
<div>
<input type="checkbox" value="Java" />
<label for="">Java</label>
</div>
<div>
<input type="checkbox" value="C++" />
<label for="">C++</label>
</div>
<div>
<input type="checkbox" value="Design" />
<label for="">Design</label>
</div>
</div>
</form>
</body>
</html>
Q5) Write the HTML5 code to add video element to your webpage. Considering alternate video resource.
Write EMPTY functions script to use video built-in controls (play, pause, seek). (& Exam model 4
Q.2.2)

Answer:

<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<script>
function play() {
document.getElementById('vid').play()
}
function pause() {
document.getElementById('vid').pause()
}
function seek() {
document.getElementById('vid').pause()
document.getElementById('vid').currentTime = document.getElementById('vid').currentTime + 10
document.getElementById('vid').play()
}
</script>
</head>

<body>
<video id="vid" width="320" height="240">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
<br />
<button > <button > <button > </body>
</html>
Q6) Write an HTML to produce the following table with background Yellow & text color red.

Answer:

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<!-- Table Style -->
<style>
table,
th,
td {
border: 1px double red;
background-color: yellow;
}
</style>
</head>

<body>
<table>
<!-- Table Head -->
<thead>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</thead>
<!-- Table Body -->
<tbody>
<!-- row 1 -->
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<!-- row 2 -->
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<!-- row 3 -->
<tr>
<td colspan="3">Row 3 Spans along 3 Columns</td>
</tr>
</tbody>
</table>
</body>
Output:
</html>
3.3 CSS:

True or false? ➔When you want to style set of documents with same style, it’s better to use External
CSS (True) (quiz 2020)

How can we use CSS?

Answer:
• Inline – apply style attribute to a single tag
o Take a lot of work to maintain across a website.
• Internal – stylesheet defined in the <head> tag of a page
o Cleaner way than the inline.
• External – style sheet (a .css text file)
o The most preferred. (reusability – cleaner html code – easier to maintain).

(& Exam Model 2 Q.2.2 & Model 4 Q.2.3.2)

a) Write a style sheet that expresses that H1 and H2 should always be centered and always be red.
b) Add a rule for a class bGreen that defines text in bold and Green.
h1,
h2 {
text-align: center;
color: red;
}
.bGreen {
font-weight: bold;
color: green;
}

What is CSS, list Advantages.

Answer:
What is CSS:
• Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML.
Advantages:
• Cleaner html code (CSS can be in a separate file) (External CSS).
• Separates styles from html tags and page content and make styles reusable in any page or
website.
• Consistent look across entire website & Easier to maintain (changing style in one places).
Disadvantages:
• Not uniformly supported by all browsers.

Explain 2 different ways that CSS supports the DRY principle.

Answer:
• Elements with the same class can share a single copy of styles.
• Styles can be inherited by child elements from their parents.
• Stylesheets can be shared between Web pages.
 What are the major advantages of using an external CSS file in Web Pages? If your CSS doesn’t set
the width and height of an element, how is the width and height of that element determined?
Answer:
Advantages:
• Can be reused across webpages.
• Cleaner html code (separate styles from html tags).
• Easier to maintain as we apply styling changes in one place.

If we didn’t specify width and height:

• If the element has content:
o For block elements: the width will fill its parent and the height will grow to fill the content height.
o For inline elements: the width and height will grow to fit its content.

• If the element has no content:

o For block elements: the width will fill its parent, and height will be zero.
o For inline elements: the width and height will be zero.

What is CSS? What are the major advantages of using an external CSS file in Web Pages?
Answer:
• Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML.
• External CSS can be applied to multiple documents while being managed from a single style
sheet. This keeps code DRY and improves efficiency and convenience.

Write two CSS files sty1, sty2, for Blue theme and Grey theme.
Answer:

Write HTML tags show how to use alternate styles and printed version.
Answer:

Important notes for CSS:

• You should know how to use Classes and ids in CSS.

• Letter spacing:

p {
font-size: smaller;
letter-spacing: 1em;
}

• Printing CSS version:

o We can make a colorful styles for displaying website on the screen, while keep colors in black
and white in printing mode.
<link rel="stylesheet" type="text/css" href="style1.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="style2.css" media="handheld, print" />
• Alternate Stylesheet:
o Use cases → Dark/normal mode (as doctor said).
o Can be Changed from the “view” tab:

<!DOCTYPE html>

<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style1.css" title="Style 1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="Style 2" />
</head>
<body></body>
</html>

Consider the following HTML code: (& Exam Model 3 Q.5.1)

1. Add an external style sheet with the URL: "mystyle.css".

2. Set "background-color: linen" for the page, using an internal style sheet.
3. Set "background-color: Yellow" for the page, using an inline style.
Answer:
<!DOCTYPE html>
<html>

<head>
<title>CSS</title>
<!-- Adding external CSS-->
<link rel="stylesheet" href="mystyle.css" />
<!-- internal CSS -->
<style>
body {
background-color: linen;
}
</style>
</head>

<!-- inline CSS -->

<body style="background-color: yellow;">
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>

</html>
 Chapter 4 – Script Language:

4.1 Java Script:

Q1) Select the value of the following code (quiz 2020)

<script type="text/javascript">
x = 4 + '4'
document.write(x)
</script>

a) Error ( )
b) 8 ( )
c) 44 (✓)

Q2) In JavaScript, which of the below comments lines are used? (quiz 2020)
a) //,/*……**/ ( )
b) /, /**……/, /* ( )
c) /*……*/, // (✓)

Q3) Select the output of the following code (quiz 2020)

<script>
var s1 = [4, 9]
var s2 = s1.map(myFunction)
print(s2)

function myFunction(value, index, array) {

return value * 2
}
</script>

a) Error ( )
b) 8, 9 ( )
c) 8, 18 (✓)
Note:
array.map() method➔ https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#:~:text=The%20map()%20method%20creat
es,element%20in%20the%20calling%20array.

Q4) Briefly describe the major uses of JavaScript on the client side. (Model 4 Q.4.1)
Answer:
Can validate user input
Can update the webpage without the need to interact with the server.
Allows page to react to user actions other than pushing a “submit” button – more interactivity

Q5) Explain why a web application coding standard might demand that the script tag for including
JavaScript libraries look like: <script src="/library.js"></script> instead of containing the full site information
like: <script src="http://www.site.com/library.js"></script>
Answer:
The first form of the script tag takes protocol, typically http and https and host name from the enclosing
page where the second form hard codes the protocol http and host. If this page is served with https the
second will generate a mixed content problem by fetching code using http. (p.14 q2 3)
Q6) Write a complete program (HTML5 with JavaScript) that display all odd numbers in range N1 to N2.
User is prompted to enter N1 and N2. (& Exam model 2 Q.2.1 + Model 4 Q.4.3)

JS:
const n1 = document.getElementById('n1')
const n2 = document.getElementById('n2')
const displayBtn = document.getElementById('displayBtn')
const resultsContainer = document.getElementById('resultsContainer')

displayBtn.addEventListener('click', function (event) {

event.preventDefault()
const oddNumbers = oddNumbersBetween(n1.value, n2.value)
const oddTable = oddNumsToTable(oddNumbers)
resultsContainer.innerHTML = ''
resultsContainer.appendChild(oddTable)
})

function oddNumbersBetween(n1, n2) {

let num1 = parseInt(n1),
num2 = parseInt(n2)
if (num1 > num2) {
const temp = num1
num1 = num2
num2 = temp
}
const oddNumbers = []
while (num1 <= num2) {
if (num1 % 2 !== 0 && num1 !== 0) {
oddNumbers.push(num1)
}
num1++
}
return oddNumbers
}

function oddNumsToTable(results) {
let table = document.createElement('table')
let cell, cellText
results.forEach((resultsRow) => {
let row = document.createElement('tr')
cell = document.createElement('td')
cellText = document.createTextNode(resultsRow)
cell.appendChild(cellText)
row.appendChild(cell)
table.appendChild(row)
})
return table
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Odd numbers in range</title>
<link rel="stylesheet" href="style.css" />
<script defer src="app.js"></script>
</head>

<body>
<header><h1>Display odd numbers in range</h1></header>
<section>
<form>
<label for="n1">Number1:</label>
<input id="n1" type="number" />

<label for="n2">Number2:</label>
<input id="n2" type="number" />

<input id="displayBtn" type="submit" value="display"></input>

</form>
</section>

<aside id="resultsContainer"></aside>
</body>
</html>

CSS (optional):
h1 {
text-decoration: underline;
margin: 35px 0px;
}
aside {
float: right;
width: 35%;
margin-top: 30px;
}
tr:nth-child(even) {
background-color: Gainsboro;
}
tr:nth-child(odd) {
background-color: whitesmoke;
}
tr:first-child {
background-color: gray;
}
td {
font-size: 25px;
padding: 0px 15px;
text-align: center;
}
input[type='number'] {
width: 2rem;
height: 2rem;
appearance: none;
background-color: #ffdb97;
border: 1px solid #ffc514;
}
Q7) Write the output when the below JavaScript code executed:

<script>
var globalVar = 1
function foo(argVar) {
var localVar = 2
return function (arg) {
argVar += arg
localVar += arg
globalVar += arg
document.write('F ', argVar, localVar, globalVar)
document.write('<br>')
}
}
var func1 = foo(1)
var func10 = foo(10)
func1(1)
func10(2)
document.write('G', globalVar)
</script>
Answer:

Output:

F 232
F 1244
G4

Q8) Write JavaScript function to use a function to find (for instance) the highest value in a list of
numbers passed as parameters to function findMax. Use argument object to write your code.

Required Answer (works in non-arrow function only):

const max = findMax(1, 123, 500, 115, 44, 88)

function findMax() {
var max = -Infinity
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i]
}
}
return max
}
• More information about: Argument object:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
Another Answer (ES6 using rest parameter) (not the required answer, but useful to know):
Note:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Functions/rest_parameters#the_difference_between_rest_parameters_and_the_arguments
_object

function findMax(...numbers) {
let max = -Infinity
for (const num of numbers) if (num > max) max = num
return max
}

const max = findMax(1, 123, 500, 115, 44, 88)

Q9) Consider the following fragments of HTML and JavaScript:

HTML

<div id="a">A
<div id="b">B
<div id="d">D</div>
</div>
<div id="c">C</div>
</div>

JavaScript:

function callback(event) {
console.log(event.target.id + ' ' + event.currentTarget.id)
}

document.getElementById('a').addEventListener('click', callback, false)

document.getElementById('b').addEventListener('click', callback, false)
document.getElementById('c').addEventListener('click', callback, false)
document.getElementById('d').addEventListener('click', callback, false)

a) What would be printed out if the user clicked on the letter ‘d’?
Output:

dd
db
da

b) If the JavaScript changed so that the third argument to each addEventListener() call is true, what
would be printed out if we clicked on the letter ‘c’?
ca
cc
 This may help you to understand the above answer:
• bubbling and delegation: https://www.youtube.com/watch?v=6NMSCh3DJug
• The Boolean in addEventListener:
o false = Register the event handler for the bubbling phase.
o true = Register the event handler for the capturing phase.
• capture phase vs bubbling phase:

Q10) What does the following bit of JavaScript print out?

var a = [1, 2, , 3, 4, 5];

console.log(a[4], a[2], a[5]);

Answer:

4 undefined 5

var x = 1;
(function (x) {
console.log(x);
x = 3;
})(2);
console.log(x);

Answer:

2
1
Q11) How many alert dialogs will the following JavaScript generate, and what will be displayed in each of
them?
var x = '10'
function f() {
var x = '4'
alert(this.x)
function g() {
alert(x)
}
g()
}
f()

Answer: there will be 2 alert dialogs. The first will display “10”, and the second will display “4”.
Q12) Below you will see some snippets of HTML from a Web page. Fill in the body of the JavaScript
function changeColor so that the color of the text changes in response to the selection made in the
menu.
<style type="text/css">
.a {
color: red;
}

.b {
color: green;
}

.c {
color: blue;
}
</style>
...
<div id="colorText">Select below to change the color of this text</div>
<select > <option value="a">Red</option>
<option value="b">Green</option>
<option value="c">Blue</option>
</select>
<script type="text/javascript">
function changeColor(value) {
//Answer:
Document.getElementById('colorText').className = value
}
</script>
 Chapter 5 – Cloud Computing Overview:
Q1) For each of the pieces of a web application implementation listed below, state which parts (Model,
View, or Controller) would the piece be most associated with. Provide a brief justification for all:
‫تاكد‬
a) CSS rules → view
b) JavaScript Code→ controller
c) HTML→ view
d) Animations→ view
e) Database data→ model

Q2) Label each of the tasks below with “Model”, “View”, “Controller” to indicate where that task would
typically be implemented in a Web application using MVC architecture.
a) Validate form data → model
b) Make sure a user is logged in → controller
c) Invoke to link to method → view
d) Return a “redirect” to the browser → controller
e) Define event handler to custom form element → view
f) Generate a new session token → controller
g) Invoke the find_all_by_name method → controller
h) Create a “salt” for a password → model

Q3) Why should one prefer public cloud over private cloud? List some obstacles and opportunities for
adoption and growth of cloud computing?
Answer:
Because Public Cloud allows systems and services to be easily accessible to the general public

Q4) why cloud computing platforms work well for web application startup companies that are starting
small but hoping to make it big in a hurry? (& Exam Model 4 Q.1.1.1)
Answer:
 One of the main reasons is the pricing model of billing based on resources used. Rather than having to
spend a bunch of money on servers the startup hosted on the cloud’s expenses start low and grow with
the resources used.

Q5) Explain what is model-view-controller?

Answer:
is a software design pattern for developing web applications. A Model View Controller pattern is made
up of the following three parts –
• Model − It is the lowest level of the pattern responsible for maintaining data.
• View − It is responsible for displaying all or a portion of the data to the user.
• Controller − It is a software Code that controls the interactions between the Model and View.

Q6) Explain in which assembly is the MVC framework is defined?

Answer:
The model is responsible to manage the data
The view (presentation) is responsible to display the data provided by the model in a specific format
The controller handles the model and view layers to work together

Q7) List out few different return types of a M-V-C action method?
Answer:

Q8) What is cloud computing?

Answer:
Cloud computing is a general term used to describe a new class of network- based computing that takes
place over the internet. It’s basically a step on from utility computing.

It’s a collection or group of integrated and networked hardware, software and internet infrastructure (Called a
platform). Using the internet for communication and transport provides hardware, software and networking
services to clients.

These platforms hide the complexity and details of the underlying infrastructure from users and applications by
providing very simple graphical interface or API (Applications Programming Interface).

Q9) List some of cloud Computing Characteristics

Answer:
• Remotely hosted: Services or data are hosted on remote infrastructure.
• Ubiquitous: Services or data are available anywhere.
• Commodified: The result is a utility computing model similar to traditional that of traditional
utilities, like gas and electricity – you pay for what you would want!
Q10) List disadvantages for cloud computing
Answer:
Advantages:
• One can access applications as utilities, over the Internet.
• Manipulate and configure the application online at any time.
• It does not require to install a specific piece of software to access or manipulate cloud
application.
• Cloud Computing offers online development and deployment tools, programming runtime
environment through Platform as a Service model.
• Cloud resources are available over the network in a manner that provides platform
independent access to any type of clients.
• Cloud Computing offers on-demand self-service. The resources can be used without
interaction with cloud service provider.
• Cloud Computing is highly cost effective because it operates at higher efficiencies with
greater utilization. It just requires an Internet connection.
• Cloud Computing offers load balancing that makes it more reliable.

Disadvantages:
• SECURITY & PRIVACY It is the biggest concern about cloud computing. Since data
management and infrastructure management in cloud is provided by third-party, it is always a
risk to handover the sensitive information to such providers. Although the cloud computing
vendors ensure more secure password protected accounts, any sign of security breach would
result in loss of clients and businesses.
• LOCK-IN It is very difficult for the customers to switch from one Cloud Service Provider
(CSP) to another. It results in dependency on a particular CSP for service.
• ISOLATION FAILURE This risk involves the failure of isolation mechanism that separates
storage, memory, routing between the different tenants.
• MANAGEMENT INTERFACE COMPROMISE In case of public cloud provider, the
customer management interfaces are accessible through the Internet. 164 ???
• INSECURE OR INCOMPLETE DATA DELETION It is possible that the data requested for
deletion may not get deleted. It happens either because extra copies of data are stored but are
not available or disk destroyed also stores data from other tenants.

Q11) Explain how a Content Distribution Network (CDN) can improve the performance of web applications
for users. IS CDN and cloud are the same?
Answer:
5.1 Introduction:

5.2 Advantages & Disadvantages:

5.3 Basic Concepts:

5.4 Service Models:

5.5 Desired Features of a Cloud:

5.6 Cloud Computing Planning:

5.7 Cloud Computing Technologies:

5.8 Cloud Computing Architecture:

Q.1 What does the web server typically do with the following html fragment: “<a href="#top">Top</a>”

Answer:
• It gets handled in the client browser (The server doesn’t do anything with html fragments).

Question 2:
Discuss the Error Msg below in the figure:

Answer:
• This warning message occurs when items on the following web site (frames, images and other
objects) are referenced in a non-secure manner (http). For example, the page code might include
an image or code that pulls from a non-secure URL.
• To resolve this issue, make sure that the page code does not pull data directly from a non-secure
URL.

Question 3:
Consider the following security attack where an evil server attempts to impersonate a good server:
• The evil server obtains the certificate for the good server.
• The evil server uses an active network attack to arrange for traffic from a particular browser intended
for the good server to be sent to evil server instead.
• When a client attempts to open an HTTPS connection to the good server, evil server receives
connection open request and behaves just like the good server, returning the good server's certificate
at the appropriate point in the protocol.
Assuming that the evil server can obtain a valid certificate and mount an active network attack, can the
client's security be compromised? Explain your answer.

Answer:
• No, the bad server doesn’t have the good server’s private key, so it will not be able to decrypt the
client’s message.

HTTP is used by browsers to transfer information encoded in HTML. Browsers also can use HTTP to
transfer information not encoded in HTML. Describe different types of information (other than
HTML) regularly fetched using HTTP by browsers running modern web applications. (Note:
question ask about what is transported by the protocol, not what is in the protocol headers.)

Answer:
▪ Xml is also used to transfer information with http (XML is a markup language where
documents must be marked up correctly)

2. What does it mean to the user of a web applications if the browser shows an extended certificate such
as: (& Question Model 3 Q.2.3)

rather than a regular certificate:

Answer:
• Most lower-authentication certificates require only that you prove
▪ Ownership of the domain (DV SSL)
▪ Or validate your identity at an organizational level (OV SSL).
• Extended certificate (EV SSL) certificates add additional validation steps and offer the highest
level of authentication to safeguard your brand and protect your users.
Question 4:
-------------------------------------------------------- Transaction 1 --------------------------------------------------------
https://www.piazza.com/
GET / HTTP/1.1
Host: www.piazza.com
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip,
Cookie:piazza_session=EGyCDvHvKwuwCyLDEDGGtxGyFuHDEFGx.0;
__utma=231435806.1547084154.1357668061.1361132434.1361506957.15;
__utmz=231435806.1357668061.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmv=231435806.|2=user_type=instructor=1
Connection: keep-alive

HTTP/1.1 302 Found

Server: nginx/1.2.1.1431
Date: Fri, 22 Feb 2013 18:24:27 GMT
Content-Type: text/html; charset=utf-8 Content-Length: 86
Connection: close
Status: 302
X-Powered-By: Phusion Passenger (mod_rails/mod_rack) 3.0.7 Set-Cookie:
piazza_session=EGyCDvHvKwuwCyLDEDGGtxGyFuHDEFGx.0; path=/; expires=Thu, 22 Aug 2013 18:24:27 GMT; HttpOnly
X-Runtime: 0
Location: https://piazza.com/?
Cache-Control: no-cache
-------------------------------------------------------- Transaction 2 --------------------------------------------------------
https://connect.facebook.net/en_US/all.js

GET /en_US/all.js HTTP/1.1

Host: connect.facebook.net
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip
Connection: keep-alive
Content-Encoding: gzip
If-None-Match: "094376e05ec9a60405bad2f7c3718bf0"

HTTP/1.1 304 Not Modified

Content-Type: application/x-javascript;
charset=utf-8
Etag: "094376e05ec9a60405bad2f7c3718bf0"
Cache-Control: public, max-age=124
Expires: Fri, 22 Feb 2013 18:26:32 GMT
Date: Fri, 22 Feb 2013 18:24:28 GMT
Connection: keep-alive

What is the web server involved in these HTTP transactions? → Answer: Nginx
1. What is the name and version of the browser used in these transactions? → Answer: Firefox/19.0
2. Are any transactions returning compressed data? Specify what type of files transmitted:
Answer:
Content-Type: text/html
Content-Type: application/x-JavaScript
3. What data is returned by the browser in transaction 2 and why? → Nothing because the statues 304 not
modified
4. Transaction 1 returns “302 Found”. What does that mean? → Html page because type of content text/html
5. Name 3 headers used in these transactions for cache control
Answer:
Cache-Control: public, max-age=124
Cache-Control: no-cache
 Additional Questions from the Book
Class Work 1:

Class Work 2:
13. Consider the following HTTP transaction:

a) On what port is the web server running? →8895

b) What web browser is the client machine running? →mozilla 5.0
c) What is the method the server is being asked to execute? → post
d) What status code does webserver return if the request is handled successfully? → 200 ok
Exam Models:
Model 2:

3. Considering RUBY programming language:

a. What is the datatype of “Matt”?
b. Replace the “l” in the following string with “m” (word = “lace”)
c. x = 5 . Is x a string?
d. “I am not shouting”.upcase() . What does this line evaluate to?

4. Using RUBY, re-write the function for displaying odd numbers in question

Question 1:
Write about each:
• MIME, SMTP, POP3

MIME:
• Reliable delivery across wide largest range of environments.
• Content transfer encoding field
o Six values
o Three (7bit, 8bit, binary) no encoding done→ Provide info about nature of data.
• X-token
• Named nonstandard encoding
• Base 64
STMP:
• STMP uses persistent connection
• STMP requires that message (header &body) be in 7-bit ASCII.
• Certain character strings are not permitted in message (e.g. CRLF.CRLF) thus message has to be
encoded (usually into either base 64 or quoted printable)
• STMP server uses CRLF.CRLF to determine end of message.

STMP:
• Emails are stored on a single device.
• Sent emails are stored in a single device.
• Emails can be accessed from a single device

Model 3:
Question 1:
Q1) Indicate whether each of the following statement is True or False and explain your answer briefly.

a) In HTML entities are used to incorporate external content into a Web page, such as images.
Answer: False, entities are used to display Reserved characters in HTML, such as “<” and “>”.
e.g. → To display a less than sign (<) we must write: &lt; (&lt; is the HTML entity)

b) A single partial-page template in rails can be used in more than one Web Page.
Answer: True, a partial can be rendered any number of times, either within the same page, or in
different pages.
 c) When a user places an order via the web and posts the final “Confirm” form for the purchase, the
web server should normally return HTML for the order confirmation page in the response for the
HTTP request.
Answer: False, the normal response to a form post should be to redirect the browser, so that the
post-action does not appear in the browser’s history list.

d) Suppose that an online retailer uses a relational database to keep track if orders, and one table
contains a row for each order. If an order contains several items, the foreign keys for each of those
items would typically be stored in the row for that order.
Answer: False, A row in a database cannot contain a variable number of items; thus, a separate join
table should be used to keep track of the items in orders.

e) In a scripting language types are typically associated with values, not variables. (+quiz 2020)
Answer: True, Variables are typically not declared in scripting language is, so there is no
opportunity to assign them a type

f) Web browsers are stateless: if a browser isn’t displaying a page for a particular server it need not
retain any state related to that server. (+quiz 2020)
Answer: False, Web servers are stateless, not browsers. In particular, a browser must retain cookies,
which store state related to particular servers.

Question 3:

Question 4:
Given the URL → http://web.stanford.edu/class/cs142/exams.html?v=win1617#midterm
A. Fill in the blanks:

• Query parameter → ?v=win1617

• Host name → /web.stanford.edu
• Protocol → http
• Hierarchical potion → /class/cs142/exams.html
• Anchor → #midterm

B. Without using a full URL, complete the HTML snippets below, making sure to write the shortest
possible link to get the URL above if:
• The browser is currently at http://web.stanford.edu/class
<a href="./cs142/exams.html"> Link A</a>

• The browser is currently at http://web.stanford.edu/schedule

 <a href="../class/cs142/exams.html">Link B</a>

Q1) Discuss why we need the standard of HTML. (quiz 2020)

• The first ever standard to emerge from the W3C, is widely used on the Web.

• It is by far the most common tool for designing Web pages, which is why people usually refer to
HTML as the backbone of the WWW.

• Thanks to HTML structuring elements (tags), text documents interpreted by browsers can display
their contents according to specified formats. HTML is one of the main reasons why the Web has
become so popular over the years.

Q2) Explain Site development process (OR) Mention briefly website development process (quiz 2020)
Answer:

.
 Midterm 2021 – 2022
Question 1:
1. Web Applications are revolutionary compared to traditional application. Discuss.
2. Explain What are the main function of Domain Names? Mention the Top-Level Domains.
3. Write about Each: MIME, SMTP, POP3
4. Web servers are stateless, not browsers. Discuss.
5. What does the web server typically do with the following html fragment?
<a href="#top">Top</a>

Question 2:
A. Consider the following HTML code:
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
<p>This is a another paragraph.</p>
</body>
</html>
1. What is CSS? What are the advantages of using an external CSS file in Web Pages?
2. Add an external style sheet with the URL: “mystle.css”
3. Set “background-color:linen” for the page, using an internal style sheet.
4. Set “background-color:yellow” for the page, using an inline style.

B. Write HTML code to create REGISTERATION FORM for a subscription in spot club, including
all important items using different HTML elements as possible. Sketch your code output form.
 Final 2021 – 2022
Question 1:
I. Sharing accurate information was considered as a key to socially fight covid pandemic lies. Write
down steps for fast designing “Corona Virus Awareness web site”. Showing steps, concepts you
may follow, ideas may be utilized and tools roles [5 marks].

II. Write JavaScript function to find the highest value in a list of numbers passed as parameters to
function FindMax. Use argument object to write your code. [5 marks]

III. Write the HTML5 code to add video element to your webpage. Write the functions script required to
use video built-in controls (play, pause, seek), add controls for display size (Big, Small, Normal).
[5 marks].

Question 2:
I. Answer in short sentences [10 marks]
1. Explain the packet switching with TCP/IP.
2. Explain the syntax of a uniform resource locator. Show some security considerations to URL.
3. Draw a figure explaining Client / MVC web application.
4. What are the components of the email? Briefly explain the basic functions of the mail user agent.
5. Cloud computing platforms work well for web application startup companies.

II. An attacker can exploit broken authentication and session management functions to impersonate a
user, the attacker only needs to acquire knowledge of a user’s session cookie ID. This information
can be revealed to an attacker in several ways. Discuss. [3 marks]

III. A web application receives a HTTP response header from an HTTP GET request that contains the
following line: [2 marks]
Cache-Control: max-age=2628000

1. Describe benefit a web application would get from having that line in a HTTP GET response
header. Give an example of a HTTP GET request done by your website that it would be
appropriate to apply this line.
2. Describe the disadvantage of having this line on a HTTP GET response. Given an example of a
HTTP GET response done by your website that it would be inappropriate?

Question 3:
I. Write the HTML code to generate the following table: [3 marks]
Beta
Tilde Lambda
Gamma
Alpha 1 2 3 4
Delta Theta
Zeta
Omega Kappa

II. Write a style sheet that expresses that H1 and H2 should always be centered and always be red. Add
a rule for a class bGreen that define text in bold and green. [2 marks]
III. Write the HTML code that replaces the BODY section to generate the following frames: top 100
pixels for a header head.html, a bottom frame with left 200 pixels for a menu in menu.html and the
remainder containing main.html. [2 marks]
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Iframe</title>
<style>
* { margin: 0; }
body,html { height: 100%; }
iframe { border: none; }
.grid {
display: grid;
grid-template-areas:
'header header'
'menu main';
grid-template-rows: 100px 1fr;
grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
</style>
</head>
<body class="grid">
<div class="header">
<iframe src="./head.html" height="100%" width="100%"></iframe>
</div>
<div class="menu">
<iframe src="./menu.html" height="100%" width="100%"></iframe>
</div>
<div class="main">
<iframe src="./main.html" height="100%" width="100%"></iframe>
</div>
</body>
</html>
Head.html

<!DOCTYPE html>
<html lang="en">
<body style="background-color: skyblue">
<h1>header</h1>
</body>
</html>

• menu.html & main.html have the same structure as “head.html”.

• For this to work… all html files should be served from the same relative path as “index.html” file.
IV. Consider the following HTML form:
<form name="myf" action="myScript.cgi" method="post">

First: <input name="var1" type="text" size="20" />

<input name="cb1" type="checkbox" /> <br />

Second: <input name="var2" type="text" size="20" />

<input name="cb2" type="checkbox" /> <br />

Third: <input name="var3" type="text" size="20" />

<input name="cb3" type="checkbox" /> <br />

<hr />
Subtotal: $ <input type="text" name="stot" /><br />
<hr />
Tax7%: $ <input type="text" name="tax" /><br />
<hr />
Total: $ <input type="text" name="tot" /><br />
<hr />
<input type="submit" value="Submit Query" />
&nbsp; &nbsp;
<input type="reset" />
</form>

1. Write a JavaScript function and indicate the changes in the form such that only digits and “.” Are
allowed when entering “first”, “second”, and “third” and when the value is correct the
corresponding checkbox is selected. [3 marks]

2. Write a JavaScript function and indicate the changes in the form such that when a checkbox is
unselected the corresponding value is reset to 0. [3 marks]

3. Adjust your JavaScript code such that the subtotal, the tax and the total are calculated whenever a
value is changed [2 marks]
V. Write the code to display a form along with JavaScript as shown below. User should be able to select
a picture after clicking on browse button and when he presses “click” button, the picture should be
displayed.
Next the user should be able to enter value of image height and width and when he presses “apply”
button, the size of picture should change as shown: [5 marks]

Answer
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="./app.js"></script>
<style>
.img-container {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<form name="f1">
<div>
<label for="originalImgInput"> Select the image that you want to display </label>
<br />
<input id="originalImgInput" type="file" />
</div>

<div class="img-container">
<img id="originalImgPreview" name="originalImgPreview" />
</div>

<div>
<label for="height">specify the new height</label>
<input id="height" type="number" />
</div>

<div>
<label for="width">specify the new width</label>
<input id="width" type="number" />
</div>
<button id="apply">apply</button>
</form>
</body>
</html>
app.js
const originalImgInput = document.querySelector('#originalImgInput')
const originalImg = document.querySelector('#originalImgPreview')
const height = document.querySelector('#height')
const width = document.querySelector('#width')
const resizeBtn = document.querySelector('#apply')

function createImgPreview() {
const file = originalImgInput.files[0]
if (file) {
const reader = new FileReader()
reader. () {
originalImg.src = reader.result
}
reader.readAsDataURL(file)
}
}

function resize(img, height, width) {

img.width = width
img.height = height
}

originalImgInput.addEventListener('change', createImgPreview)

resizeBtn.addEventListener('click', event => {

event.preventDefault()
resize(originalImg, height.value, width.value)
})