Scribd
Upload
11 views

Web-Programs(1 to 10)

The document contains multiple HTML examples demonstrating various web development concepts including text formatting, lists, tables, links, images, forms, JavaScript functionalities, and CSS styles. Each section provides a specific example of how to implement these features in HTML. The examples are structured to showcase both basic and advanced techniques for creating interactive and styled web pages.

Uploaded by

shreyassupe346
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
11 views

Web-Programs(1 to 10)

The document contains multiple HTML examples demonstrating various web development concepts including text formatting, lists, tables, links, images, forms, JavaScript functionalities, and CSS styles. Each section provides a specific example of how to implement these features in HTML. The examples are structured to showcase both basic and advanced techniques for creating interactive and styled web pages.

Uploaded by

shreyassupe346
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/ 13

1. Develop an HTML page to illustrate text formatting.

<html>
<head><title>Text Formatting tags</title></head>
<body>
<h1>Text with font size 24</h1>
<h2>Text with font size 18</h2>
<h3>Text with font size 14</h3>
<h4>Text with font size 12</h4>
<h5>Text with font size 10</h5>
<h6>Text with font size 8</h6>
<hr>
<i>This tag displays the text in italic</i>
<br>
<b>This tag displays the text in bold</b>
<br>
<u>This tag displays the text with an underline</u>
<br>
<s>This tag give a strikethrough for the text</s>
<br>
<tt>This tag displays the text in type writer style</tt>
<br>
<mark>This tag highlights the text</mark><hr>
<strong>This tag displays the text in bold the bold tag is not supported by some of the browsers</strong><br>
<em>This tag displays the text in italic if the italic tag is not supported by some of the browsers<em><br>
<pre>This tag is used to display the text which is exactly written in the code</pre><br>
<sub>This displays the text in sub script</sub><br>
<sup>This displays the text in super script</sup>
</body>
</html>

OUTPUT:
2. Develop an HTML page to illustrate usage of lists.
<html>
<head><title>Demonstration for lists</title></head>
<body>
<b>Demonstration of LISTS</b>
<ol>
<li>Mobile Devices</li>
<ul>
<li>Android</li>
<ul>
<li>Vivo</li>
<li>Samsung</li>
<li>Redmi</li>
<li>Nokia</li>
</ul>
<li>IOS</li>
<ul>
<li>Iphone 11</li>
<li>Iphone 12</li>
<li>Iphone 13</li>
<li>Iphone 14</li>
</ul>
</ul>
<li>Input devices</li>
<ul>
<li>Keyboard</li>
<li>Scanner</li>
<li>Mouse</li>
<li>Web cam</li>
</ul>
<li>Output Devices</li>
<ul>
<li>Monitor</li>
<li>Printer</li>
<li>Headphones</li>
<li>Speaker</li>
</ul>
</ol>
</body>
</html>
OUTPUT:

3. Develop an HTML page to demonstrate tables.


<html>
<head><title>Simple Table</title></head>
<body>
<h1>Table</h1>
<table border=1 cellspacing=2 cellpadding=2>
<tr>
<th>Roll No</th>
<th>Names</th>
</tr>
<tr>
<td>1</td>
<td>Anusha</td>
</tr>
<tr>
<td>2</td>
<td>Bhuvan</td>
</tr>
<tr>
<td>3</td>
<td>Chandana</td>
</tr>
<tr>
<td>4</td>
<td>Rimpa</td>
</tr>
<tr>
<td>5</td>
<td>Priya</td>
</tr>
</table>
</body>
</html>
OUTPUT:

4. Develop an HTML page to demonstrate links.

<html>

<head><title>LINKS</title></head>

<body bgcolor="pink">

<h1>Links in HTML</h1>

<a href="hello.html">Click here to display a simple Message</a>

</body>

</html>
hello.html

<html>

<head><title>LINKS</title>

</head>

<body bgcolor="pink">

<h1>Welcome to KLE-BCA</h1>

</body>

</html>

5. Develop an HTML page to display an image with links

<html>
<head><title>Image as a link</title></head>
<body>
<h1>Image as a link</h1>
<h2>please click on the image</h2>
<a href="nextpage.html"><img src="bca.jpg" height=300 width=400></a>
<body>
</html>
nextpage.html
<html>
<head><title>Image as a link</title></head>
<body>
<h2>Wel-Come to KLE BCA</h2>
<body>
</html>

6. Design an HTML web page with forms


<html>

<head><title>Forms</title></head>

<body bgcolor="orange">

<h1>Student Registration Form</h1>

<form>

<table border=1 bgcolor="lightblue">

<tr>

<td>Name</td>

<td><input type="text" name="uname"></td>

<tr>

<tr>

<td>Roll No</td>

<td><input type="text" maxlength=6 name="rno"></td>

<tr>

<tr>

<td>Address</td>

<td><textarea rows=5 cols=20 name="add"></textarea></td>

</tr>

<tr>

<td>Mobile NO</td>

<td><input type="text" name="mob" maxlength=10></td>

</tr>

<tr>
<td>Gender</td>

<td><input type="radio" name="g">Male<br>

<input type="radio" name="g">Female</td>

</tr>

<tr>

<td>Hobbies</td>

<td><input type="checkbox" name="d">Dancing</br>

<input type="checkbox" name="s">Singing</br>

<input type="checkbox" name="p">Painting</br>

<input type="checkbox" name="s">Coding

</tr>

<tr>

<td colspan=2><input type="submit" name="sub" value="SUBMIT">

<input type="reset" name="re" value="RESET">

</td>

</tr>

</table>

</form>

</body>

</html>
7. Develop an HTML web page to display the mathematical tables of 1 to n and their square roots using
java script.

<html>
<head><title>Mathematical Table</title></head>
<body>
<script>
var n=prompt("Enter Number");
var i;
for(i=1; i<=10; i++)
{
document.write(n+ "*" +i+ "=" +n*i+ "<br>");
}
document.write("Square of " +n+ " is "+Math.pow(n,2));
</script>
</body>
</html>
OUTPUT

8. Develop an HTML page to change the background color using java script
<html>
<head>
<style>
#element1
{
border: 1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<h2>Change the Background color using JS</h2>
<div id="element1"><h1>Hello</h1></div>
<br>
<button onClick="changeStyle()">Click Me</button>
<script>
function changeStyle()
{
var element = document.getElementById("element1");
element.style.background = "green";
}
</script>
</body>
</html>
9. Demonstrate String operations of java script

<html>

<head><title>String Operations</title></head>

<body>

<script type="text/javascript">

var str = ("Wel-Come To The String Operations of Java Script");

document.write("<br>"+str+"</br>Length of the above string is:");

document.write(str.length);

document.write("<br>");

var str1 = "The Substring in this string from the position 6 to 15 is:"

document.write("<br>" + str1);

document.write("<br>");

document.write(str1.substring(8,20));

document.write("<br>");

document.write("<br>");

document.write("position of 6 is ");

document.write(str1.charAt(6));

document.write("<br>");

var str2=("We can change the cases of the string");

document.write("<br>" + str2+ "<br>");

document.write("To Lower Case:<br>");

document.write(str2.toLowerCase());

document.write("<br>");

document.write("To Upper Case:<br>");

document.write(str2.toUpperCase());

</script>

</body>

</html>
10. Demonstrate the different types of CSS on your web pages.
I. Inline level CSS

<html>
<head><title>Inline CSS</title></head>
<body>
<h1 style="font-size:30pt;font-family:Jokerman;color:Orange;">Inline CSS is used to apply a
unique style to a single HTML element</h1>
<b>WELCOME TO KLE BCA HUBLI</b>
</body>
</html>
II. Internal Level CSS/ Document level CSS

<html>

<head><title>Document Level CSS</title></head>

<body>

<style>

h3{

color:red;

font-size:40px;

font-family:"Small Fonts";

background-color:black;

p{

color:green;

font-size:30px;

font-family:"Jokerman";

background-color:yellow;

margin-left:100pt;

</style>

<h3>Document level CSS applies style to the whole document</h3>

<p>It is written within a pair of style tags</p><br>

<h1>WELCOME TO KLE BCA HUBLI</h1>

</body>

</html>
III. External level CSS
External.html
<html>
<head><title>External Level CSS</title>
<link rel="stylesheet" type="text/css" href="External.css">
</head>
<body>
<h1>External CSS applies style to any number of HTML Documents</h1>
<s>This is strikethrough tag </s><br>
<u>This is underline tag</u><br>
<h2>Proud to be a student of KLE BCA HUBLI</h2>
<body>
</html>

External.css
h1{
color:red;
font-size:40px;
font-family:"Small Fonts";
background-color:black;
}
s{
color:green;
font-size:30px;
font-family:"Jokerman";
background-color:yellow;
margin-left:100pt;
}
u{
color:blue;
font-size:20px;

}
h2{
color:white;
font-size:40px;
font-family:"Magneto";
background-color:black;
}

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