Subject: Basics of Web Designing

Assignment – 2

Submission Date: 02-12-2024

---------------------------------------------------------------------------------------------------------------
1. Explain frame and its different type with example.

 Frames

 With frames, you can display more than one Web page in the same browser
window.

 With frames, you can display more than one HTML document in the same
browser window.

 Each HTML document is called a frame, and each frame is independent of

the others.

 The disadvantages of using frames are:

 The web developer must keep track of more HTML documents

 It is difficult to print the entire page

 The Frameset Tag

• The <frameset> tag defines how to divide the window into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the amount of screen area each
row/column will occupy
• The <frame> tag defines what HTML document to put into each frame
• In the example below we have a frameset with two columns.
• The first column is set to 25% of the width of the browser window.
• The second column is set to 75% of the width of the browser window.
<frameset cols="25%,75%">
 <frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
• Note: The frameset column size value can also be set in pixels
(cols="200,500"), and one of the columns can be set to use the remaining
space (cols="25%,*").

 Frameset Types

 Vertical Frameset

Divide the browser window into vertical sections.

<frameset cols="50%,50%">

<frame src="left.html">

<frame src="right.html">

</frameset>

cols attribute specifies the width of each frame.

 Horizontal Frameset
Divide the browser window into horizontal sections
<frameset rows="50%,50%">
<frame src="top.html">
<frame src="bottom.html">
</frameset>

rows attribute specifies the height of each frame.

 No Frames
Provide content for browsers that do not support frames.
<noframes>
Your browser does not support frames.
</noframes>

 Mixed Frames
Combine horizontal and vertical frames in a nested manner.

<frameset rows="50%,50%">
<frame src="top.html">
 <frameset cols="50%,50%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>

 Navigation frame
This example demonstrates how to make a navigation frame. The navigation
frame contains a list of links with the second frame as the target.
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="frame_a.htm" name="showframe">
</frameset>

 Inline Frame
Provide content for embedding external resources or documents within the
current webpage.
<iframe src="URL" width="600" height="400" title="description">
Your browser does not support inline frames.
</iframe>

2. What is the use of an iframe tag? Explain with example.



What is the Use of the <iframe> Tag?

The <iframe> tag is used to embed an external resource, such as another webpage,
video, map, or widget, into the current HTML document. "Iframe" stands for "Inline
Frame", which means it allows external content to be displayed inline within the layout
of the parent page.
Uses of <iframe>:
 Embedding Webpages
Display another webpage or content from a different URL within the parent
page.
Example: Embedding a Terms and Conditions page.
 Embedding Videos
Include videos, such as YouTube videos, directly on the webpage.
 Interactive Maps or Widgets
Embed interactive Google Maps, calendars, or other widgets.
 Security and Privacy Options
Control embedded content using attributes like sandbox to restrict functionality.
<iframe src="https://www.youtube.com/embed/dD2EISBDjWM" width="560"
height="315" title="YouTube Video" allowfullscreen>
Your browser does not support inline frames.
 </iframe>

3. Explain Image Maps with suitable example.

Example: Creating an Image Map

Image with clickable areas linking to different pages:
<img src="world-map.jpg" alt="World Map" usemap="#worldmap" width="800" height="400">

<map name="worldmap">

<area shape="rect" coords="50,50,200,150" href="https://example.com/north-america" alt="North America">

<area shape="circle" coords="400,120,50" href="https://example.com/europe" alt="Europe">

<area shape="poly" coords="600,300,650,350,700,300,650,250" href="https://example.com/australia" alt="Australia">

</map>

Explanation of the Example

The Image: The <img> tag displays the image and connects it to the map using usemap="#worldmap".

The Map: The <map> tag defines the clickable regions, with the name="worldmap" linking it to the usemap attribute of the image.

The Areas: Each <area> specifies:

 Shape (rect, circle, or poly): The type of clickable area.

 Coords: Coordinates defining the clickable region.
 Href: The link to navigate when the area is clicked.

• .Alt: Alternate text for accessibility.

Shapes and Coordinate Details

Rectangle (rect):
coords="x1,y1,x2,y2"

(x1, y1) is the top-left corner, and (x2, y2) is the bottom-right corner.

Circle (circle):
coords="x,y,r"

(x, y) is the center, and r is the radius.

Polygon (poly):
coords="x1,y1,x2,y2,x3,y3,...,xn,yn"

Specifies a series of points forming a closed shape.

Output of the Example

The world-map.jpg image will display on the page with the following clickable regions:

 A rectangular area for North America.

 A circular area for Europe.
 A polygonal area for Australia.

4. Explain form and its attributes.



What is a Form in HTML?

A form in HTML is an element used to collect user input and send it to a server for processing. Forms are essential for interactive web pages,
enabling functionalities like login, registration, search, and more.

Forms are defined using the <form> tag, which can contain input elements such as text fields, radio buttons, checkboxes, drop-down menus,
and submit buttons.

Attributes of <form>

Here are the common attributes of the <form> tag:

 Example of a Basic Form

<form action="/submit-form.php" method="post">

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

<input type="text" id="name" name="user_name" placeholder="Enter your name"><br><br>

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

<input type="email" id="email" name="user_email" placeholder="Enter your email"><br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="user_password"><br><br>

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

</form>

Form Elements

Forms include a variety of elements to collect data:

1. Text Fields (<input type="text">): For single-line text input.

2. Password Field (<input type="password">): Hides user input for security.
3. Email Field (<input type="email">): For email addresses.
4. Radio Buttons (<input type="radio">): Select one option from a group.
5. Checkboxes (<input type="checkbox">): Select multiple options.
6. Drop-Down List (<select>): Provide a list of options.
7. Submit Button (<input type="submit">): Submits the form.
8. File Upload (<input type="file">): Allows file uploads.

Example with Multiple Elements :

<form action="/submit-data.php" method="post" enctype="multipart/form-data">

<label for="username">Username:</label>

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

<label for="gender">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><br>

<label for="hobbies">Hobbies:</label><br>

<input type="checkbox" id="hobby1" name="hobbies" value="coding">

<label for="hobby1">Coding</label><br>

<input type="checkbox" id="hobby2" name="hobbies" value="drawing">

<label for="hobby2">Drawing</label><br><br>
 <label for="country">Country:</label>

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

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

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

<option value="canada">Canada</option>

</select><br><br>

<label for="profile">Upload Profile Picture:</label>

<input type="file" id="profile" name="profile_picture"><br><br>

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

</form>

Key Notes

 Validation: Use required, pattern, or type attributes for client-side validation.

 Security: Use POST for sensitive data to avoid exposing it in the URL.
 Responsiveness: Combine forms with CSS for styling and JavaScript for advanced interactivity.

5. Explain all input element of form with suitable syntax.

HTML <input> Element

The <input> element in HTML is used to create interactive controls within a form. It allows users to enter different types of data, such as text, numbers, or
files, which can then be sent to a server for processing.

Common Attributes of the <input> Element

Types of <input> Elements

1. Text Input

Used for single-line text input.

Example:

<input type="text" name="username" placeholder="Enter your name">

2. Password Input

Hides the characters entered for privacy.

Example:

<input type="password" name="password" placeholder="Enter your password">

3. Email Input

Validates the format of an email address.

Example:
<input type="email" name="email" placeholder="Enter your email">

4. Number Input

Accepts numeric values, with optional step increments.

Example:

<input type="number" name="age" min="1" max="100" step="1">

5. Date Input

Allows the user to select a date from a calendar.

Example:

<input type="date" name="dob">

6. Checkbox

Allows multiple options to be selected.

Example:

<input type="checkbox" name="hobby" value="coding"> Coding

<input type="checkbox" name="hobby" value="drawing"> Drawing

7. Radio Button

Only one option can be selected from a group.

Example:

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

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

8. File Input

Used for uploading files.

Example:

<input type="file" name="profile_picture">

9. Submit Button

Submits the form data to the server.

Example:

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

10. Reset Button

Resets the form fields to their initial values.

Example:

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

11. Button

Creates a clickable button, often used with JavaScript.

Example:

<input type="button" value="Click Me" onclick="alert('Button clicked!')">

12. Color Input

Allows users to pick a color.

Example:

<input type="color" name="favcolor">

13. Range Input

Lets users select a value within a specified range.

Example:

<input type="range" name="volume" min="0" max="100">

14. Telephone Input

Used for entering phone numbers.

Example:

<input type="tel" name="phone" placeholder="Enter your phone number">

15. Search Input

Used for search fields with semantic meaning.

Example:

<input type="search" name="search" placeholder="Search...">

16. URL Input

Validates the format of a URL.

Example:

<input type="url" name="website" placeholder="Enter website URL">

17. Hidden Input

An invisible field used to store data (such as session information).

Example:

<input type="hidden" name="userid" value="12345">

18. Image Button

Submits a form using an image as the button.

Example:

<input type="image" src="submit-button.png" alt="Submit" width="100">

Complete Example of a Form Using Various Input Elements

<!DOCTYPE html>

<html>

<head>

<title>HTML Input Types</title>

</head>

<body>

<h1>Form with Various Input Elements</h1>

<form action="/submit-data" method="post">

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

<input type="text" id="username" name="username" placeholder="Enter your name" required><br><br>

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

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

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob"><br><br>

<label for="favcolor">Favorite Color:</label>

<input type="color" id="favcolor" name="favcolor"><br><br>

<label for="hobby">Hobbies:</label><br>

<input type="checkbox" id="coding" name="hobby" value="coding"> Coding<br>

<input type="checkbox" id="drawing" name="hobby" value="drawing"> Drawing<br><br>

<label>Gender:</label><br>

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

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

 <label for="profile">Upload Profile Picture:</label>

<input type="file" id="profile" name="profile_picture"><br><br>

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

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

</form>

</body>

</html>

6. Distinguish between Checkbox and Radio Button used in HTML forms.

7. Explain button and its property.

Button and its Properties in HTML
The <button> element in HTML is used to create clickable buttons within a form or as standalone controls. It can be used to trigger
actions, such as submitting a form, running a JavaScript function, or navigating to another page.
Properties of the <button> Element
1. type
o Specifies the behavior of the button.
o Values:
 submit: Submits the form (default if no type is specified).
 reset: Resets the form fields to their default values.
 button: A generic button that can be used for custom actions (requires JavaScript).
Example:
<button type="submit">Submit</button>

2. name
o Assigns a name to the button, which can be used to reference it in scripts or identify it on the server when the form
is submitted.
Example:
<button name="submitBtn">Submit</button>

3. value
o Specifies the value that will be sent to the server when the button is clicked (if it's inside a form).
o Only applicable to submit and reset buttons.
Example:
<button type="submit" value="submitForm">Submit</button>

4. disabled
o Disables the button, making it unclickable and unresponsive.
Example:
<button disabled>Submit</button>

5. autofocus
 o Automatically focuses the button when the page loads, allowing it to be clicked or activated without requiring the
user to click on it first.
Example:
<button autofocus>Click Me</button>

6. form
o Specifies the form to which the button belongs. This is useful when the button is outside the <form> tag but still
submits the form.
Example:
<form id="myForm">
<button form="myForm" type="submit">Submit</button>
</form>

7. formaction
o Specifies the URL to which the form data is submitted when the button is clicked (overrides the form’s action
attribute).
Example:
<button type="submit" formaction="submitForm.php">Submit</button>

8. formmethod
o Defines the HTTP method (GET or POST) to be used when submitting the form (overrides the form’s method
attribute).
Example:
<button type="submit" formmethod="POST">Submit</button>

9. formtarget
o Specifies where to display the response after form submission (overrides the form's target attribute).
Example:
<button type="submit" formtarget="_blank">Submit</button>

10. title
o Specifies extra information about the button, often displayed as a tooltip when the user hovers over the button.
Example:
<button title="Click to submit your form">Submit</button>

Example: Button with Different Properties

<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
</head>
<body>
<h1>Button Element and its Properties</h1>

<form action="/submit" method="post">

<button type="submit" name="submitBtn" value="submitForm">Submit</button>
<button type="reset" name="resetBtn" value="resetForm">Reset</button>
<button type="button" onclick="alert('Button clicked!')">Click Me</button>
<button type="submit" disabled>Disabled Submit</button>
</form>

</body>
</html>
In this example:
 The first button submits the form with a submit type.
 The second button resets the form with a reset type.
 The third button runs a custom JavaScript function when clicked.
 The fourth button is disabled and cannot be clicked.
Key Points
 The <button> element can be customized to perform different actions based on its type, onclick, and other
attributes.
 It can be used for form submission, form reset, or custom JavaScript actions.

8. Explain about Grouping the controls of HTML Form

<label> Element for Grouping
  Purpose: The <label> element is used to associate a text description with a form
control. It helps group the control with its label, making it clear for the user what
information is being requested.
 Usage: You can wrap form controls inside a <label> element or associate them
using the for attribute.
Example

<form>
<label>
Name:
<input type="text" name="name">
</label><br><br>

<label>
Email:
<input type="email" name="email">
</label><br><br>

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

</form>

Explanation:
 By wrapping the <input> inside a <label>, the label text and the input field are
grouped together, making the form more accessible and easier to navigate.

9. Write a HTML code to generate following output.

<table border="1" width="100%">

<caption>Specification Table with Hours and Marks</caption>
<thead>
<tr>
<th rowspan="2">Unit No.</th>
<th rowspan="2">Unit Title</th>
 <th rowspan="2">Teaching Hours</th>
<th colspan="4">Distribution of Theory Marks</th>
</tr>
<tr>
<th>R Level</th>
<th>U Level</th>
<th>A Level</th>
<th>Total Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>I</td>
<td>Introduction to Internet Technology</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>0</td>
<td>8</td>
</tr>
<tr>
<td>II</td>
<td>Basics of HTML & CSS</td>
<td>6</td>
<td>0</td>
<td>2</td>
<td>6</td>
<td>8</td>
</tr>
<tr>
<td>III</td>
<td>Active Server Pages 3.0</td>
<td>6</td>
<td>4</td>
<td>8</td>
<td>0</td>
<td>12</td>
</tr>
<tr>
<td>IV</td>
<td>Server Side Coding with VBScript and XML</td>
<td>8</td>
<td>2</td>
<td>4</td>
<td>8</td>
<td>14</td>
</tr>
<tr>
<td>V</td>
<td>ASP Objects & Components</td>
 <td>10</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>14</td>
</tr>
<tr>
<td>VI</td>
<td>Accessing database with ASP & ADO</td>
<td>10</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>14</td>
</tr>
<tr>
<th style="border: 0;"></th>
<th>Total</th>
<th>42</th>
<th>18</th>
<th>26</th>
<th>26</th>
<th>70</th>
</tr>
</tbody>
</table>

10. Create HTML form to enter employee details (First Name, Last Name, Email,
Mobile, Gender, Date of Birth, Marital Status, Hobby, Education, Languages known,
Country, State, and City, , Upload Photo, Additional Information, Submit, Reset).

<form action="#" method="post">

<table border="1 " align="center">
<caption><h1>Employee Details Form</h1></caption>
<tr>
<td><label for="first_name">First Name:</label></td>
<td><input type="text" id="first_name" name="first_name"
placeholder="First_name"
required></td>
</tr>
<tr>
<td><label for="last_name">Last Name:</label></td>
<td><input type="text" id="last_name" name="last_name"
placeholder="Last_name"
required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" placeholder="Email"
required></td>
</tr>
<tr>
<td><label for="mobile">Mobile:</label></td>
<td><input type="tel" id="mobile" name="mobile" placeholder="Number"
required></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" id="male" name="gender"
value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender"
value="other">
<label for="other">Other</label>
</td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<tr>
<td><label for="marital_status">Marital Status:</label></td>
<td>
<select id="marital_status" name="marital_status"
required>
<option value="select"> Select</option>
<option value="single">Single</option>
<option value="married">Married</option>
<option value="divorced">Divorced</option>
</select>
</td>
</tr>
<tr>
<td>Hobby:</td>
<td>
<input type="checkbox" id="hobby_reading" name="hobby"
value="Reading" checked>
<label for="hobby_reading">Reading</label><br>
<input type="checkbox" id="hobby_traveling" name="hobby"
value="Traveling">
<label for="hobby_traveling">Traveling</label><br>
<input type="checkbox" id="hobby_sports" name="hobby"
 value="Sports">
<label for="hobby_sports">Sports</label>
</td>
</tr>
<tr>
<td><label for="education">Education:</label></td>
<td>
<select id="education" name="education" required>
<option value="select"> Select</option>
<option value="high_school">High School</option>
<option value="undergraduate">Undergraduate</option>
<option value="graduate">Graduate</option>
<option value="post_graduate">Post Graduate</option>
</select>
</td>
</tr>
<tr>
<td><label for="languages">Languages Known:</label></td>
<td><input type="text" id="languages" name="languages"
placeholder="e.g., English, Spanish"></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td><input type="text" id="country" name="country" placeholder="Country"
required></td>
</tr>
<tr>
<td><label for="state">State:</label></td>
<td><input type="text" id="state" name="state" placeholder="State"
required></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input type="text" id="city" name="city" placeholder="City"
required></td>
</tr>
<tr>
<td><label for="photo">Upload Photo:</label></td>
<td><input type="file" id="photo" name="photo"
accept="image/*"></td>
</tr>
<tr>
<td><label for="additional_info">Additional
Information:</label></td>
<td><textarea id="additional_info" name="additional_info"
rows="4" cols="30"
placeholder="Enter any additional information"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
 <input type="submit" value="Submit">

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

</td>
</tr>
</table>
</form>