Scribd
Upload
5 views

Web note

Uploaded by

thabrewdulan4
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Web note

Uploaded by

thabrewdulan4
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Chamali Ranasinghe

21.1

<html>
</html>
<title>NSBM</title>
<head>
<body>
09/11/2021lec2
<b>NSBM</b>
<br>
NSBM Green &nbsp;&nbsp; University<br>

HTML TAGS <i><h1>NSBM</h1></i><br>


<u>NSBM</u><br>
1) <br> break the line. There’s no close tag for
<h1>NSBM</h1>
<br>. <h2>NSBM</h2>
2) <i> Italic <h3>NSBM</h3>
<h4>NSBM</h4>
3) <u> underline <h5>NSBM</h5>
4) <h1> font size. H1 to h6 <h6>NSBM</h6>

5) <body bgcolor> background color of the body <body bgcolor="#00ffff">


6) <font color> font color
<font color="blue" size=7
7) <ul> unordered list face="arial">Chamali
8) <li> list </font>
<font color="green" size=6>Ranasinghe
9) <ul type=” square”> square type. (Other types are disk and circle)
</font>
10) <ol> ordered list <ul>
<li>web</li>
11) <ol type=”i” start=5> list type is i, ii, iii, and it’s starting with v
<li>web</li>
12) <dl> description list <li>web</li>
<ul type="square">
13) <dt> define terms/names
<li>web</li>
14) <dd> describe each term or name <li>web</li>
<ul type="disk">
15) <img src=”pic.jpg”> insert an image
<li>web</li>
16) <center> get to center <ul type="circle">
<li>web</li>
17) <p align= “left”> get to left (same as right)
</ul>
18) &nbsp; break space
<ol>
<li>web</li>
<li>web</li>
<li>web</li>
</ol>

<ol type="i" start=34>


<li>web</li>
<li>web</li>
<li>web</li>
</ol>

<dl>
<dt>nsbm</dt>
<dd>nationl school of business
management</dd>
</dl>
16/11/2021lec3 <html>
<head>
Inserting a table <title>NSBM</title>
</head>
<body>
19. <table border> to draw the table border
<table border=1>
20. <tr height> height of the raw <tr height=200>
<td width=200>A</td>
21. <td width> table data width <td width=200 bgcolor="blue">B</td>
</tr>
22. <td><center></td> get to the center <tr height=200 bgcolor="pink">
<td><center>C</center></td>
<td>D</td>
23. <a href=….> </a> insert a link
</table>

24. <a herf= > <img src= > </a> insert a link with a picture
<a href="https://www.nsbm.ac.lk">NSBM</a>

<a href="https://www.nsbm.ac.lk">
<img src="nsbm.jpg" width="50">
</a>
25. <input type="submit" name="x" value="click">

26. <input type="text" name="C" placeholder="name"><br> <form name="g> method="post"


action="secday.html">
27. <input type="password" name="H" placeholder="password"><br>
<input type="submit" name="x" value="click">
28. <input type="radio" name="g" value="female">Female
Name: <input type="text" name="C"
<input type="radio" name="g" value="male">Male placeholder="name"><br>

password: <input type="password" name="H"


29. <input type="checkbox" name="a" value="ol">O/L placeholder="password"><br>

<input type="checkbox" name="b" value="al">A/L Gender:


<input type="radio" name="g"
<input type="checkbox" name="c" value="dip">Diploma value="female">Female
<input type="radio" name="g" value="male">Male
30. <select name="r">
Qualification
<input type="checkbox" name="a" value="ol">O/L
<option value="1">srilanka</option> <input type="checkbox" name="b" value="al">A/L
<input type="checkbox" name="c"
<option value="1">india</option> value="dip">Diploma

<option value="1">china</option> <select name="r">


<option value="1">srilanka</option>
</select> <option value="1">india</option>
<option value="1">china</option>
31. <input type="button" name="nn" value="click"> </select>

<input type="button" name="nn" value="click">


<input type="submit" name="b" value="click1"> <input type="submit" name="b" value="click1">
<input type="reset" name="nn" value="clear">
<input type="reset" name="nn" value="clear">
</form>

</body>
</html>
23/11/2021lec4

→ CSS stand for cascading style sheets.


→ Styles define for XHTML elements and markup should be displayed by the browser.

All styles will “cascade” into a new virtual style sheet in the following rule order, where number
four has the highest priority:

1) Browser default

2) External style sheet

<link rel=”stylesheet” type=”text/css” href=”myself.css”>

3) Internal style sheet


<html>
(Inside the <head> tag) (<style> tag) <head>
<title>NSBM</title>
4) Inline style (inside HTML element) <style>
.n
{
color:red;
}
<html>
#xyz
<head> {
<title> NSBM</title> color:blue;
<link rel="stylesheet" href="a.css"> text-align:center;
</head> }
<body> </style>
<h1 style="color:green;text- </head>
align:center;">nsbm</h1> <body>
<h1>New nsbm</h1>
<h1 id="xyz">nsbm</h1>
<h1>New nsbm</h1>
<h1>New nsbm</h1>
<h1 class="n" id="xyz">nsbm</h1>
<h1>New nsbm</h1>
</body> <h1>nsbm</h1>
</html>
<h1 class="n">nsbm</h1>

h1 <h1>nsbm</h1>
{
<p class="n">green university</p>
color:pink;
}
</body>

</html>
Q] Create a page with nsbm logo at the center but when the content is moving, logo should stay
at the same position.

<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<body>
<div class="text">
paragraph***

body

{
background-image: url("p1.png");
background-position: center;
background-size: 300px 100px;
background-repeat: no-repeat;
background-attachment: fixed;
}
h1
{
color:rgb(224, 121, 169);
}
.text{
text-align: center;
font-size: 2rem;
position: absolute;
}
30/11/2021lec5

<html>

<head>

<title>NSBM</title>

<style>

h1.rdu

color:red;

text-decoration:underline;

</style>

</head>

<body>

<h1 class="rdu">nsbm</h1>

<h1 id="g">nsbm</h1>

<h1>nsbm</h1>

<h1>nsbm</h1>

<h1 class="rdu">nsbm</h1>

<h1>nsbm</h1>

<h1>nsbm</h1>

<h1>nsbm</h1>

<h1 class="rdu">nsbm</h1>

<p class="rdu">chamali </p>

</body>

</html>
07/12/2021lec6

JAVASCRIPT
T
DHTML

 DHTML is a grouping of technologies used to create interactive web pages.


 DHTML is not a special version of HTML or even a version of HTML at all. Instead, it
consists of a combination of the following three web technologies.
→ HTML
→ CSS
→ Web Scripting
 This combination is that it allows you to change the HTML code for a web page after the
page has been loaded and displayed in a web browser.
 Using DHTML you can interact with the user and alter the content of a page at any time.

Web Scripting

 Two main scripting languages in use


→ JavaScript
→ VBScript

Advantages of JavaScript

 JavaScript is a scripting language used to create dynamic web pages.


 JavaScript is a lightweight programming language.
 A JavaScript consists of lines of executable computer code.
 A JavaScript is usually embedded directly into HTML pages.
 As a scripting language JavaScript is interpreted and not compiled.

Integrating JavaScript with HTML

 There are two ways to embed a JavaScript in an HTML documents:


→ By using the HTML <script> tag.
→ By using HTML tags to handle events.

Comments

 Comments are written between the <! - - and - - > symbols


Printing Hello World

<html>
<title>nsbm</title>
<body>
<script language="javascript" type="text/javascript">
document.write("hello World")
</script>
</body>
</html>

Q] Create a program to get two integer inputs from the user and display the answers for four
basic arithmetic operations.

<script language="javascript" type="text/javascript">


var test1 = 6;
var test2 = 2;
test3 = test1+test2;
document.write("addition is " +test3, "<br>");

test4 = test1-test2;
document.write("subtraction is " +test4, "<br>");

test5 = test1*test2;
document.write("multiplication is " +test5, "<br>");

test6 = test1/test2;
document.write("division is " +test6, "<br>");
</script>
JavaScript Popup Boxes

❖ An alert box

<script language="javascript" type="text/javascript">


alert("Welcome")
</script>

❖ Prompt box

<script language="javascript" type="text/javascript">


prompt("Enter your name", "name")
</script>

JavaScript functions

 A function is a reusable code-block that will be executed by an event, or when the


function is called.
 You may call a function from anywhere within the page (or even from other pages if the
function is embedded in an external .js file).
 Functions can be defined both in the <head> and in the <body> section of a document.

<html>
<head>
<script language="javascript" type="text/javascript">
function x(s)
{
document.write("welcome "+s);
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
s=prompt("enter name","");
x(s);
</script>
</body>
</html>
<html>
<head>
<script language="javascript" type="text/javascript">
function x()
{
alert("welcome" );
}
</script>
</head>
<body>
<input type="button" value="click" onClick="x()">
</body>
</html>

13/12/2021lec7

JavaScript functions

 A function is a reusable code-block that will be executed by an event, or when the


function is called.
 You may call a function from anywhere within the page (or even from other pages if the
function is embedded is an external .js file).
 Functions can be defined both in the <head> and in the <body> section of a document.

<script language = "JavaScript" type="text/javascript">


function sayHello()
{
window.alert("Hello and welcome");
}
</script>
</head>
<body>
<script language = "JavaScript" type="text/javascript">
sayHello();
</script>
Handling events

 Events are actions that can be detected by JavaScript.


 By using JavaScript, we have the ability to create dynamic web pages.
 Every element on a web page has certain events which can trigger JavaScript functions.

JavaScript events

 Events include such activities.


→ Mouse clicks
→ Mouse movements
→ Pressing keyboard keys
→ Opening and closing windows
→ Resizing windows
 Browser recognize events and perform default actions when those events occur.

Event handler

 Is a trap that recognize the occurrence of a particular type of event.


 When an event occurs for a given object, its event handler executes.

Event event handler


❖ Load onload
❖ Click onClick
❖ Resize onResize

Mouse events

 OnClick - user clicks the element with the left mouse button
 Ondbclick - user double clicks the element with the left mouse button
 Onmousedown – user presses either mouse button while the mouse pointer is
over the element.
 Onmouseup - user releases either mouse button while the mouse pointer is
over the element.
 Onmouseover – user moves the mouse pointer into boundaries of the element.
 Onmousemove – user moves the moves pointer while the pointer is over the
element
 Onmouseout – user moves the mouse pointer out of the boundaries of the
element.
<script language="JavaScript" type="text/javascript">
function x()
{
document.body.style.backgroundColor="pink"
}
function y()
{
document.body.style.backgroundColor="blue"
}
</script>
</head>
<body>
<a href="www.nsbm.ac.lk" onmouseover="x()"
onmouseout="y()">NSBM WEB</a>
</body>

<script type="text/javascript">
function displaymessage()
{
alert("hello world");
}
</script>
</head>
<body>
<form>
<input type="button" value= "Click me!" onclick = "displaymessage()">
</form>
</body>

Object based programming with JavaScript

 JavaScript focuses on supporting web-based content using object models.


 Object
An object is a construct such as a browser window or form button that manages its own
attributes, or properties and that also provides methods that can be used to manipulate
the object and its data.
Object properties Object methods

JavaScript properties are either JavaScript a method is a function provided by an object


variables or other objects. for the purpose of working with the object.

Eg: form object is a property of the document eg: data object supplies the method getDay()
object , geHours(), getMinutes() that you an use to
extract information from the objects

Object.property object.method(p1,p2,………,pn)

Document.write()
The write () method of the document object

Common date methods

Today = new date( );


the_date = Today.getDate( );
the_day = Today.getDay( );
the_year = Today.getFullYear( );
the_hour = Today.getHours( );
the_month = Today.getMonth ( );
the_miniute = Today.getMiniutes( );
the_second = Today.getTime( );
the_time = Today.getTime( );
the localYear = Today.getYear( );

<script language= "JavaScript" type="text/javascript">


TodaysDate = new Date();
document.write("Today's date is: " + TodaysDate);
var MyYear = TodaysDate.getFullYear();
document.write("This year is: " + MyYear);
</script>
window object

window object has dozens of objects and methods associated with it.

→ window.alert( )
→ window.prompt( )
→ window.confirm( )
→ windw.open( )
→ window.close( )
→ window.resizeTo(x,y)

using JavaScript to manage forms

form validation

the real benefit of using JavaScript with your forms is to perform validation of user input.
Validation allows you to ensure that the user has filled in all required fields and that valid fata
has been entered in those fields.

Document object

each web page can contain s single document object.

 document.write( ) → write output to the screen


 bgColor → specifies the document background color.
 fgColor → specifies the color of document text.
 LinkColor → specifies the color of links
 alinkColor → specifies the color of links
 vlinkColor → specifies the color of visited links

using JavaScript to manage forms

 form validation
 the real benefit of using JavaScript with your forms is to perform validation of user
input. Validation allows you to ensure that the user has filled in all required fields and
that has been entered in those fields.
Q] username should not be empty and password should contain 6 characters.

<html>
<head>
<title>Name</title>
<script language= "JavaScript" type="text/javascript">
function Validatetext()
{
if((document.f1.un.value.length <
1)&&(document.f1.pass.value.length<1))
{
window.alert("missing content!! please correct");
return;
}
if(document.f1.pass.value.length < 6)
{
window.alert("password should be 6 characters");
return;
}
}
</script>
</head>
<body>
<form method=post name="f1">
<b> Username: </b>
<input name="un" type="text" size="15" maxlength="20" value=""><br>
<b> Password: </b>
<input name="pass" type="text" size="15" maxlength="20" value=""><br>
<input type="button" value="Validate" onclick="Validatetext()">
</body>
</form>
</html>
04/01/2022lec8

PHP
 Php is a saver-side scripting language for creating dynamic and interactive web pages.
 Ie. Code is executed on the saver.
 A PHP [age will generally contain PHP elements with HTML tags and other textual
content.
 PHP is case sensitive.

<html>
<body>
server <?php PHP
………………. Parser

<html>
<body>
client <?php Database
Content……

All PHP code must be included inside one of the following markup tags.

• <?php php code ?>


• <? Php code ?>
• <script language = “php”> php code <?script>
Q] Write a PHP page to print the message “Hello world”.

<html>
<body>
<h1>MY first PHP Page</h1>
<?php
echo "<h2>Hello World</h2>";
?>
</body>
</html>

11/01/2022lec9

Q] write NSBM in red color

<html>
<body>
<?php
echo"<b><u><font color=red>NSBM</font></u></b>";
?>
</body>
<html>

Variables

All variables must begin with a dollar ($) sign followed by a meaningful name.

The name can contain any letter, number or the underscore, but the name cannot begin with a
number.

Eg: $abc

$my_abc

$var123

Arrays

The array( ) function can be used to define an array.


$array_name = array(“value1”, “value2”,…)

<html>
<body>
<h1> PHP with array1</h1>
<?
$colors =array("Fire"=> "Red", "Sea"=> "Blue");
$col = $colors["Sea"];
echo "<h2>The Sky is $col<h2>";
?>
</body>
</html>

Q] create a form to enter your name and display welcome + your name, using PHP.

<html>
<head>
<title>NSBM</title>
<body>

<form name="g" method="post" action="csr.php">


Username: <input type="text" name="C" placeholder="name"><br><br>
<input type="submit" name="x" value="submit">
</form>

</body>
</head>
</html>

<?php
$abc=$_REQUEST["C"];
echo "welcome $abc";
?>
18/01/2022lec10

Q] create a form with HTML and PHP.

<html>
<head>
<title>nsbm</title>
<body>
<form name="g"method="post" action="form.php">

Name: <input type="text" name="C"


placeholder="name"><br><br>

password: <input type="password" name="H"


placeholder="password"><br><br>

Gender:
<input type="radio" name="g" value="female">Female
<input type="radio" name="g" value="male">Male<br><br>

Qualification
<input type="checkbox" name="a" value="ol">O/L
<input type="checkbox" name="b" value="al">A/L
<br><br>

country:
<select name="r">
<option value="1">srilanka</option>
<option value="1">india</option>
<option value="1">china</option><br>
</select><br><br>

<input type="submit" name="x" value="submit">


<input type="reset" name="nn" value="clear">
</form>
</body>
</head>
</html>
<?php
$a=$_REQUEST["C"];
$b=$_REQUEST["H"];
$c=$_REQUEST["g"];
$d=$_REQUEST["a"];
$e=$_REQUEST["r"];

echo "name : $a<br>";


echo "password: $b<br>";
echo "Gender : $c<br>";
echo "qualification : $d<br>";
echo "country : $e<br>";
?>

Database connectivity
<?php
$server="localhost";
$user = "root";
$pw = "";
$db = "web1";

$conn = new mysqli("localhost","root","","web1");

if($sconn->connect_error)
{
die("Connection failed:".$conn->connect_error);
}
else
{
echo "success";
}
?>
01/02/2022lec11

Q] create a PHP program to receive the name from a text box and to insert the name and the
system time to the database.

Q] create a PHP program to edit the name which was entered earlier? (get the old name & new
name from the user)

Q] create a PHP program to delete the specific record from the database.

08/02/2022lec12

15/02/2022lec13

<?php
$fname=$_FILES["photo"]["name"];
$ftemp=$_FILES["photo"]["tmp_name"];

echo $fname;
echo "<br>";
echo $ftemp;
// $flag=move_uploaded_file($ftemp,"D:/$fname");

// if($flag)
// {echo "File moved successfully";}
// else
// {echo " Sorry couldn't move";}
?>

You might also like