Scribd
Upload
8 views

WT Program For Practice

Uploaded by

naitik S T
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

WT Program For Practice

Uploaded by

naitik S T
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

School of Computing and Information Technology

Open Elective
B20CIO503 - Web Technology
HTML Program

1. FirstWebPage.html

<HTML>
<HEAD>
<Title> my first web page
</Title>
</HEAD>

<BODY>
Welcome all
</BODY>
</HTML>
2. Heading.html
<html>
<head>
<title>Heading Example </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>
<h7>This is heading 6</h7>
<h8>This is heading 6</h8>
</body>
</html>

3. Paragraph.html
<!DOCTYPE html>
<html>
<head>
<title> Reva University </title>
</head>
<body>
<h1 style = “font-size:60px;”> Heading 1</h1>
<p> I like HTML </p>
<hr>
<h1 style = “font-size:50px;”> Heading 2</h1>
<p> I like CSS </p>
<hr>
<h2> Heading 3</h2>
<p> I like Java Script </p>
</body>
</html>
4. Color.html

<!DOCTYPE html>
<html>
<head>
<title> Reva University </title>
</head>
<body style="background-color:powderblue;">
or <body style="background-color:#fd23ab">
<h1 style = “font-size:60px;” > Heading 1</h1>
<p> I like HTML </p>
<br>
<h1 style = “font-size:50px;”> Heading 2</h1>
<p> I like CSS </p>
<br>
<h2> Heading 3</h2>
<p> I like Java Script </p>
</body>
</html>

5. Attribute - Links to an external image that is hosted on another website

<a href="https://www.w3schools.com">Visit W3Schools</a>

6. Image

<img src="C:\Users\THIS PC\Downloads\Reva.PNG" width="500" height="600">

7. Other tag
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
8. Tables
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To undestand the example better, we have added borders to the table.</p>
</body>
</html>
9. Lists

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
10. Forms
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>

Submit Button

<!DOCTYPE html>
<html>
<body>
<h2>The name Attribute</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because the
input element does not have a name attribute.</p>
</body>
</html>

CSS Program
1. InlineCSS.html

<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

2. InternalCSS.html

<html>
<head>
<style>
body { background-color: linen; }
h1 {
color: maroon;
margin-left: 40px;
}
</style> </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3. External.html

<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

mystyle.css
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

4. Color.html /*Same color with different declaration*/

<html>
<body>
<p> Color Concept</p>
<h1 style="background-color:rgb(255, 99, 71);">Reva University</h1>
<h1 style="background-color:#ff6347;"> Reva University </h1>
<h1 style="background-color:hsl(9, 100%, 64%);"> Reva University </h1> /* hue,
saturation, and lightness*/
<p>Color name but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);"> Reva University </h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);"> Reva University </h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX,
HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>

5. Borders.html
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>

6. Margin.html
<html>
<head>
<style>
div {
border: 1px solid red;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;}
</style> </head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom
margin of 100px, and a left margin of 80px.</div>
</body>
</html>

7. Padding1.html
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.</div>
</body>
</html>

8. Padding2.html
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow; }
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue; }
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div> <br>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left
and right padding, because of the box-sizing: border-box property.
</div>
</body>
</html>

9. Boxmodel.html
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src=" C:\Users\THIS PC\Desktop\Flower.jpg" width="350" height="263"
alt=“Flower">
<div>The picture above is 350px wide. The total width of this element is also
350px.</div>
</body>
</html>

10. Revabgimage.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background-image:
url("https://revaeduin.s3.ap-south-1.amazonaws.com/uploads/album/1637408948_e3229
79f8a7ecde06b8d.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style> </head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am studying in Reva University</h1>
<h3>I am learning open elective web technology</h3>
<button>contact me</button>
</div> </div>
<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser
window to see the effect.</p>
</body>
</html>

11. Span.html
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my
father has <span style="color:darkolivegreen;font-weight:bold">dark green</span>
eyes.</p>
</body>
</html>

12. Conflit.html
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>

Java script

1. Javascript.html
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById
("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>

2. Head.html
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed."; }
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

3. Variable.html
<html>
<body>
<h2>Assigning JavaScript Values</h2>
<p>In JavaScript the = operator is used to assign values to variables.</p>
<p id="demo"></p>
<script>
let x, y;
x = 5;
y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>

4. Expression.html
<html>
<body>
<h2>The <b>let</b> Keyword Creates Variables</h2>
<p id="demo"></p>
<script>
let x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>

5. Let.html
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>

6. Const.html
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>

7. Assignincrement.html
<html>
<body>
<h2>The += Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

8. Function.html
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The temperature is " + toCelsius(77) + " Celsius";

function toCelsius(fahrenheit)
{
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>

9. Slice.html
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7,13);
</script>
</body>
</html>

FRAME

1. Rowwiseframes.html

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src ="E:\Reva\Web Technology\Final PPT\Frames\top.html" />
<frame name = "main" src = "E:\Reva\Web Technology\Final PPT\Frames\Main.html" />
<frame name = "bottom" src = "E:\Reva\Web Technology\Final PPT\Frames\
Bottom.html" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

2. Top.html
<html>
<head>
<body>
<h1> Welcome you </h1>
</body>
</html>

3. Main.html
<html>
<head>
<body>
<h2> <Marquee>Reva University Bengaluru</h2> <br></marquee>
<img src=" E:\Reva\Web Technology\Final PPT\Frames\Reva.jpg" width="550"
height="400" alt=“Reva">
</body>
</html>

4. Bottom.html
<html>
<head>
<body>
<h1> Thank you Visit Again </h1>
</body>
</html>

5. Colwiseframes.html
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "top" src ="E:\Reva\Web Technology\Final PPT\Frames\top.html" />
<frame name = "main" src = "E:\Reva\Web Technology\Final PPT\Frames\Main.html" />
<frame name = "bottom" src = "E:\Reva\Web Technology\Final PPT\Frames\
Bottom.html" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

You might also like