Scribd
Upload
0 views12 pages

CSS and Java Script Lab Programs

The document outlines a series of web programming experiments focusing on various HTML and JavaScript functionalities, including character formatting, embedded CSS, and multimedia. Each experiment includes an aim, a list of tags and attributes used, and source code examples demonstrating the concepts. The experiments cover topics such as determining even or odd numbers, finding the largest of three numbers, calculating square roots, and creating an age form for voting eligibility.

Uploaded by

hrithikdev759
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views12 pages

CSS and Java Script Lab Programs

The document outlines a series of web programming experiments focusing on various HTML and JavaScript functionalities, including character formatting, embedded CSS, and multimedia. Each experiment includes an aim, a list of tags and attributes used, and source code examples demonstrating the concepts. The experiments cover topics such as determining even or odd numbers, finding the largest of three numbers, calculating square roots, and creating an age form for voting eligibility.

Uploaded by

hrithikdev759
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

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="styles.css">
</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>

styles.css

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 document.write() .

Source Code:

<html>
<head>
<title> Java Script Even_Odd</title>
</head>
<body>
<script>

let num=parseint(prompt("Enter any number: "));


if(num%2==0)
document.write("Even number");
else
document.write("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 document.write() .

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)
document.write("Greatest number is "+num1);
else if(num2>num1&&num2>num3)
document.write("Greatest number is "+num2);
else
document.write("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
Math.sqrt() , and then displays the result on the webpage using document.write() .

Source Code:

<html>
<head>
<title> Java Script Square_root</title>
</head>
<body>
<script>
let num=parseint(prompt("Enter the number: ")); let
root=Math.sqrt(num);
document.write("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.
• document.write() :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 document.write()
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=document.ageForm.username.value; let
usr_age=document.ageForm.userage.value;
if(usr_age>=18)
document.write(usr_name+'', You are eligible to vote");
else
document.write(usr_name+", You are ineligible to vote");

</body> </script>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy