CBSE CS

cbse cs logo

Home

Menu

Computer Application Practical file
Session 2023-24

Quick Links
Videos
Internet
HTML
CSS
Cyber Ethics

 

PRACTICAL FILS PROGRAMS FOR COMPUTER APPLICATIONS (165)

SESSION 2023-24

BREAKUP OF MARKS FOR THE PRACTICALS 

TOTAL MARKS 50

 

1.  LAB TEST  (20 MARKS)  : HTML coding based on the screenshot of the web page.

 

2. Report file (15 MARKS) : At least 15 HTML programs in the practical file.

 

3. Viva (5 MARKS) : Based on the practical exam and questions.

 

4. Project (10 Marks) : Website with linked pages it in.

 

 

PROGRAM 1:

Write a html program code to show demo of heading tags

 

<!DOCTYPE html>

<html lang=”en”>

<head>

  <title>Heading Tags Demo</title>

</head>

<body>

  <h1>This is Heading 1</h1>

  <h2>This is Heading 2</h2>

  <h3>This is Heading 3</h3>

  <h4>This is Heading 4</h4>

  <h5>This is Heading 5</h5>

  <h6>This is Heading 6</h6>

</body>

</html>

 OUTPUT:
Heading Tags Demo

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6


Program 2:

Write a html program code to show demo of Paragraph tag and its attributes

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag Demo</title>
</head>
<body>
<p>This is a simple paragraph.</p>

<p align=”center”>This paragraph is centered using the align attribute.</p>

<p style=”color: blue; font-size: 18px;”>This paragraph has custom styles applied using the style attribute.</p>

<p title=”Tooltip text on hover”>Hover over this paragraph to see the title attribute in action.</p>

<p id=”special”>This paragraph has an ID attribute assigned for targeting with CSS or JavaScript.</p>
</body>
</html>

output:

Paragraph Tag Demo

This is a simple paragraph.

This paragraph is centered using the align attribute.

This paragraph has custom styles applied using the style attribute.

Hover over this paragraph to see the title attribute in action.

This paragraph has an ID attribute assigned for targeting with CSS or JavaScript.



Program 3 :

Write a html program code to show demo of B, I, U  tag.

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Demo</title>
</head>
<body>
<p>This is <b>bold</b> text using the &lt;b&gt; tag.</p>

<p>This is <i>italic</i> text using the &lt;i&gt; tag.</p>

<p>This is <u>underlined</u> text using the &lt;u&gt; tag.</p>

<p>This is <b><i><u>combined</u></i></b> formatting using nested tags.</p>
</body>
</html>

Text Formatting Demo

This is bold text using the <b> tag.

This is italic text using the <i> tag.

This is underlined text using the <u> tag.

This is combined formatting using nested tags.

Program 4:

Write a html program code to show demo of character entities

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Character Entities Demo</title>
</head>
<body>
<p>&lt;p&gt; This is an example of using &amp;lt; and &amp;amp; in HTML.</p>

<p>&copy; Copyright symbol: &amp;copy;</p>

<p>&#128516; Smiley face emoji: &amp;#128516;</p>

<p>&#x1F4BB; Personal computer emoji: &amp;#x1F4BB;</p>
</body>
</html>

output:

Character Entities Demo

<p> This is an example of using &lt; and &amp; in HTML.

© Copyright symbol: &copy;

😄 Smiley face emoji: &#128516;

💻 Personal computer emoji: &#x1F4BB;

.

program 5:

Write a html program code to show demo of sub script and super script.

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Subscript and Superscript Demo</title>
</head>
<body>
<p>This is a normal text with <sub>subscript</sub> and <sup>superscript</sup> text.</p>

<p>Chemical formula: H<sub>2</sub>O (water)</p>

<p>10<sup>2</sup> = 100 (Ten squared)</p>
</body>
</html>

OUTPUT:

Subscript and Superscript Demo

This is a normal text with subscript and superscript text.

Chemical formula: H2O (water)

102 = 100 (Ten squared)

program 6 :

write a html program code to show demo of font tag and its attributes

 
 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Font Tag Demo</title>
</head>
<body>
<font face=”Arial”>This text uses the Arial font face.</font><br>
<font color=”blue”>This text is blue in color.</font><br>
<font size=”5″>This text is size 5.</font><br>
<font face=”Verdana” color=”green” size=”3″>This text uses Verdana font, green color, and size 3.</font>
</body>
</html>

OUTPUT:

Font Tag Demo This text uses the Arial font face.
This text is blue in color.
This text is size 5.
This text uses Verdana font, green color, and size 3.

program 7 :

write a html program code to show demo of order and unorder list with its attributes

 
 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>List Demo</title>
</head>
<body>
<h2>Ordered List (ol) with Attributes</h2>
<ol type=”1″>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<h2>Unordered List (ul) with Attributes</h2>
<ul type=”square”>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>

<h2>Ordered List (ol) with Start Attribute</h2>
<ol start=”5″>
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>

<h2>Unordered List (ul) with Disc Type</h2>
<ul type=”disc”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

OUTPUT:

List Demo

Ordered List (ol) with Attributes

  1. First item
  2. Second item
  3. Third item

Unordered List (ul) with Attributes

  • Apple
  • Orange
  • Banana

Ordered List (ol) with Start Attribute

  1. Fifth item
  2. Sixth item
  3. Seventh item

Unordered List (ul) with Disc Type

  • Item 1
  • Item 2
  • Item 3

program 8 :

Write a html program code to show demo of definition list with its attributes

 
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Definition List Demo</title>
</head>
<body>
<h2>Definition List (dl) with Attributes</h2>

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>JS</dt>
<dd>JavaScript</dd>
</dl>

<h2>Definition List (dl) with Compact Attribute</h2>

<dl compact>
<dt>AI</dt>
<dd>Artificial Intelligence</dd>

<dt>ML</dt>
<dd>Machine Learning</dd>

<dt>DL</dt>
<dd>Deep Learning</dd>
</dl>
</body>
</html>

OUTPUT:

Definition List Demo

Definition List (dl) with Attributes

HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JS
JavaScript

Definition List (dl) with Compact Attribute

AI
Artificial Intelligence
ML
Machine Learning
DL
Deep Learning

program 9 :

write a html program code to show demo of nested list with its attributes

 <!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Nested List Demo</title>
</head>
<body>
  <h2>Nested List Example</h2>
  <ul>
    <li>Fruits
      <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Banana</li>
      </ul>
    </li>
    <li>Vehicles
      <ul>
        <li>Car</li>
        <li>Bicycle</li>
        <li>Motorcycle</li>
      </ul>
    </li>
  </ul>
</body>
</html>
 
 

OUTPUT:

Nested List Demo

Nested List Example

  • Fruits
    • Apple
    • Orange
    • Banana
  • Vehicles
    • Car
    • Bicycle
    • Motorcycle

program 10 :

write a html program code to show demo of image tag 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Image Tag Demo</title>
</head>
<body>
<h2>Displaying an Image</h2>
<img src=”https://th.bing.com/th/id/OIP.vd_FvHaRHaL8KFGBSIT5rwAAAA?w=120&h=120&c=7&r=0&o=5&pid=1.7″ alt=”Placeholder Image” width=”300″ height=”200″>
</body>
</html>
 

OUTPUT:

Image Tag Demo

Displaying an Image

Placeholder Image

program 11 :

write a html program code to show demo of anchor tag and its attributes

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Anchor Tag Demo</title>
</head>
<body>
<h2>Anchor Tag Example</h2>

<p><a href=”https://www.example.com”>Visit Example.com</a></p>

<p><a href=”#section2″>Jump to Section 2</a></p>

<h2 id=”section2″>Section 2</h2>

<p><a href=”mailto:info@example.com”>Email us</a></p>

<p><a href=”tel:+1234567890″>Call us</a></p>
</body>
</html>

OUTPUT:

Anchor Tag Demo

Anchor Tag Example

Visit Example.com

Jump to Section 2

Section 2

Email us

Call us

program 12 :

write a html program code to show demo of table tag and its attributes.

 
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Table Tag Demo</title>
</head>
<body>
  <h2>Table Example</h2>
  
  <table border=”1″ cellpadding=”5″ cellspacing=”0″>
    <caption>Employee Information</caption>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
      <th>Salary</th>
    </tr>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>IT</td>
      <td>$60,000</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Jane Smith</td>
      <td>HR</td>
      <td>$55,000</td>
    </tr>
  </table>
</body>
</html>
 
 

OUTPUT:

Table Tag Demo

Table Example

Employee Information
ID Name Department Salary
001 John Doe IT $60,000
002 Jane Smith HR $55,000

program 13 :

Write a html program code to show demo of table tag and rowspan and colspan attributes

 
<html lang=”en”>
<head>
<title>Table with Rowspan and Colspan</title>
</head>
<body>
<h2>Table with Rowspan and Colspan</h2>

<table border=”1″ cellpadding=”5″ cellspacing=”0″>
<caption>Task Assignment</caption>
<tr>
<th>Task</th>
<th>Assigned To</th>
<th>Status</th>
</tr>
<tr>
<td rowspan=”2″>Project A</td>
<td>John</td>
<td>Completed</td>
</tr>
<tr>
<td>Jane</td>
<td>In Progress</td>
</tr>
<tr>
<td colspan=”3″>Project B – Team Task</td>
</tr>
</table>
</body>
</html>
 

OUTPUT:

Table with Rowspan and Colspan

Table with Rowspan and Colspan

Task Assignment
Task Assigned To Status
Project A John Completed
Jane In Progress
Project B - Team Task

program 14 :

write a html program code to show demo of form tag, input(text, password, radio, checkbox), select , area tag

 
 <!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Form Elements Demo</title>
</head>
<body>
  <h2>Form Elements Example</h2>
  
  <form action=”/submit_form” method=”post”>
    <label for=”username”>Username:</label>
    <input type=”text” id=”username” name=”username”><br><br>
    
    <label for=”password”>Password:</label>
    <input type=”password” id=”password” name=”password”><br><br>
    
    <label for=”gender”>Gender:</label>
    <input type=”radio” id=”male” name=”gender” value=”male”>
    <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><br><br>
    
    <label for=”interests”>Interests:</label>
    <input type=”checkbox” id=”sports” name=”interests” value=”sports”>
    <label for=”sports”>Sports</label>
    <input type=”checkbox” id=”music” name=”interests” value=”music”>
    <label for=”music”>Music</label>
    <input type=”checkbox” id=”reading” name=”interests” value=”reading”>
    <label for=”reading”>Reading</label><br><br>
    
    <label for=”country”>Country:</label>
    <select id=”country” name=”country”>
      <option value=”usa”>USA</option>
      <option value=”uk”>UK</option>
      <option value=”canada”>Canada</option>
    </select><br><br>
    
    <label for=”message”>Message:</label><br>
    <textarea id=”message” name=”message” rows=”4″ cols=”50″></textarea><br><br>
    
    <input type=”submit” value=”Submit”>
  </form>
</body>
</html>
 
 

OUTPUT

Form Elements Demo

Form Elements Example














program 15 :

Write a html program code to show demo of internal CSS

 
 
 <!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Internal CSS Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      color: #333;
      margin: 20px;
    }
    h1 {
      color: #009688;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
    .important {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Welcome to Internal CSS</h1>
  
  <p>This is a paragraph with some text. <span class=”important”>This part is important.</span></p>
  
  <p>Another paragraph here.</p>
</body>
</html>
 
 

OUTPUT

Internal CSS Demo

Welcome to Internal CSS

This is a paragraph with some text. This part is important.

Another paragraph here.

program 16 :

Write a html program code to show demo of External CSS

 
 <!DOCTYPE html>
<html lang=”en”>
<head>
  <title>External CSS Demo</title>
  <link rel=”stylesheet” href=”styles.css”>
</head>
<body>
  <h1>Welcome to External CSS</h1>
  
  <p>This is a paragraph with some text. <span class=”important”>This part is important.</span></p>
  <p>Another paragraph here.</p>
</body>
</html>
 
code of CSS file (styles.css):
 
 body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  margin: 20px;
}
 
h1 {
  color: #009688;
}
 
p {
  font-size: 16px;
  line-height: 1.5;
}
 
.important {
  font-weight: bold;
}
 
 
 

OUTPUT

External CSS Demo

Welcome to External CSS

This is a paragraph with some text. This part is important.

Another paragraph here.

program 17 :

Write a html program code to show demo of inline CSS

 
 <!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Inline CSS Demo</title>
</head>
<body style=”font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 20px;”>
 
  <h1 style=”color: #009688;”>Welcome to Inline CSS</h1>
  
  <p style=”font-size: 16px; line-height: 1.5;”>This is a paragraph with some text. <span style=”font-weight: bold;”>This part is important.</span></p>
  
  <p style=”font-size: 16px; line-height: 1.5;”>Another paragraph here.</p>
</body>
</html>
 
 

OUTPUT

Inline CSS Demo

Welcome to Inline CSS

This is a paragraph with some text. This part is important.

Another paragraph here.

Quick Links
Videos
Internet
HTML
CSS
Cyber Ethics
error: Content is protected !!