Create a folder Day02 & open that folder in VSCode
Rno Sname Age Gender Dept
101 A 21 Male CS
102 B 22 Female IS
<table> Table Start
<tr> Table Row
<th></th> Table Header
<td></td> Table Data
</tr>
<thead>
Table Header Tag
</thead>
<tfoot>
Table Footer Tag
</tfoot>
<tbody>
Table Body Tag
</tbody>
</table>
Colspan : We can merge multiple columns into Single column
Rowspan : We can merge multiple rows into Single row
Shanthi Nikethan College
Rno Sname Age Gender Dept
101 A 21 Male CS
102 B 22 Female IS
Kengeri Bangalore
Colspan
Sname Eng Kan Hin Maths
Sem1 58 Sem1 56 Sem1 58 Sem1 69
Rakshitha Sem2 58 Sem2 69 Sem2 58 Sem2 58
Rowspan
This tag is mainly used to read the data from the user
<form> Parent Tag
Child componets
text, textarea, radio, checkbox, select, file, date,
time, password, ….
</form>
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h3>Student Details</h3>
<table border="1">
<tbody>
<tr>
<th>Rno</th>
<th>Sname</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>101</td>
<td>Sachin</td>
<td>41</td>
<td>Male</td>
</tr>
<tr>
<td>102</td>
<td>Deepika</td>
<td>41</td>
<td>Female</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h3>Student Details</h3>
<table border="1">
<thead>
<tr>
<th colspan="4">Shanthi Nikethan College</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">Bangalore Kengeri</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Rno</th>
<th>Sname</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>101</td>
<td>Sachin</td>
<td>41</td>
<td>Male</td>
</tr>
<tr>
<td>102</td>
<td>Deepika</td>
<td>41</td>
<td>Female</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h3>Student Details</h3>
<table border="1">
<thead>
<tr>
<th colspan="9">Shanthi Nikethan College</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="9">Bangalore Kengeri</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Student Name</th>
<th colspan="2">English</th>
<th colspan="2">Kannada</th>
<th colspan="2">Hindi</th>
<th colspan="2">Maths</th>
</tr>
<tr>
<td rowspan="2">Rakshitha</td>
<td>Int : 28</td>
<td>Ext : 78</td>
<td>Int : 18</td>
<td>Ext : 85</td>
<td>Int : 20</td>
<td>Ext : 79</td>
<td>Int : 21</td>
<td>Ext : 49</td>
</tr>
<tr>
<td>Int : 28</td>
<td>Ext : 78</td>
<td>Int : 18</td>
<td>Ext : 85</td>
<td>Int : 20</td>
<td>Ext : 79</td>
<td>Int : 21</td>
<td>Ext : 49</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h3>Registration Form</h3>
<form>
<label>First Name</label>
<input type="text" placeholder="Enter First Name" />
<br><br>
<label>Last Name</label>
<input type="text" placeholder="Enter Last Name" />
<br><br>
<label>Email Id</label>
<input type="email" placeholder="Enter Email" />
<br><br>
<label>Password</label>
<input type="password" placeholder="Enter Password"
/>
<br><br>
<label>Date</label>
<input type="date" />
<br><br>
<label>Time</label>
<input type="time" />
<br><br>
<label>Select State</label>
<select>
<option>Karnataka</option>
<option>Tamil Nadu</option>
<option>Andhra</option>
<option>Mumbai</option>
<option>Delhi</option>
</select>
<br><br>
<label>Languages Known</label>
<select size="3" multiple>
<option>C-Lang</option>
<option>C++</option>
<option>Java</option>
<option>PHP</option>
<option>Python</option>
</select>
<br><br>
<label>Address</label>
<textarea rows="5" cols="25"> </textarea>
<br><br>
<label>File Upload</label>
<input type="file" />
<br><br>
<fieldset>
<legend>Select Gender</legend>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female
</fieldset>
<br><br>
<fieldset>
<legend>Select Hobbies</legend>
<input type="checkbox" name="hobby" /> Cricket
<input type="checkbox" name="hobby" /> Football
<input type="checkbox" name="hobby" /> Volleyball
<input type="checkbox" name="hobby" /> Tennis
</fieldset>
<br><br>
<input type="submit" value="Click to Submit" />
<input type="reset" value="Click to Reset" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h3>Registration Form</h3>
<form method="post">
<table>
<tr>
<th>
<label>First Name</label>
</th>
<td>
<input type="text" placeholder="Enter First
Name" pattern="[a-zA-Z ]{3,15}" required maxlength="15"
title="First Name should accepts 3 to 15
characters" />
</td>
</tr>
<tr>
<th>
<label>Last Name</label>
</th>
<td>
<input type="text" placeholder="Enter Last Name"
pattern="[a-zA-Z ]{3,15}" required maxlength="15"
title="First Name should accepts 3 to 15
characters" />
</td>
</tr>
<tr>
<th>
<label>Email Id</label>
</th>
<td>
<input type="email" placeholder="Enter Email"
required />
</td>
</tr>
<tr>
<th>
<label>Phone Number</label>
</th>
<td>
<input type="text" placeholder="Enter Phone
Number" pattern="[6789][0-9]{9}"
title="Phone Number should starts with 6,7,8,9
& should be 10 digits" required />
</td>
</tr>
<tr>
<th>
<label>Age</label>
</th>
<td>
<input type="number" placeholder="Enter Age"
min="15" max="30" required />
</td>
</tr>
<tr>
<th>
<label>Booking Date</label>
</th>
<td>
<input type="date" required min="2025-09-19"
max="2025-09-25" />
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="Click to Submit" />
</th>
</tr>
</table>
</form>
</body>
</html>
CSS
CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance
website presentation. CSS is one of the three main components of a webpage, along
with HTML and JavaScript.
• HTML adds Structure to a web page.
• JavaScript adds logic to it and CSS makes it visually appealing or stylish. It controls the
layout of a web page i.e. how HTML elements will be displayed on a webpage.
CSS was released (in 1996), 3 years after HTML (in 1993). The main idea behind its use is that
it allows the separation of content (HTML) from presentation (CSS). This makes websites
easier to maintain and more flexible.
CSS3 was not released as a single, monolithic version like CSS1 or CSS2. Instead, it was
developed as a collection of modules, with the first drafts appearing around 1999.
The W3C(World Wide Web Consortium) introduced CSS3 as a series of separate documents,
each focusing on a specific set of features. This modular approach allowed for gradual
implementation and updates across different browsers.
Why CSS?
• Saves Time: Write CSS once and reuse it across multiple HTML pages.
• Easy Maintenance: Change the style globally with a single modification.
• Search Engine Friendly: Clean coding technique that improves readability for search
engines.
• Superior Styles: Offers a wider array of attributes compared to HTML.
• Offline Browsing: CSS can store web applications locally using an offline cache,
allowing offline viewing.
CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the
corresponding elements. A style rule set includes a selector and a declaration block.
• Selector: Targets specific HTML elements to apply styles.
• Declaration: Combination of a property and its corresponding value.
• The selector points to the HTML element that you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
CSS comes with 3 types
a) Inline CSS Deprecated
b) Internal CSS
c) External CSS
Internal & External CSS will have 3 options
Order of Precedence
IdName : Starts with #
ClassName : Starts with .
TagName : HTML Tags