0% found this document useful (0 votes)
58 views52 pages

Iwd Code Bible Volume1

Uploaded by

nelisappawandiwa
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% found this document useful (0 votes)
58 views52 pages

Iwd Code Bible Volume1

Uploaded by

nelisappawandiwa
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/ 52

1

Table of Contents
HTML TABLE1 .......................................................................................................................................... 4
HTML LINKS ............................................................................................................................................ 6
HTML LIST1 ............................................................................................................................................. 7
CALCULATING AREA .............................................................................................................................. 10
CALCULATING VOLUME USING JS ......................................................................................................... 12
CALCULATING AREA USING PHP ........................................................................................................... 14
DATABASE PHP ..................................................................................................................................... 15
HTML TABLE 2 ....................................................................................................................................... 18
FORM DESIGN ....................................................................................................................................... 21
HTML LIST2 ........................................................................................................................................... 23
INTEGER OR NOT .................................................................................................................................. 24
CALCULATING PRODUCT USING JS ........................................................................................................ 25
BLANK OR NOT USING PHP ................................................................................................................... 27
PHP STRING METHODS ......................................................................................................................... 28
FRAME .................................................................................................................................................. 30
FORM DESIGN 2 .................................................................................................................................... 33
DOWNLOADABLE FILE ........................................................................................................................... 35
PLAY AUDIO .......................................................................................................................................... 35
LONGEST WORD USING JS .................................................................................................................... 36
MOST FREQUENT ITEM USING JS .......................................................................................................... 37
EMAIL VALIDATION USING PATTERNS .................................................................................................. 39
HTML TABLE 3 ....................................................................................................................................... 40
MOVING TEXT ....................................................................................................................................... 42
DETERMINE DAYS IN A GIVEN MONTH ................................................................................................. 43
DETERMINE CLICKED MOUSE BUTTON ................................................................................................. 45
CSS ........................................................................................................................................................ 46
HTML TABLE 4 ....................................................................................................................................... 48
DETERMINE TIME OF THE DAY .............................................................................................................. 50
DISPLAY DATE AND TIME ...................................................................................................................... 52

2
This page intentionally left blank

3
HTML TABLE1

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" style=" border-collapse:
collapse;" width="40%" height="90%">
<tr>
<th colspan="6">WORLD HEALTH ORGANISATION</th>
</tr>
<tr >
<td rowspan="4" width="60">CORONA VIRUS STATISTICS</td>
<td colspan="2">Name of Country <br></td>
</tr>
<tr >
<td>Botswana <br> 2000</td>
<td>Zimbabwe <br> 7000</td>
</tr>
<tr>
<td>South Africa <br> 10000</td>
<td>Zambia <br> 4000</td>
</tr>
<tr>

4
<td>Malawi <br> 2500</td>
<td>Mozambique <br> 45000</td>
</tr>
<tr>
<td colspan="6">SANITISE, WEAR MASK, MAINTAIN SOCIAL DISTANCE</td>
</tr>
</table>
</body>
</html>

OUTPUT

5
HTML LINKS

<!DOCTYPE html>
<html>
<head>
<style>
a:link{
color:green;
}
a:active {
color:blue;
}
a:visited{
color:red;
}

</style>
</head>
<body>
<h5>Welcome to HEXCO E-LEARNING RESOURCES</h5>
<ul>
<li><a href="Building.docx" class="links" >Building Technology</a></li>
<li><a href="wood.docx" class="links">Wood Technology</a></li>
<li><a href="mechanical.docx" class="links">Mechanical Engineering</a></li>
<li><a href="Information.docx" class="links">Information Technology</a></li>
<li><a href="Tourism.docx" class="links">Tourism and Hospitality</a></li>

6
</ul>
</body>
</html>

OUTPUT

HTML LIST1

7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>e-commerce </p>
<img src="arm-embedded-blog.jpg" alt="e-commerce"width="300px"height="100px"
style="margin-left:100px; margin-top:-30px">
<p>E-commerce is purchasing and exchanging of goods and services over
computer networks.</p>
<p>e-commerce requirements</p>
<table border="1" style="border-collapse: collapse;width: 300px;">
<tr>
<td>
Shopping Cart Processing Gateway
</td>
<td>Merchant Account Digital Certificate</td>
</tr>
</table>
<p>e-commerce categories:</p>
<ol>
<li>
B2B (Business-to-Business)
</li>
<li>
B2C (Business-to-Commerce)
</li>
<li>
C2B (Consumer-to-Business)
</li>
<li>
C2C (Consumer-to-Consumer)
</li>
</ol>
</body>
</html>

8
OUTPUT

9
CALCULATING AREA

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function Cal_area()
{
var length=parseInt(document.getElementById("length").value);
var width=parseInt(document.getElementById("width").value);
var total=length * width;
return total;
}
</script>

<body>

<form action="">
Enter length: <input type="text" id="length">
<br><br>
Enter width: <input type="text" id="width">
<br><br>

10
<input type="button" Value="calculate"
onclick="document.getElementById('area').value= Cal_area()">

<br><br>
Area of rectangle: <input type="text" id="area" >
<br>

</form>
</body>
</html>

OUTPUT

11
CALCULATING VOLUME USING JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function volume()
{
var R=parseInt(document.getElementById("radius").value);
var h=parseInt(document.getElementById("height").value);
var r=parseInt(document.getElementById("bottom").value);
var V1=R*R;
var V2=r*r;
var V3=(1/3*h)*((2*V1)-(V2));
return V3;
}
</script>
<body>
Top Radius: <input type="text" id="radius">
<br><br>
Bottom Radius: <input type="text" id="bottom">
<br><br>
Height: <input type="text" id="height">
<br><br>
<input type="button" value="Calculate"
onclick="document.getElementById('demo').innerHTML=volume()">
<br><br>
<h1 id="demo"></h1>
</body>
</html>

12
OUTPUT

13
CALCULATING AREA USING PHP

<?php
$num1=0;
$num2=0;
$area=0;
if(isset($_POST["calculate"]))
{
$num1=$_POST["num1"];
$num2=$_POST["num2"];
$area=0.5*($num1)*$num2;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<form method="post">
Base: <input type="text" name="num1" value="<?=$num1 ?>">
<br><br>
Height: <input type="text" name="num2" value="<?=$num2 ?>">
<br><br>
<button type="submit" name="calculate">Calculate</button>
<br><br>
<h1>Area of a triangle:<?=$area?></h1>
</form>
</body>
</html>

OUTPUT

14
DATABASE PHP

//form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="accept.php " method="POST">
Email: <input type="email" name="email">
<br><br>
Message: <textarea name="message" id="" cols="30" rows="10"></textarea>
<input type="submit" value="save" name="submit">
<input type="submit" value="display" name="display" >
<br>

</form>

15
</body>
</html>
//connect.php
<?php
$dbServername="localhost";
$dbUsername="root";
$dbPassword="";
$dbName="email_db";

$conn=mysqli_connect($dbServername, $dbUsername, $dbPassword, $dbName);

//accept.php
<?php
if(isset($_POST['submit']))
{
include_once 'connect.php';
$email=mysqli_real_escape_string($conn,$_POST['email']);
$message=mysqli_real_escape_string($conn,$_POST['message']);
if(empty($email) || empty($message))
{
echo "<h4 style='color:red; margin-left:100px'>FILL IN ALL FIELDS!</h4>";

exit();
} else{
$sql="INSERT INTO mail (email,message)
VALUES('$email','$message')";
mysqli_query($conn, $sql);

echo "<h4 style='color:green; margin-left:110px'>SUCCESSFULL!</h4>";

exit();

}
}
if(isset($_POST['display']))
{
include_once 'connect.php';
$result=mysqli_query($conn,"SELECT * FROM mail");
echo"<table border='1' style='border-collapse:collapse'>
<tr>
<th>Email</th>

16
<th>Message</th>
</tr>";
while($row=mysqli_fetch_array($result))
{
echo"<tr>";
echo"<td>".$row['email']."</td>";
echo"<td>".$row['message']."</td>";
echo"</tr>";
}
echo"</table>";
mysqli_close($conn);
}

Display

<?php
if(isset($_POST['display']))
{
include_once 'connect.php';
$result=mysqli_query($conn,"SELECT * FROM mail");
echo"<table border='1' style='border-collapse:collapse'>
<tr>
<th>Email</th>
<th>Message</th>
</tr>";
while($row=mysqli_fetch_array($result))
{
echo"<tr>";
echo"<td>".$row['email']."</td>";
echo"<td>".$row['message']."</td>";
echo"</tr>";
}
echo"</table>";
mysqli_close($conn);

17
HTML TABLE 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" style="border-collapse:collapse; ">
<tr>
<th>
First name
</th>
<th>
Surname
</th>
<th>
Gender
</th>
<th>
age
</th>

18
<th>
email address
</th>

</tr>
<tr>
<td>
Tanaka
</td>
<td>
Maramba
</td>
<td>
Male
</td>
<td>
20
</td>
<td>
tanakamaramba@gmail.com
</td>
</tr>
<tr>
<td>
Tadiwa
</td>
<td>
Marange
</td>
<td>
Female
</td>
<td>
26
</td>
<td>
tadiwamarange@gmail.com
</td>
</tr>
<tr>
<td>
Farai
</td>
<td>
Marara

19
</td>
<td>
Male
</td>
<td>
26
</td>
<td>
djFasto@gmail.com
</td>
</tr>
<tr>
<td>
Feluna
</td>
<td>
Garan'anga
</td>
<td>
Female
</td>
<td>
29
</td>
<td>
garan'anga@gmail.com
</td>
</tr>
<tr>
<td>
Hillary
</td>
<td>
Muti
</td>
<td>
Male
</td>
<td>
23
</td>
<td>
hidzo@gmail.com
</td>
</tr>

20
</table>
</body>
</html>

FORM DESIGN

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Child Details:
<fieldset>

<form action="">
First Name: <input type="text">
<br><br>
Surname: <input type="text">
<br><br>
DOB: <input type="date">
<br><br>

21
Sex: <input type="radio" name="sex" value="Male" checked>Male <input type="radio"
name="sex" value="Female">Female
</fieldset>
Parent/Guardian:
<fieldset>
First Name: <input type="text">
<br><br>
Surname: <input type="text">
<br><br>
Sex: <input type="radio" name="sex" value="Male" checked>Male <input type="radio"
name="sex" value="Female">Female
<br><br>
Occupation : <input type="text">
</fieldset>
<button>Save</button> <button>Cancel</button>
</form>
</body>
</html>

22
HTML LIST2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type="i">
<li>April</li>
<ul>
<li>
Easter Saturday
</li>
<li>
Easter Sunday
</li>
<li>
Easter Monday
</li>
<li>
Independence Day
</li>
</ul>
<li>May</li>
<ul>
<li>Workers' Day</li>
<li>Africa's Day</li>
</ul>

<li>December</li>
<ul>
<li>National Unity Day</li>
<li>Christmas Day</li>
<li>Boxing Day</li>
</ul>

23
</ol>
</body>
</html>

INTEGER OR NOT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function check()
{ var num="S";
if(Number.isInteger(num)==true)
{
document.write("this is an integer")
}
else{
document.write("not an integer")
}
}
check();

24
</script>
<body>

</body>
</html>

CALCULATING PRODUCT USING JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function product()
{ var num1=parseInt(document.getElementById('num1').value)
var num2=parseInt(document.getElementById('num2').value)
var product1= num1 * num2
return product1
}
function square()
{
var num1=parseInt(document.getElementById('num1').value)
var num2=parseInt(document.getElementById('num2').value)
var sum= num1 + num2
var square=sum * sum;
return square

25
}

</script>

<body>
<form >
num1: <input type="text" id='num1'>
<br><br>
num3: <input type="text" id='num2'>
<br><br>

<inputtype="button"value="Product"onclick="document.getElementById('demo'
).innerHTML=product()">
<input type="button" value="Square"
onclick="document.getElementById('demo').innerHTML=square()">
</form>
<h1 id='demo'></h1>

</body>
</html>

26
BLANK OR NOT USING PHP

<?php

if(isset($_POST['submit']))
{ $name=$_POST['name'];
if(empty($name))
{
echo "Empty";
exit();
}
else{
echo "Not empty";
exit();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action=""method="POST">

27
Enter Name <input type="text" name="name">
<br><br>
<input type="submit" value="check" name="submit">
</form>
</body>
</html>

PHP STRING METHODS

<?php

if(isset($_POST['uppercase']))
{
$text=$_POST['text'];
$text=strtoupper($text);

}
if(isset($_POST['lowercase']))
{
$text=$_POST['text'];
$text=strtolower($text);

}
if(isset($_POST['fcupper']))
{
$text=$_POST['text'];
$text=ucfirst($text);

28
if(isset($_POST['fcwupper']))
{
$text=$_POST['text'];
$text=ucwords($text);

}
if(isset($_POST['reverse']))
{
$text=$_POST['text'];
$text=strrev($text);

}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="post">
Text: <input type="text" name="text">
<br><br>
<input type="submit" name="uppercase" value="uppercase">
<input type="submit" name="lowercase" value="lowercase">
<input type="submit" name="fcupper" value="1st char to upper">
<br><br>
<input type="submit" name="fcwupper" value="1st char of words to upper">
<input type="submit" name="reverse" value="reverse string">

<br><br>
<h1><?=$text?></h1>

</form>
</body>
</html>

29
FRAME

<!DOCTYPE html>
<html>
<frameset rows="30%,*">
<frame src="logo.png" width="300" height="300">
<frameset cols="30%,*">
<frame src="new 1.html" target="frame1">
<frame src="frame.html" name="frame3">
</frameset>

</frameset>
</html>

<!DOCTYPE html>

30
<html>
<body>
<a href="https://www.gmail.com" target="frame3">The website www.gmail.com</a>
<br>
<a href="Question1.html" target="frame3">Question1</a>

</body>
</html>

31
32
FORM DESIGN 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question1</title>
</head>
<body>

<br>
<br>
<form style="width: 30%; height: 60%; border-style: solid; border-color: black;
padding: 30px;padding-left: 40px;">
<label>FIRST NAME: <input type="text" name="fname" style="margin-left:
4%;"></label>
<br>
<br>

33
<label>SURNAME :<input type="text" name="sname" style="margin-left: 7%;"
></label>
<br>
<br>
Gender:
<label style="margin-left:15%;">Male<input type="radio" name="gender"
value="male" checked style="margin-left: 3%;"></label>
Female<input type="radio" name="gender" value="female">
<br>
<br>
<label >Address:</label><textarea style="margin-left:13%"></textarea>
<br>
<button style="margin-left:27%;width: 15%;">Save</button>
<button style="margin-left:8%;width: 15%;">Cancel</button>
</form>
</body>
</html>

34
DOWNLOADABLE FILE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="html notes.pdf" download>DOWNLOAD HTML NOTES</a>
</body>
</html>

PLAY AUDIO

<!DOCTYPE html>
<html lang="en">

35
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<h2>Tocky vibes-unondiitei</h2>
<audio src="Tocky Vibes - Unondiitei.mp3" controls></audio>

</body>
</html>

LONGEST WORD USING JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function findLongestWord(){
var str=document.getElementById('phrase').value;

36
var longestWord = str.split(' ').sort(function(a, b) { return b.length -
a.length; });
document.getElementById('here').innerHTML=longestWord[0];
//return longestWord[0];
}

</script>
</head>
<body>
<input type="text" id="phrase">
<br><br>
<h2 id="here">The longest word will display here</h2>
<button onclick="findLongestWord()" >Click here</button>
</body>
</html>

MOST FREQUENT ITEM USING JS

<!DOCTYPE html>
<html lang="en">

37
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function frequency_(){
var arr1=[3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3];
var mf = 1;
var m = 0;
var item;
for (var i=0; i<arr1.length; i++)
{
for (var j=i; j<arr1.length; j++)
{
if (arr1[i] == arr1[j])
m++;
if (mf<m)
{
mf=m;
item = arr1[i];
}
}
m=0;
}
document.getElementById("demo").innerHTML=(item+" ( " +mf +" times ) ") ;
}

</script>
</head>
<body>
<h2 id="demo">Display</h2>
<button onclick='document.innerHTML=frequency_()'>Click here</button>
</body>
</html>

38
EMAIL VALIDATION USING PATTERNS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>

39
<input value="email"pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-
]+(?:\.[a-zA-Z0-9-]+)*$/" >
<br />
<input type="submit" value="Submit Now!">
</form>

</body>
</html>

HTML TABLE 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="40%">

40
<tr>
<th>Name</th>
<th>Surname</th>
<th>Gender</th>
<th>Level</th>
</tr>
<td >John</td>
<td>Surname</td>
<td>M</td>
<td>HND</td>
</tr>
<tr>
<td>Peter</td>
<td>Gondo</td>
<td>M</td>
<td>ND</td>
</tr>
<tr>
<td>Paul</td>
<td>Tsuro</td>
<td>M</td>
<td>ND</td>
</tr>
<tr>
<td>Mary</td>
<td>Mano</td>
<td>F</td>
<td>NC</td>
</tr>
<tr>
<td>Jojo</td>
<td>Wedu</td>
<td>M</td>
<td>NC</td>
</tr>

</table>
</body>
</html>

41
MOVING TEXT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<marquee direction="right"
behavior="alternate"
style="border:BLACK 2px SOLID">
Tanley
</marquee>

42
</body>
</html>

DETERMINE DAYS IN A GIVEN MONTH

<!DOCTYPE html>
<html>
<head>
<script>
function DaysInMonth()
{
var str=document.getElementById('demo').value;

if(str=="january")
{
document.getElementById('display').innerHTML="31 Days";
}

43
else if(str=="february")
{
document.getElementById('display').innerHTML="28 Days";
}
else if(str=="march")
{
document.getElementById('display').innerHTML="31 Days";
}
else if(str=="april")
{
document.getElementById('display').innerHTML="30 Days";
}
else if(str=="may")
{
document.getElementById('display').innerHTML="31 Days";
}
else if(str=="june")
{
document.getElementById('display').innerHTML="30 Days";
}
else if(str=="july")
{
document.getElementById('display').innerHTML="31 Days";
}else if(str=="august")
{
document.getElementById('display').innerHTML="31 Days";
}
else if(str=="september")
{
document.getElementById('display').innerHTML="30 Days";
}
else if(str=="october")
{
document.getElementById('display').innerHTML="31 Days";
}
else if(str=="november")
{
document.getElementById('display').innerHTML="30 Days";
}
else if(str=="december")
{
document.getElementById('display').innerHTML="31 Days";
}
else
{document.getElementById('display').innerHTML="Invalid Entry";

44
}
}
</script>
</head>

<body>
<input type="text" id="demo">
<br><br>
<h5 id="display">Number of days will display here</h5>
<input type="button" value="click" onclick="DaysInMonth()">
</body>
</html>

DETERMINE CLICKED MOUSE BUTTON

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Mouse Event</title>

</head>
<body>

45
<h2>Mouse click event</h2>
<button onclick="click(event)">Click me</button>
<p id="demo"></p>
<script>
document.onmousedown = click
// click function called
function click(event) {
if (event.button == 2) {
alert("Right click");
}
else if(event.button==0)
{
alert("left click");
}
}
</script>
</body>
</html>

CSS

HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<title>
</title>

<body>

46
<h1>Scripting Languages</h1>
<hr>
<p>
A <br> scripting language is a programming language that supports scripts,
programs written for a special run-time
environment that can interpret and automate execution of tasks.
Environments that can be automated through <br> scripting including software
applications, web pages within a browser etc. the term
<br>"scripting language" is also loosely to refer to dynamic high level general
purpose languages such as Perl and Python.
<i>Some languages were originally developed for use within a particular
environment and evolved into domain specific or general purpose languages.</i>

</P>
<img src="what-is-coding-1024x683.jpg" alt="scripts" width="300" height="200">
<ol>
<li>Java Script</li>
<li>Python</li>
<li>Perl</li>
</ol>
</body>
</html>

CSS SIDE
body{

background-color:white;

h1{

color:blue;

p{

color:red;

47
HTML TABLE 4

<!DOCTYPE html>
<html>
<head></head>

<body>
<table border="1" style="border-collapse:collapse" width="60%" >
<tr>
<td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>tdursday</td>
<td>Friday</td>
</tr>

48
<tr>
<td>8:00-10:00</td>
<td>Quantitative <br> Techniques</td>
<td >Web Design</td>
<td>Library</td>
<td></td>
<td>Software Project</td>
</tr>
<tr>
<td>10:00-10:30</td>
<td ><b>B</b></td>
<td><b>R</b></td>
<td><b>E</b></td>
<td><b>A</b></td>
<td><b>K<b></td>
</tr>
<tr>
<td>10:30-13:00</td>
<td>Data structures</td>
<td>Database</td>
<td>Quantitative <br> Techniques</td>
<td>Software Project</td>
<td>Quantitative <br> Techniques</td>
</tr>
<tr>
<td>13:00-14:00</td>
<td><b>L</b></td>
<td><b>U</b></td>
<td><b>N</b></td>
<td><b>C</b></td>
<td><b>H<b></td>
</tr>
<tr>
<td>14:00-16:30</td>
<td>Library</td>
<td>Data Structures</td>
<td>Web Design</td>
<td>Entreprenurship <br>Skills <br> Development</td>
<td>Library</td>
</tr>
</table>
</body>
</html>

49
DETERMINE TIME OF THE DAY

<!DOCTYPE html>
<html>

<script>
function display(){
var d = new Date();
if(d.getHours<12)
{

50
document.getElementById("demo").innerHTML = "Good Morning";
}
else if(d.getHours>=12 && 16)

{
document.getElementById("demo").innerHTML = "Good Afternoon";
}
else
{
document.getElementById("demo").innerHTML = "Good Evening";
}

}
</script>
<body>
<h1 id="demo"><h1>
<button onclick=display()>Display</button>
</body>
</html>

51
DISPLAY DATE AND TIME

<!DOCTYPE html>
<html>
<script>
function ShowDate()
{
var a= new Date();
document.getElementById("demo").innerHTML=a.toLocaleDateString();

}
function ShowTime()
{
var a=new Date();
document.getElementById("demo").innerHTML=a.toLocaleTimeString();
}
</script>
<body>
<p id="demo"></p>
<button onclick=ShowDate()>Show Date</button>
<button onclick=ShowTime()>Show Time</button>
</body>
</html>

I wish you all the best and I am confident that you will find this book useful.

52

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