Scribd
Upload
20 views14 pages

KTU Web Programming QPs

The document covers various topics related to web programming, including MIME, URIs, URLs, and HTML coding. It explains the significance of MIME in handling multimedia content, defines URIs and URLs, and provides examples of HTML elements and forms. Additionally, it discusses HTTP request and response formats along with the purpose of specific HTTP headers.

Uploaded by

Reny Mathew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views14 pages

KTU Web Programming QPs

The document covers various topics related to web programming, including MIME, URIs, URLs, and HTML coding. It explains the significance of MIME in handling multimedia content, defines URIs and URLs, and provides examples of HTML elements and forms. Additionally, it discusses HTTP request and response formats along with the purpose of specific HTTP headers.

Uploaded by

Reny Mathew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

WEB PROGRAMMING

Assignment
1. Why do you call MIME an extension feature? Justify with suitable statements.
A. MIME (Multipurpose Internet Mail Extensions) is considered an extension feature
because:
Expands Capabilities: MIME extends traditional email protocols, allowing the transfer of
multimedia content like images, audio, and video, beyond just plain text.
Uses Additional Headers: It introduces new headers to structure different content
types, enabling complex content within emails.
Backward Compatibility: MIME messages are still compatible with
non-MIME-compliant systems, ensuring that emails can be received even if certain
features are not displayed correctly.

2. Define URI’s and URL


A. URI (Uniform Resource Identifier): A URI is a string that uniquely identifies a resource
on the internet. It can provide either a location or a name for the resource, using different
schemes such as http, ftp, or mailto. All URLs are URIs, but not all URIs are URLs.
URL (Uniform Resource Locator): A URL is a specific type of URI that provides the
address of a resource on the internet, including the protocol (like http or https) and the
path to the resource (like www.example.com/page).

3. Define WWW. List any two examples of web server & web browser. Differentiate between
URL and a domain?
A. WWW (World Wide Web): The World Wide Web (WWW) is a system of interlinked
hypertext documents and multimedia content accessible over the internet using web
browsers. It allows users to navigate and interact with information through hyperlinks and
URLs.
Examples of Web Servers and Web Browsers:

● Web Servers: Apache HTTP Server, Nginx


● Web Browsers: Google Chrome, Mozilla Firefox

Difference between URL and Domain:

● URL (Uniform Resource Locator): A URL specifies the exact address of a specific
resource on the internet, including the protocol (like http or https), domain, and path
(e.g., www.example.com/page).
● Domain: A domain is the main part of a URL that identifies the website, such as
example.com. It does not include the protocol or specific paths within the website.

4. What is MIME? Give the expansion of MIME. List four examples for MIME types. State the
reason why MIME type specification is necessary in a request-response transaction between a
browser and server.
A. 1. MIME: MIME, or Multipurpose Internet Mail Extensions, is a standard that allows
internet systems to understand and handle various types of data, such as text, images,
audio, and video, within emails and web pages.

2. Expansion: MIME stands for Multipurpose Internet Mail Extensions.

3. Examples of MIME Types:

● text/html for HTML documents


● image/jpeg for JPEG images
● application/json for JSON data
● audio/mpeg for MP3 audio files

4. Importance of MIME Type Specification: MIME type specification is essential in a


request-response transaction because it tells the browser how to handle and display the
received content. For instance, it distinguishes between text/html (displayed as a
webpage) and application/json (processed as data), ensuring that content is correctly
interpreted.

5. Write the code for an HTML document with embedded JavaScript scripts, which initially
displays a paragraph with text "Welcome" and a button titled "Click". When the button is clicked,
the message "Hello from JavaScript" in bold should replace the paragraph text

A. <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Interactive Message</title>

</head>

<body>

<p id="message">Welcome</p>

<button onclick="changeMessage()">Click</button>

<script>

function changeMessage() {
document.getElementById("message").innerHTML = "<b>Hello from JavaScript</b>";

</script>

</body>

</html>

6. What are different ways of adjusting spacing in a text with suitable example.

A. 1. Line Height : Adjusts the space between lines of text within a paragraph or block.

<p style="line-height: 1.8;">This paragraph has increased line spacing.</p>

2. Letter Spacing: Adjusts the space between individual letters in text.

<p style="letter-spacing: 2px;">This text has increased letter spacing.</p>

3. Word Spacing: Controls the space between words in a sentence or block of text.

<p style="word-spacing: 5px;">This sentence has more space between words.</p>

4. Text Indent: Indents the first line of a paragraph by a specified amount.

<p style="text-indent: 20px;">This paragraph has an indented first line.</p>

5. Padding: Adds space inside an element, affecting the area between the content and
the element's border.

<p style="padding: 10px;">This paragraph has padding around the text.</p>

6. Margin: Adds space outside an element, affecting the distance between it and other
elements.

<p style="margin: 15px 0;">This paragraph has a margin, adding space around it.</p>

7. (a) Design a webpage that displays the following table.

A. <!DOCTYPE html>

<html>

<head>

<title>Recommended Intake Table</title>


</head>

<body>

<table>

<thead>

<tr>

<th>Food Item</th>

<th>age<15</th>

<th>age>15</th>

<th>Ceriâs</th>

<th>NonCeritâs</th>

</tr>

</thead>

<tbody>

<tr>

<td>Recommended Intake</td>

<td>age<15</td>

<td>age>15</td>

<td>1000</td>

<td>450</td>

</tr>

<tr>

<td>Kcal</td>

<td>2000</td>

<td>2000</td>
<td>750</td>

<td>800</td>

</tr>

<tr>

<td>gm</td>

<td>1000</td>

<td>750</td>

<td>350</td>

<td>600</td>

</tr>

<tr>

<td>Kcal</td>

<td>2000</td>

<td>1760</td>

<td>1760</td>

<td>600</td>

</tr>

</tbody>

</table>

</body>

</html>

(b) What is the difference between radio buttons and checkboxes when implemented using
HTML?

Write HTML code to implement a form which has the following elements:

i. A textbox which can accept a maximum of 25 characters


ii. Three radio buttons with valid Label, Names and values

iii. Three check boxes buttons with valid Label, Names and values

iv. A selection list containing four items, two which are always visible

v. A submit button clicking on which will prompt the browser to send the form data to the server
“http://www..mysite.com/reg.php” using “POST” method and reset button to clear its contents.
You can use any text of your choice to label the form elements.

A. 1. Radio Buttons:

- Used when only one option can be selected from a set of options.

- All radio buttons in a group share the same name attribute, which ensures that only
one can be selected at a time.

2. Checkboxes:

- Used when multiple options can be selected from a set of options.

- Each checkbox can be independently checked or unchecked.

HTML Code for the Form:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Example</title>

</head>

<body>

<h2>User Registration Form</h2>

<form action="http://www.mysite.com/reg.php" method="POST">

<label for="username">Username (max 25 characters):</label>


<input type="text" id="username" name="username" maxlength="25"
required><br><br>

<label>Choose your gender:</label><br>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label><br><br>

<label>Select your hobbies:</label><br>

<input type="checkbox" id="reading" name="hobbies" value="reading">

<label for="reading">Reading</label><br>

<input type="checkbox" id="travelling" name="hobbies" value="travelling">

<label for="travelling">Travelling</label><br>

<input type="checkbox" id="sports" name="hobbies" value="sports">

<label for="sports">Sports</label><br><br>

<label for="country">Select your country:</label><br>

<select id="country" name="country">

<option value="usa">USA</option>

<option value="india">India</option>

<option value="uk">UK</option>

<option value="australia">Australia</option>

</select><br><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset">


</form>

</body>

</html>

Explanation of the Form Elements:

1. Textbox:

- The input type is text with a maxlength="25" attribute to limit the input to 25
characters.

2. Radio Buttons:

- Three radio buttons with valid labels (Male,Female, Other) and names (gender) to
ensure only one can be selected at a time.

3. Checkboxes:

- Three checkboxes for hobbies (Reading, Travelling, Sports), allowing the user to
select multiple options.

4. Selection List:

- A dropdown list containing four countries, with two options (USA and India) always
visible in the list.

5. Submit and Reset Buttons:

- The form's submit button sends the form data to http://www.mysite.com/reg.php using
the POST method.

- The reset button clears all input fields.

8. (a) Write the equivalent HTML code for the following :

1) An image titled flower.jpg with proper attribute to set height, width and message text.

2) Unordered list with values tea, coffee and milk.

A. 1) <img src="flower.jpg" alt="Flower Image" height="300" width="400">

<p>This is the flower image.</p>

2) <ul>

<li>Tea</li>
<li>Coffee</li>

<li>Milk</li>

</ul>

(b) Explain following HTML tags with proper examples:

1.<textarea> 2.<span> 3.<tr> 4. <form> 5. <a>

A. 1. <textarea>:

The <textarea> tag is used to create a multi-line text input field where users can type
longer text. Unlike the <input> tag, which is a single-line input, <textarea> allows for a
block of text to be entered.

<textarea id="comment" name="comment" rows="4" cols="50"></textarea>

2. <span>:

The <span> tag is an inline container used to group elements for styling purposes or to
apply specific attributes to a small section of content within a block-level element.

<p>This is a <span style="color: red;">red</span> word in a sentence.</p>

3. <tr>:

The <tr> tag defines a row of cells in a table. It is used within a <table> element to
group table data into rows.

<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>Alice</td>

<td>25</td>

</tr>
<tr>

<td>Bob</td>

<td>30</td>

</tr>

</table>

4.<form>:

The <form> tag is used to create an HTML form for user input. It can contain various
input elements such as text fields, checkboxes, buttons, etc.

<form action="/submit_form" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

<input type="submit" value="Submit">

</form>

5. <a>:

The <a> tag is used to define hyperlinks, allowing users to navigate to another webpage
or resource.

<a href="https://www.example.com" target="_blank">Visit Example</a>

9. (a) Design a webpage that displays the following table

A. <!DOCTYPE html>

<html>

<head>

<title>Vehicle Models</title>

</head>

<body>

<table>
<thead>

<tr>

<th>Company</th>

<th>Model</th>

</tr>

</thead>

<tbody>

<tr>

<td>Dodge</td>

<td>Challenger</td>

</tr>

<tr>

<td>Maruti</td>

<td>Swift</td>

</tr>

<tr>

<td>Jeep</td>

<td>Wrangler</td>

</tr>

<tr>

<td>Ford</td>

<td>Fiesta</td>

</tr>

<tr>
<td>BMW</td>

<td>BMW 5 Series</td>

</tr>

<tr>

<td>Fusion</td>

<td>Escape</td>

</tr>

</tbody>

</table>

</body>

</html>

(b) Write down the general format of an HTTP request and an HTTP response. What is the
purpose of the following HTTP headers? Also, identify whether they are included with an HTTP
header/response or both.

i. host ii. last-modified

A. 1. General Format of an HTTP Request:

An HTTP request is sent by the client (usually a web browser) to the server to request a
resource.

Format:

<HTTP Method> <Request-URI> <HTTP Version>

<Header 1>: <Value 1>

<Header 2>: <Value 2>

...

<Header N>: <Value N>

<Body (optional)>

Example:
GET /index.html HTTP/1.1

Host: www.example.com

User-Agent: Mozilla/5.0

Accept-Language: en-US

Connection: keep-alive

2. General Format of an HTTP Response:

An HTTP response is sent by the server back to the client with the requested resource or
an error message.

Format:

<HTTP Version> <Status Code> <Reason Phrase>

<Header 1>: <Value 1>

<Header 2>: <Value 2>

...

<Header N>: <Value N>

<Body (optional)>

Example:

HTTP/1.1 200 OK

Date: Tue, 10 Nov 2024 10:00:00 GMT

Server: Apache/2.4.1

Content-Type: text/html

Content-Length: 305

<html>

<head><title>Welcome</title></head>

<body><h1>Welcome to the website</h1></body>


</html>

Purpose of HTTP Headers:

i. Host Header

The Host header specifies the domain name of the server (e.g., www.example.com) and
is used in HTTP/1.1 requests to support multiple websites on a single server (virtual
hosting). It is included with HTTP request.

Example :Host: www.example.com

ii. Last-Modified Header

The Last-Modified header indicates the date and time when the requested resource was
last modified on the server. This helps in caching by allowing the client to check if it
already has the latest version of the resource.It is included with HTTP response.

You might also like