Scribd
Upload
9 views

WT Program For Practice

Uploaded by

naitik S T
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

WT Program For Practice

Uploaded by

naitik S T
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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