EXPERIMENT NUMBER 03
Date of Performance
Date of Submission
AIM:Design the Web Application for Personal Biodata.
PROBLEM DEFINITION:Design the Web Application for Personal Biodata.
THEORY:
The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width
font (usually Courier).
The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
The <section> element defines a section in a document.
The <article> element specifies independent, self-contained content.
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
The <aside> element defines some content aside from the content it is placed in (like a sidebar).
The <aside> content should be indirectly related to the surrounding content.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings,
etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element
can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about
data.
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td>
elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td>
element defines a table cell.
An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
The <source> tag is used to specify multiple media resources for media elements, such as <video>,
<audio>, and <picture>.
The <source> tag allows you to specify alternative video/audio/image files which the browser may
choose from, based on browser support or viewport width. The browser will choose the first
<source> it supports.
The <embed> tag defines a container for an external resource, such as a web page, a picture, a
media player, or a plug-in application.
The <video> tag is used to embed video content in a document, such as a movie clip or other video
streams.
The <video> tag contains one or more <source> tags with different video sources. The browser will
choose the first source it supports.
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
The <audio> HTML element is used to embed sound content in documents. It may contain one or
more audio sources, represented using the src attribute or the <source> element: the browser will
choose the most suitable one. It can also be the destination for streamed media, using a
MediaStream.
CSS (Cascading Style Sheet)
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style>
element.
External CSS
An external style sheet is used to define the style for many HTML pages
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Biodata - Rutuja Jadhav</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
background-color: #f0f2f5;
color: #333;
}
header {
background-color: #4a90e2;
color: white;
padding: 30px 20px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
header p {
font-size: 1.1em;
margin-top: 8px;
}
section {
background-color: #fff;
max-width: 800px;
margin: 30px auto;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
border-bottom: 2px solid #4a90e2;
padding-bottom: 8px;
margin-bottom: 20px;
color: #2c3e50;
}
table {
width: 100%;
border-collapse: collapse;
}
table td {
padding: 12px 10px;
vertical-align: top;
}
table tr:nth-child(odd) {
background-color: #f9f9f9;
}
td:first-child {
font-weight: bold;
width: 30%;
color: #4a4a4a;
}
ul {
padding-left: 20px;
margin: 0;
}
li {
margin-bottom: 6px;
}
@media screen and (max-width: 600px) {
section {
padding: 15px;
}
header h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<header>
<h1>Rutuja Jadhav</h1>
<p>Email: [email protected] | Phone: 9876543210</p>
</header>
<section>
<h2>Personal Details</h2>
<table>
<tr>
<td>Date of Birth</td>
<td>May 01, 2005</td>
</tr>
<tr>
<td>Gender</td>
<td>Female</td>
</tr>
<tr>
<td>Blood Group</td>
<td>AB+</td>
</tr>
<tr>
<td>Address</td>
<td>ABC Residency, Kalyan, Maharashtra</td>
</tr>
<tr>
<td>Hobbies</td>
<td>Travelling, Reading</td>
</tr>
<tr>
<td>About Me</td>
<td>
I am a TE student majoring in Information Technology at Datta Meghe College of Engineering. <br>
Passionate about Web Development, Ethical Hacking, and CyberSecurity.
</td>
</tr>
<tr>
<td>Technical Skills</td>
<td>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React.js</li>
<li>Node.js</li>
<li>MySQL</li>
<li>MongoDB</li>
</ul>
</td>
</tr>
</table>
</section>
</body>
</html>
OUTPUT:
CONCLUSION:
Thus we studied HTML Tags,Forms and media as well as CSS.
REMARKS & SIGNATURES:
R1 R2 R3 R4 R5 Total Signature
(3 Marks) (3 (3 Marks) (3 Mark) (3 Marks) (15 Marks)
Marks)
