Iwd Code Bible Volume1
Iwd Code Bible Volume1
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";
//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);
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>
<!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
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>
<!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>
<!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>
<!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>
<!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