BCAC 202
1. Differentiate html and html5?
Feature HTML (Older Versions) HTML5 (Latest Standard)
Refers to HTML 4.01 and
Version Refers to HTML5, the latest major update
earlier
Doctype
Long and complex Simple: <!DOCTYPE html>
Declaration
Browser Requires third-party plugins
Supports native audio and video playback
Compatibility for multimedia
Multimedia No native support for
<audio>, <video> tags introduced
Support audio/video
Includes semantic tags like <article>, <section>, <header>,
Semantic Tags Limited semantic meaning
<footer>, etc.
Graphics and Relies on Flash or external
Built-in support using <canvas> and <svg>
Animation libraries
Form Controls Basic input types New input types: email, date, range, etc.
Supports APIs like Web Storage (localStorage,
APIs and Storage Not included
sessionStorage), Geolocation, WebSocket, etc.
Mobile Support Not optimized for mobile Designed with mobile in mind (responsive design)
Less consistent across Better and more consistent error handling in modern
Error Handling
browsers browsers
2. Discuss in detail about working and organizing tables in html?
Basic Table Structure in HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Tag Description
<table> Defines the table container
<tr> Table row
1
,BCAC 202
<th> Table header cell (bold, centered text)
<td> Table data cell
HTML provides special tags to semantically group table parts:
Tag Purpose
<thead> Groups the header rows
<tbody> Groups the main data rows
<tfoot> Groups footer rows (useful for summary or totals)
<caption> Adds a title or description above the table
<colgroup> & <col> Used to style columns (e.g., set width or background color)
Example with Grouping:
<table>
<caption>Student Grades</caption>
<thead>
<tr><th>Name</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>A</td></tr>
<tr><td>Bob</td><td>B+</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">End of Report</td></tr>
</tfoot>
</table>
Table Cell Spanning
To merge cells, use:
colspan="n": Merge columns
rowspan="n": Merge rows
<style>
2
,BCAC 202
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
3. Write an html program to create your class TIMETABLE?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
caption {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
th, td {
border: 1px solid #444;
padding: 10px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
td {
3
, BCAC 202
background-color: #fafafa;
}
</style>
</head>
<body>
<table>
<caption>Class TIMETABLE</caption>
<thead>
<tr>
<th>Day / Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>1:00 - 2:00</th>
<th>2:00 - 3:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td>English</td>
<td>Break</td>
<td>Computer</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td>Math</td>
<td>Computer</td>
<td>English</td>
<td>Break</td>
<td>Physics</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Physics</td>
<td>Biology</td>
<td>Chemistry</td>
<td>Math</td>
4
1. Differentiate html and html5?
Feature HTML (Older Versions) HTML5 (Latest Standard)
Refers to HTML 4.01 and
Version Refers to HTML5, the latest major update
earlier
Doctype
Long and complex Simple: <!DOCTYPE html>
Declaration
Browser Requires third-party plugins
Supports native audio and video playback
Compatibility for multimedia
Multimedia No native support for
<audio>, <video> tags introduced
Support audio/video
Includes semantic tags like <article>, <section>, <header>,
Semantic Tags Limited semantic meaning
<footer>, etc.
Graphics and Relies on Flash or external
Built-in support using <canvas> and <svg>
Animation libraries
Form Controls Basic input types New input types: email, date, range, etc.
Supports APIs like Web Storage (localStorage,
APIs and Storage Not included
sessionStorage), Geolocation, WebSocket, etc.
Mobile Support Not optimized for mobile Designed with mobile in mind (responsive design)
Less consistent across Better and more consistent error handling in modern
Error Handling
browsers browsers
2. Discuss in detail about working and organizing tables in html?
Basic Table Structure in HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Tag Description
<table> Defines the table container
<tr> Table row
1
,BCAC 202
<th> Table header cell (bold, centered text)
<td> Table data cell
HTML provides special tags to semantically group table parts:
Tag Purpose
<thead> Groups the header rows
<tbody> Groups the main data rows
<tfoot> Groups footer rows (useful for summary or totals)
<caption> Adds a title or description above the table
<colgroup> & <col> Used to style columns (e.g., set width or background color)
Example with Grouping:
<table>
<caption>Student Grades</caption>
<thead>
<tr><th>Name</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>A</td></tr>
<tr><td>Bob</td><td>B+</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">End of Report</td></tr>
</tfoot>
</table>
Table Cell Spanning
To merge cells, use:
colspan="n": Merge columns
rowspan="n": Merge rows
<style>
2
,BCAC 202
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
3. Write an html program to create your class TIMETABLE?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
caption {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
th, td {
border: 1px solid #444;
padding: 10px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
td {
3
, BCAC 202
background-color: #fafafa;
}
</style>
</head>
<body>
<table>
<caption>Class TIMETABLE</caption>
<thead>
<tr>
<th>Day / Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>1:00 - 2:00</th>
<th>2:00 - 3:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td>English</td>
<td>Break</td>
<td>Computer</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Biology</td>
<td>Math</td>
<td>Computer</td>
<td>English</td>
<td>Break</td>
<td>Physics</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Physics</td>
<td>Biology</td>
<td>Chemistry</td>
<td>Math</td>
4
