Scribd
Upload
224 views

Iwt Practical

This document provides an overview of practical assignments completed for an Internet Web Technology course. It includes 15 practical assignments covering topics like HTML, CSS, JavaScript, PHP, and SQL. Some key assignments involve creating basic HTML pages, adding images and links to HTML, working with lists, tables, and forms in HTML, and introductions to CSS, JavaScript, PHP, and SQL. Frames in HTML and form validation in JavaScript are also practiced.

Uploaded by

[04] - Abrar Shah
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
224 views

Iwt Practical

This document provides an overview of practical assignments completed for an Internet Web Technology course. It includes 15 practical assignments covering topics like HTML, CSS, JavaScript, PHP, and SQL. Some key assignments involve creating basic HTML pages, adding images and links to HTML, working with lists, tables, and forms in HTML, and introductions to CSS, JavaScript, PHP, and SQL. Frames in HTML and form validation in JavaScript are also practiced.

Uploaded by

[04] - Abrar Shah
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/ 18

19048112004 ABRAR SHAH

INTERNET WEB TECHNOLOGY


(CSE-5417)
PRACTICALS
By

ABRAR SHAH (19048112004)


B-Tech CSE 5th Semester

LECTURER
ER. HESHAM AKHTER

1|Page
19048112004 ABRAR SHAH

PRACTICAL PRACTICAL
NO.

01 INTRODUCTION TO HTML

02 IMAGE UPLOAD IN HTML

03 LINK IN HTML

04 LIST IN HTML

05 TABLES IN HTML

06 FORMS IN HTML

07 FRAMES IN HTML

08 INTRODUCTION TO CSS AND ITS USAGE

09 INTRODUCTION JAVA SCRIPT

10 VALIDATION IN JAVA SCRIPT

11 CONDITIONAL STATEMENTS IN JAVA SCRIPT

12 INTRODUCTION TO PHP

13 PHP ARRAY

14 CONDITIONAL STATEMENT IN PHP

15 SQL CONNECTIVITY

2|Page
19048112004 ABRAR SHAH

Introduction to HTML Create a basic HTML file


Hyper Text Markup Language is a set of logical codes (markup) in parentheses that constitute the
appearance of a web document and the information it contains. It is a language

for creating static web


pages. It specifies how the contents are to be presented on the web page. HTML is not a case
sensitive
language so; HTML and html both are same.
HTML is a text document with formatting codes and this document has the suffix “.html” or “.htm”.
Basic HTML Document
An element called HTML surrounds the whole document. This element contains two sub-elements,
HEAD and BODY. These elements are required to form any HTML document.
<Html>
<Head>
<Title>The First Page</title>
</head>
<Body>
Hello World
</body>
</html>
Just write down above code in the notepad editor and save this file with the extension of .html or
.htm and then double click on that file you will get output on the default web browser.

OUTPUT

PRACTICAL 2
IMAGE UPLOAD IN HTML

The <img> tag is used to embed an image in an HTML page.

3|Page
19048112004 ABRAR SHAH

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The<img> tag has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

IMAGE UPLOAD EXAMPLE

<html>

<body>

<img src=" C:\Users\shayan\Downloads\ wp10197917-luffy-pfp-wallpapers.jpg" alt="luffy"


width="42" height="42" >

</body>

</html>

OUTPUT

PRACTICAL 3
HTML LINKS – HYPERLINKS

HTML links are hyperlinks.

4|Page
19048112004 ABRAR SHAH

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

The HTML <a> tag defines a hyperlink.

The most important attribute of the <a> element is the ( href ) attribute, which indicates the
link's destination. The link text is the part that will be visible to the reader. Clicking on the link
text, will send the reader to the specified URL address.

EXAMPLE

<!DOCTYPE html>

<html>

<body>

<h1>HTML Links</h1>

<p><a href=" C:\Users\shayan\img.html">View Image</a></p>

</body>

</html>

OUTPUT

PRACTICAL 4
HTML LISTS
HTML lists allow web developers to group a set of related items in lists.

5|Page
19048112004 ABRAR SHAH

 An unordered list starts with the <ul> tag. Each list item starts with
the<li> tag. The list items will be marked with bullets.

 An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag. The list items will be marked with numbers by default.

 HTML also supports description lists. A description list is a list of terms,


with a description of each term. The <dl> tag defines the description list, the
<dt> tag defines the term, and the <dd> tag describes each term.

EXAMPLE
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An ordered HTML list</h2>


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h2>A Description List</h2>


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>

6|Page
19048112004 ABRAR SHAH

<dd>- white cold drink</dd>


</dl>

</body>
</html>

PRACTICAL 5
TABLES IN HTML
HTML tables allow web developers to arrange data into rows and columns. A
table in HTML consists of table cells inside rows and columns. The table is
used by <table> tag.

Each table row starts with a <tr> and ends with a </tr> tag. tr stands for
table row.

 Each table cell is defined by a <td> and a </td> tag. td stands for table
data. Everything between <td> and </td> are the content of the table cell.

 Sometimes you want your cells to be headers. In those cases use the
<th> tag instead of the <td> tag.

EXAMPLE
<!DOCTYPE html>
<html>
<style>

7|Page
19048112004 ABRAR SHAH

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>

8|Page
19048112004 ABRAR SHAH

PRACTICAL 6
FORMS IN HTML

An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

The HTML <form> element is used to create an HTML form for user input.
The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.

EXAMPLE
<!DOCTYPE html>
<head>
<title>Forms</title>
</head>
<body>
<table border="4">
<form>
<tr><th>name</th><td><input type="text"></td></tr>
<tr><th>password</th><td><input type="password"></td></tr>
<tr><th>enter your hobbies:</th><td><input type="checkbox" value="on"
name="a">Travel</br>
<input type="checkbox" value="on" name="b">reading</br>
<input type="checkbox" value="on" name="c">gardening</br>
</td></tr>

9|Page
19048112004 ABRAR SHAH

<tr><th>notify by email:</th><td><input type="checkbox" value="on"></td></tr>


<tr><th>Gender</th><td><input type="radio" value="male" name="gender">Male</br>
<input type="radio" value="female" name="gender">Female</td></tr>
<tr><th>Textarea</th><td><input type="textarea" rows="5" col="5"></td></tr>
<tr><td><input type="submit"></td><td><input type="reset"></td></tr>
</form>
</table>
</body>
</html>

PRACTICAL 7
FRAMES IN HTML
The <frame> tag was used in HTML 4 to define one particular window
(frame) within a <frameset>.
EXAMPLE
<!DOCTYPE html>
<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">

10 | P a g e
19048112004 ABRAR SHAH

<title>Frames</title>
</head>
<frameset cols="50%,50%">
<frame src="greatetof3.html"></frame>
<frame src="add.html"></frame>
</frameset>
</html>

PRACTICAL 8
INTRODUCTION TO CSS & USAGE
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style properties for a
given HTML element. Each property has a name and a value, separated by a colon (:). Each
property declaration is separated by a semi-colon (;).

There are 3 ways to select and HTML tag for styling

1. By Tag Name i.e <p> …

2. By an ID attribute i.e. This is thick and green.

3. By Class attribute i.e. This is green.

You can use CSS in three ways in your HTML document –

1. External Style Sheet − Define style sheet rules in a separate .css file and then include that file in
your HTML document using HTML <link> tag.

11 | P a g e
19048112004 ABRAR SHAH

2. Internal Style Tag − Define style sheet rules in header section of the HTML document
using <style> tag.

3. Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style
attribute.

PRACTICAL 9
INTRODUCTION TO JAVA SCRIPT
A script is a small piece of program that can add interactivity to your website. JavaScript makes
HTML pages more dynamic and interactive. For example, a script could generate a pop-up alert box
message, or provide a dropdown menu. This script could be written using JavaScript. You can write
various small functions, called event handlers using any of the scripting language and then you can
trigger those functions using HTML attributes.

Now-a-days, only JavaScript and associated frameworks are being used by most of the web
developers. You can keep JavaScript code in a separate file and then include it wherever it's needed,
or you can define functionality inside HTML document itself as we have used the CSS

<script src=”url” type=”text/javascript”> </script>

Event Handlers:
Event handlers are nothing but simply defined functions which can be called against any mouse or
keyboard event. You can define your business logic inside your event handler which can vary from a
single to 1000s of line code.

EXAMPLE
<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function add()

var a = document.getElementById("a").value;

var b = document.getElementById("b").value;

var c = parseInt(a) + parseInt(b);

document.write("addition is =",+c);

</script>

</head>

<body>

12 | P a g e
19048112004 ABRAR SHAH

<form>

Write 1 no.: <input type="text" id="a"></br>

write 2 no.: <input type="text" id="b"></br>

<input type="button" value="answer" onclick="add()">

</form>

</body>

</html>

PRACTICAL 10
VALIDATION IN JAVA SCRIPT

HTML form validation can be done by JavaScript. If a form field (fname) is


empty, this function alerts a message, and returns false, to prevent the form
from being submitted. The function can be called when the form is
submitted. JavaScript is often used to validate numeric input.

EXAMPLE
<!DOCTYPE html>

<html>

<head>

<script>

function validateForm() {

let x = document.forms["myForm"]["fname"].value;

if (x == "") {

alert("Name must be filled out");

return false;

</script>

</head>

<body>

<h2>JavaScript Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">

Name: <input type="text" name="fname">

<input type="submit" value="Submit">

</form>

13 | P a g e
19048112004 ABRAR SHAH

</body>

</html>

PRACTICAL 11
CONDITIONAL IN JAVA SCRIPT

Very often when you write code, you want to perform different actions for
different decisions.

You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

 Use IF to specify a block of code to be executed, if a specified condition


is true.
 Use ELSE to specify a block of code to be executed, if the same
condition is false.
 Use ELSE IF to specify a new condition to test, if the first condition is
false.

EXAMPLE

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function myf()

var a = parseInt(document.getElementById("a").value);

var b = parseInt(document.getElementById("b").value);

var c = parseInt(document.getElementById("c").value);

if(a>b && b>c)

{ document.write("greatest no.",+a); }

else if(b>a && a>c)

{ document.write("greatest no.",+b); }

14 | P a g e
19048112004 ABRAR SHAH

else

{ document.write("greatest no.",+c); }

</script>

</head>

<body>

<form>

write num1 : <input type="text" id="a"></br>

write num2 : <input type="text" id="b"></br>

write num3 : <input type="text" id="c"></br>

<input type="button" value="answer" onclick="myf()">

</form>

</body>

</html>

PRACTICAL 12
INTRODUCTION TO PHP

PHP is an acronym for "PHP: Hypertext Preprocessor ". PHP is a widely-used,


open source scripting language. PHP scripts are executed on the server. PHP
files can contain text, HTML, CSS, JavaScript, and PHP code. PHP code is
executed on the server, and the result is returned to the browser as plain
HTML. PHP files have extension “.php”

A PHP script can be placed anywhere in the document.

A PHP script starts with <?php and ends with ?>

EXAMPLE
<!DOCTYPE html>

<html>

<body>

<h1>My first PHP page</h1>

15 | P a g e
19048112004 ABRAR SHAH

<?php

echo "Hello World!";

?>

</body>

</html>

PRACTICAL 13
PHP ARRAY

An array stores multiple values in one single variable. An array is a special variable, which can
hold more than one value at a time. If you have a list of items (a list of car names, for example),
storing the cars in single variables could look like this.

$cars1 = "Volvo";
$cars2 = "BMW";
$cars3 = "Toyota";

An array can hold many values under a single name, and you can access the
values by referring to an index number.

In PHP, the array() function is used to create an array.

array();

In PHP, there are three types of arrays:

 Indexed arrays - Arrays with a numeric index


 Associative arrays - Arrays with named keys
 Multidimensional arrays - Arrays containing one or more arrays

EXAMPLE
<!DOCTYPE html>

<html>

<body>

<?php

$cars = array("Volvo", "BMW", "Toyota");

echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";

?>

16 | P a g e
19048112004 ABRAR SHAH

</body>

</html>

PRACTICAL 14
CONDITIONAL STATEMENT IN PHP

Very often when you write code, you want to perform different actions for
different conditions. You can use conditional statements in your code to do
this.

In PHP we have the following conditional statements:

if statement - executes some code if one condition is true

if...else statement - executes some code if a condition is true and another


code if that condition is false

if...elseif...else statement - executes different codes for more than two


conditions

if (condition) {
  code to be executed if condition is true;
}

elseif (condition) {
  code to be executed if first condition is false and this condition
is true;
}

else {
  code to be executed if condition is false;
}

EXAMPLE
<!DOCTYPE html>

<html>

<body>

<?php

$t = date("H");

echo "<p>The hour (of the server) is " . $t;

echo ", and will give the following message:</p>";

if ($t < "10") {

17 | P a g e
19048112004 ABRAR SHAH

echo "Have a good morning!";

} elseif ($t < "20") {

echo "Have a good day!";

} else {

echo "Have a good night!";

?>

</body>

</html>

PRACTICAL 15
SQL CONNECTIVITY

PHP 5 and later can work with a MySQL database using:

 MySQLi extension (the "i" stands for improved)


 PDO (PHP Data Objects)

Earlier versions of PHP used the MySQL extension. However, this extension was deprecated
in 2012.

EXAMPLE
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>

18 | P a g e

You might also like