WP Record Programs
• Experiment 9: Character formatting
• Experiment 10: Embedded CSS and multimedia
• Experiment 11: Applying Style sheets
• Experiment 12: Even or Odd Number
• Experiment 13: Biggest among 3 Numbers
• Experiment 14: Square Root
• Experiment 15: Age Form
Experiment 9: Character formatting
Aim: To create a webpage to show different character formatting (B, I, U, SUB, SUP) tags.
viz : log b m p = p log b m
Tags and Attributes:
In this program, the following tags and attributes are used
• The <html> tag represents the root element of an HTML document.
• The <head> tag contains meta-information about the HTML document.
• The <title> tag sets the title of the HTML document displayed in the browser's title bar.
• The <body> tag represents the content of the HTML document visible in the browser.
• <b> tag is used to display the content in bold.
• <i> tag is used to display the content in italics.
• <sup> tag is used for superscript
• <sub> tag is used for subscript
Source code
<html>
<head>
<title>Character formatting</title>
</head>
<body>
<p> <b> <i> log</i></b> <sub>b </sub>m<sup> p</sup> =p<b> <i> log </i>
</b><sub>b</sub> m</p>
</body>
</html>
Experiment 10: Embedded CSS and multimedia
Aim: To create a web page using Embedded CSS and multimedia
Tags and Attributes:
In this program, the following tags and attributes are used
• The <html> tag represents the root element of an HTML document.
• The <head> tag contains meta-information about the HTML document.
• The <title> tag sets the title of the HTML document displayed in the browser's title bar.
• The <body> tag represents the content of the HTML document visible in the browser.
• The <style> tag for css to apply styles for body, h1, p tags
• The <audio> tag is used to embed sound content in a document, such as music or other
audio streams.
Source code
<html>
<body>
<style>
body {
background-color:blue;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
<h1>My First CSS Example</h1>
<p>This is a audio.</p>
<audio controls>
<source src="horse.mp3">
</audio>
</body>
</html>
Experiment 11: Applying Style sheets
Aim: To create a program to implement Inline, Internal and External CSS.
Tags and Attributes:
In this program, the following tags and attributes are used
• The <html> tag represents the root element of an HTML document.
• The <head> tag contains meta-information about the HTML document.
• The <title> tag sets the title of the HTML document displayed in the browser's title bar.
• The <body> tag represents the content of the HTML document visible in the browser.
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
Source code
<html>
<head>
<title>CSS Example</title>
<!-- Internal CSS -->
<style>
/* Internal CSS */
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<!-- Inline CSS -->
<h1 style="font-family: Arial, sans-serif;">Inline CSS Example</h1>
<p style="color: green;">This is a paragraph with inline CSS.</p>
<!-- Internal CSS -->
<h1>Internal CSS Example</h1>
<p>This is a paragraph with internal CSS.</p>
<!-- External CSS -->
<h1 class="external">External CSS Example</h1>
<p class="external">This is a paragraph with external CSS.</p>
</body>
</html>
[Link]
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Experiment 12: Even or Odd Number
Aim: To create a webpage to find if a number is even or odd
Tags and Attributes:
In this program, the following tags and attributes are used
• The <html> tag represents the root element of an HTML document.
• The <head> tag contains meta-information about the HTML document.
• The <title> tag sets the title of the HTML document displayed in the browser's title bar.
• The <body> tag represents the content of the HTML document visible in the browser.
• <script> is used to include JavaScript code directly within the HTML document.
• Inside the <script> tag, JavaScript code is used to prompt the user to enter a number, then
determine if the number is even or odd using conditional statements ( if-else) and display the
result using [Link]() .
Source Code:
<html>
<head>
<title> Java Script Even_Odd</title>
</head>
<body>
<script>
let num=parseint(prompt("Enter any number: "));
if(num%2==0)
[Link]("Even number");
else
[Link]("Odd number");
</script>
</body>
</html>
Experiment 13 : Biggest among 3 Numbers
Aim: To create a webpage to find the biggest among 3 numbers
Tags and Attributes:
In this program, the following tags and attributes are used
• The <html> tag represents the root element of an HTML document.
• The <head> tag contains meta-information about the HTML document.
• The <title> tag sets the title of the HTML document displayed in the browser's title bar.
• The <body> tag represents the content of the HTML document visible in the browser.
• The <script> tag is used to include JavaScript code within the HTML document. In this specific
example, it asks the user for three numbers, compares them, and then displays the greatest
number
on the webpage using [Link]() .
Source Code:
<html>
<head>
<title> Java Script Greatest_Num</title>
</head>
<body>
<script>
let num1 =parseint(prompt("Enter first number: ")); let
num2=parseint(prompt("Enter second number: ")); let
num3=parseint(prompt("Enter third number: "));
if(num1>num2&&num1>num3)
[Link]("Greatest number is "+num1);
else if(num2>num1&&num2>num3)
[Link]("Greatest number is "+num2);
else
[Link]("Greatest number is "+num3);
</script>
</body>
</html>
Experiment 14: Square Root
Aim: To create a webpage to find the square root of a given number
Tags and Attributes:
In this program, the following tags and attributes are used
• The <html> tag represents the root element of an HTML document.
• The <head> tag contains meta-information about the HTML document.
• The <title> tag sets the title of the HTML document displayed in the browser's title bar.
• The <body> tag represents the content of the HTML document visible in the browser.
• The <script> tag is used to include JavaScript code within the HTML document. In this
specific example, it prompts the user to enter a number, calculates its square root using
[Link]() , and then displays the result on the webpage using [Link]() .
Source Code:
<html>
<head>
<title> Java Script Square_root</title>
</head>
<body>
<script>
let num=parseint(prompt("Enter the number: ")); let
root=[Link](num);
[Link]("Square root of "+num+" is "+root);
</script>
</body>
</html>
Experiment 15 : Age Form
Aim: To create a webpage to find if a person is eligible to vote or not
Tags and Attributes:
In this program, the following tags and attributes are used
• The <html> tag represents the root element of an HTML document.
• The <head> tag contains meta-information about the HTML document.
• The <title> tag sets the title of the HTML document displayed in the browser's title bar.
• The <body> tag represents the content of the HTML document visible in the browser.
• <form>: Represents an HTML form that contains interactive elements like text fields,
checkboxes, radio buttons, submit buttons, etc.
• <h2>:A level 2 heading that defines a subsection within the content of the webpage.
• <input>: A self-closing tag that allows users to enter data. It can be of various types, such as
text, password, submit, checkbox, etc.
• type="text" :Defines the type of input field as a single-line text box.
• type="submit" :Creates a submit button that allows users to submit the form.
• name :Specifies a name for the form element, which is used to reference the element in scripts
and server-side processing.
• onclick: An event attribute that specifies the JavaScript function to be executed when the
submit button is clicked.
• The <script> tag is used to include JavaScript code within the HTML document.
• [Link]() :Used to write text or HTML content to the document, replacing the
current content.
• Based on the age entered, the user defined function on button click uses [Link]()
to display a message indicating whether the user is eligible to vote or not.
Source Code:
<html>
<head>
<title> Java Script Age_Form</title>
</head>
<body>
<form name="ageForm">
<h2>Age Form</h2>
<input type="text" name="username" placeholder="Enter your name"><br><br>
<input type="text" name="userage" placeholder="Enter your age"><br><br>
<input type="submit" onclick="agefn()">
</form>
<script>
function agefn()
{
let usr_name=[Link]; let
usr_age=[Link];
if(usr_age>=18)
[Link](usr_name+'', You are eligible to vote");
else
[Link](usr_name+", You are ineligible to vote");
</body> </script>
</html>
