Experiment-2: AIM: To Use Anchor Tag and Hyperlink Different Pages. Theory

Department of Information Technology
Experiment-2
AIM: To use anchor tag and hyperlink different pages.

Theory:
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
S/W Requirments: Web Browser (Internet Explorer, Mozilla), Notepad++
File Directory Structure:
Code:
CGC.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CGC</title>
</head>
<body>
<center><h1>WELCOME TO CGC</h1></center>
<img src="https://getmyuni.azureedge.net/college-image/big/chandigarh-group-of-colleges-
cgc-landran-mohali.jpg" width="100%" height="300px">
<center>
<h2>
<a href="cec/index.html">CEC</a>
<a href="coe/index.html">COE</a>
<a href="cbsa/index.html">CBSA</a>
</h2>
</center>
<h2>ABOUT US</h2>
<p>Chandigarh Group of Colleges, Landran has become a synonym to excellence. Situated
on the National Highway 205A, Chandigarh Group of Colleges bespeaks A-class educational
facilities. CGC, Landran has come a long way in the field of education. In the year 2001, it got
incepted with a hope to bridge the gap between inquisitive minds and education.
Initially, Engineering was the flagship program at CGC, Landran and with time, more & more
programs got added to the curriculum. Currently, the college offers 45+ programs under seven
domains namely Engineering, Biotechnology, Computer Application, Management, Education,
Pharmacy, and Hotel Management. Under the aegis of CGC, Landran, new-wave pedagogy, 360-
Degree training, international exposure, and industry-academia interface have been methodically
interwoven, to provide a comprehensive overlook of the respective industries. With the provision of
remarkable infrastructure, ultra-modern laboratories, accompanied by practical strategies, the
college has managed to reform the ways of modern education.</p>
</body>
</html>
CEC/index.html
<!DOCTYPE html>
<html>
<head>
<title>CEC</title>
</head>
<body>
<center><h1>CEC</h1></center>
<center>
<h2>
<a href="it/index.html">IT</a>
<a href="cse/index.html">CSE</a>
</h2>
</center>
<center><h2>ABOUT CEC</h2></center>
on the National Highway 205A, Chandigarh Group of Colleges bespeaks A-class
educational facilities. CGC, Landran has come a long way in the field of education. In the
year 2001, it got incepted with a hope to bridge the gap between inquisitive minds and
education.
</p>
</body>
</html>
COE/index.html
<!DOCTYPE html>
<html>
<head>
<title>COE</title>
</head>
<body>
<center><h1>COE</h1></center>
<center><h2>ABOUT COE</h2></center>
education.
</p>
</body>
</html>
CBSA/index.html
<!DOCTYPE html>
<html>
<head>
<title>CBSA</title>
</head>
<body>
<center><h1>CBSA</h1></center>
<center><h2>ABOUT CBSA</h2></center>
education.
</p>
</body>
</html>
SCREENSHOTS:
Experiment-3
Aim: Write a program to create unordered and ordered list

OBJECTIVE: To Create a page in HTML using Ordered list and Unordered list on Web Browser.
S/W REQUIREMENTS: Web Browser (Internet Explorer, Mozilla), Notepad++
H/W REQUIREMENTS: Intel Core i5, 256 MB RAM.
THEORY: -
1. Ordered List HTML: Ordered List or Numbered List displays elements in numbered format.
The HTML ol tag is used for ordered list. We can use ordered list to represent items in either
numerical order format or alphabetical order format, or any format where an order is
emphasized.
There can be different types of numbered list: -
 Numeric Number (1, 2, 3)
 Capital Roman Number (I II III)
 Small Roman Number (i ii iii)
 Capital Alphabet (A B C)
 Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in Tag:
 Type "1": This is the default type. In this type, the list items are numbered with numbers.
 Type "I": In this type, the list items are numbered with upper case roman numbers.
 Type "i": In this type, the list items are numbered with lower case roman numbers.
 Type "A": In this type, the list items are numbered with upper case letters.
 Type "a": In this type, the list items are numbered with lower case letters
Start attribute:-The start attribute is used with ol tag to specify from where to start the list items.
 It will show numeric values starting with "5".
 It will show capital alphabets starting with "E".
 It will show lower case alphabets starting with "e".
 It will show Roman upper case value starting with "V".
 It will show Roman lower case value starting with "v".
2. Unordered List HTML: Unordered List or Bulleted List displays elements in bulleted format
. We can use unordered list where we do not need to display items in any particular order.
The HTML ul tag is used for the unordered list.
There can be 4 types of bulleted list:

 disc
 circle
 square
 none
To represent different ordered lists, there are 4 types of attributes in Tag:
 Type "disc": This is the default style. In this style, the list items are marked with bullets.
 Type "circle": In this style, the list items are marked with circles.
 Type "square": In this style, the list items are marked with squares.
 Type "none": In this style, the list items are not marked.
CODE:
<!DOCTYPE html>
<html>
<head>

<title>2102497 Jatin Bajaj</title>
</head>
<body>
<h3>WAP TO USE ORDERED AND UNORDERED LIST</h3>
<ol type="1">
<li>
CHAPTER 1
<ul type="disc">
<li>Sub topic 1</li>
</ul>
</li>
<li>
CHAPTER 2
<ul type="disc">
</ul>
</li>
<li>
CHAPTER 3
<ul type="disc">
</ul>
</li>
</ol>
</body>
</html>
OUTPUT:
Experiment-4
Aim: Write a program to demonstrate the different formatting tags in HTML.
OBJECTIVE: To implement different formatting tags on text, performed on Web Browser.

S/W REQUIREMENTS: Web Browser (Internet Explorer, Mozilla), Notepad
H/W REQUIREMENTS: Intel P-IV, 256 MB Ram.
THEORY: -
In HTML, a number of elements are used to format text. The formatting tags are divided into two
groups: physical tags, that are used to style the text (visual appearance of the text) and logical or
semantic tags that add semantic value to the text parts (e. g., inform search engines for which
keywords a web page should be ranked).
1. Heading tags: The <h1>-<h6> tags are used to define HTML Headings There are 6 levels
of headings in HTML, the <h1> defines the most and the <h6> least important headings.
2. Bold tag: The <br>tag is a physical tag that stands for bold text, whereas the <strong> tag
being a logical tag is used to emphasize the importance of the text.
3. Italic tag: The <i> and <em> tags define italic text. The <i> tag is only responsible for
visual appearance of the enclosed text, without any extra importance. The <em> tag
defines emphasized text, with added semantic importance.
4. Preformatted text tag: The <pre> tag is used to define preformatted text. The browsers
render the enclosed text with white spaces and line breaks.
5. Mark tag: The <mark>tag is used to present a part of text in one document as marked or
highlighted for reference purposes.
6. Small tag: The <small> tag decreases the text font size by one size smaller than a
document's base font size (from medium to small, or from x-large to large). The tag
usually contains the items of secondary importance such as copyright notices, side
comments, or legal notices.
7. Delete tag: The <del> tag specifies a part of the text that was deleted from the document.
Browsers display this text as a strikethrough.
8. Insert tag: The <ins> tag defines the text that has been inserted (added) to the document.
The content of the tag is displayed as underlined.
9. Underline tag: The <u> tag specifies text that is stylistically different from normal text,
i.e., words or fragments of text that need to be presented differently. This could be
misspelled words or proper nouns in Chinese.
10. Subscript tag: The <sub> defines subscript texts. Subscript text is under the baseline of
other symbols of the line and has smaller font. The <sup> tag defines superscript, that is
set slightly above the normal line of type and is relatively smaller than the rest of the text.
The baseline passes through upper or lower edge of the symbols.
11. Define tag: The <dfn> tag is used to define the term, that is mentioned for the first time.
The content of the tag is displayed in italic.
12. Paragraph tag: The <p> tag defines the paragraph. Browsers automatically add 1em
margin before and after each paragraph. The <br> tag inserts a single line break. Unlike
the <p> tag an empty indent is not added before the line. The <hr> tag defines a thematic
change between paragraph level elements in an HTML page.
CODE:
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1>WAP TO USE DIFFERENT FORMATTING TAGS</h1>
<h2>
<b>This text is Bold</b><br>
<i>This text is Italic</i><br>
<u>This text is Underline</u><br>
<font color="red" size="20px" family="Times New Roman">This text is using font
tag with color = red and size = 20px</font>
</h2>
</body>
</html>
OUTPUT:-
Experiment-5
Aim: Develop an HTML page including CSS to create table by using row andcol span.
THEORY: - The rowspan and colspan are <td> tag attributes. These are used to specify the number
of rows or columns a cell should span. The rowspan attribute is for rows as well as the colspan
attribute is for columns.
These attributes have numeric values, for example, colspan=3 will span three columns. You can use
rowspan="n" on a td element to make it span n rows, and colspan="m" on a td element to make it
span mcolumns.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Jatin Bajaj 2102497</title>
<style>
table,td,th{
border:1px solid black; border-collapse: collapse; text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="6">DEPARTMENT OF INFORMATION
Jatin Bajaj 2102497
DEPARTMENT OF INFORMATION TECHNOLOGY
TECHNOLOGY
</th>
</tr>
<tr >
<th colspan="6">IT 6th Semester</th>
</tr>
<tr>
<th>S. No.</th>
<th>Roll No.</th>
<th>Name</th>
<th>Lecture attended</th>
<th>Attendance</th>
<th>Overall Percent</th>
</tr>
<tr>
<td>1.</td>
<td>101</td>
<td>Aditi</td>
<td>3</td>
<td>100%</td>
<td rowspan="6">80%</td>
</tr>
<tr>
<td>2.</td>
<td>102</td>
<td>Aakash</td>
<td>2</td>
<td>75%</td>
</tr>
<tr>
<td>3.</td>
<td>103</td>
<td>Devansh</td>
<td>1</td>
<td>50%</td>
</tr>
<tr>
<td>4.</td>
<td>104</td>
<td>Jatin</td>
<td>3</td>
<td>100%</td>
</tr>
<tr>
<td>5.</td>
Jatin Bajaj 2102497
<td>105</td>
<td>Divansh</td>
<td>3</td>
<td>100%</td>
</tr>
<tr>
<td>6.</td>
<td>106</td>
<td>Harshit</td>
<td>1</td>
<td>30%</td>
</tr>
</table>
</body>
</html>
OUTPUT:-
Experiment-6
Aim: Write a program to demonstrate internal Linking in HTML.
THEORY: - An internal link is a link from one page to another page on the same domain.
They're simply text hyperlinks from one page to another page on your website.
Internal linking is important for at least three reasons. They strengthen three parts of
your funnel.
They pass authority from one page to another (search optimization)
They guide visitors to high-value, relevant content (usability / UX)
They prompt visitors to act, as calls-to-action (conversion optimization)
CODE:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1><a id="top">INDEX</a></h1>
<a href="#C1">Chapter 1</a><br>
<h3 id ="C1">Chapter 1</h3>
<p>A book is a medium for recording information in the form of writing or images, typically
composed of many pages (made of papyrus, parchment, vellum, or paper) bound together and
protected by a cover. The technical term for this physical arrangement is codex (plural, codices). In
the history of hand-held physical supports for extended written compositions or records, the codex
replaces its predecessor, the scroll. A single sheet in a codex is a leaf and each side of a leaf is a
page.</p>
Jatin Bajaj 2102497
<a href="#top">Go back to top</a><br>
composed of many pages (made of papyrus, parchment, vellum, or paper bound together and
page.</p>
page.</p>
page.</p>
page.</p>
</body>
</html>
OUTPUT:-
Experiment-7
Aim: Write a program to demonstrate use of Frameset tag.

THEORY: -
The <frameset> tag in HTML is used to define the frameset. The <frameset> element contains
one or more frame elements. It is used to specify the number of rows and columns in frameset
with their pixel of spaces. Each element can hold a separate document.
Syntax:
<frameset cols = "pixels|%|*">
Attributes: The list of frameset attributes are given below:

 cols: The cols attribute is used to create vertical frames in a web browser. This attribute is
basically used to define the no. of columns and their size inside the frameset tag.
 rows: The rows attribute is used to create horizontal frames in the web browser. This
attribute is used to define the no. of rows and their size inside the frameset tag.
 border: This attribute of frameset tag defines the width of the border of each frame in
pixels. Zero value is used for no border.
 frameborder: This attribute of frameset tag is used to specify whether a three-dimensional
border should be displayed between the frames or not for this use two values 0 and 1, where
0 defines no border and value 1 signifies for yes there will be a border.
 framespacing: This attribute of frameset tag is used to specify the amount of spacing
between the frames in a frameset. This can take any integer value as a parameter which
basically denotes the value in pixel.
CODE:
frameset.html
<!DOCTYPE html>
<html>
<head>
</head>
<frameset rows="*,*">
<frameset cols="*,*">
<frame src="cgc.html">
<frame src="map.html">
</frameset>
<frameset cols="*,*">
<frame src="about.html">
<frame src="cgclogo.html">
</frameset>
</frameset>
</html>
cgc.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h1>Welcome to CGC</h1>
<img src="https://getmyuni.azureedge.net/college-image/big/chandigarh-group-of-
colleges-cgc-landran-mohali.jpg">
</center>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h1>ABOUT CGC</h1>
<h3><font color="red">The Chandigarh Group of Colleges are the educational

institutions located in Sahibzada Ajit Singh Nagar district of Punjab in short distance from cities of
Chandigarh and Mohali. Chandigarh Group of Colleges was established in 2001 at Landran initially
and at Jhanjeri in 2012.</font></h3>
</center>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h1>CGC MAP</h1>
<div class="mapouter"><div class="gmap_canvas"><iframe width="600"
height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=Cgc
%20Landran&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"></iframe><a
href="https://embedgooglemap.net/124/"></a><br><style>.mapouter{position:relative;text-
align:right;height:500px;width:600px;}</style><a
href="https://www.embedgooglemap.net"></a><style>.gmap_canvas
{overflow:hidden;background:none!important;height:300px;width:600px;}</style></div></div>
</center>
</body>
</html>
cgclogo.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h1>CGC</h1>
<img src="https://www.admissionindia.net/uploads/colleges/104/CGC_logo.jpeg"
height="200px" width="300px">
</center>
</body>
</html>
OUTPUT:-
Experiment-8
Aim: Write a program to demonstrate inline, internal and external CSS.
THEORY: -
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in HTML or XML (including XML dialects such as SVG, MathML or
XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on
other media.
Example:
body {
background-color: lightblue;
}
Types:
There are 3 types of CSS which are below:

 Inline CSS: Inline CSS is used to style a specific HTML element. Add a style attribute to
each HTML tag without using the selectors.
 Internal CSS: The Internal CSS has <style> tag in the <head> section of the HTML
document. This CSS style is an effective way to style single pages.
 External CSS: In external CSS, we link the web pages to the external .css file. It is created
by text editor. The CSS is more efficient method for styling a website.
CODE:
home.html
<!DOCTYPE html>
<html>
<head>
<title>2102497 Jatin</title>
<style type="text/css">
.img-logo
{
width: 100px;
height: 100px;
}
.site-brand
{
display: flex;
position: fixed;
width: 100%;
background: rgba(44, 94, 221, 0.3);
}
.site-heading
{
margin: 0px;
margin-top: 20px;
margin-left: 100px;
font-size: 50px;
color: #fff;
}
body
{
margin: 0;
padding: 0;
background: rgba(44, 94, 221, 0.3);
}
.right-content
{
padding-top: 150px;
padding-left: 50px;
}
.right-content h4
{
font-size: 40px;
text-decoration: underline;
/*color: #fff;*/
}
.right-content p
{
font-size: 20px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
margin: 1%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 1px 10px;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="nav.css">
<body>
<div class="wrapper">
<div class="site-brand" style="display: flex;">
<div class="logo" style="width: 25%;">
<img
src="https://www.static-contents.youth4work.com/university/Documents/Colleges/collegeLogo/
20220208160446.png?v=20220208160446" class="img-logo">
</div>
<div class="site-head-div" style="width: 75%;">
<h3 class="site-heading">Chandigarh Group Of Colleges</h3>
</div>
</div>
<div class="content-body" style="display: flex;">
<div id="mySidenav" class="sidenav" style="width: 20%; ">
<a href="#about-us">About Us</a>
<a href="#blog">Blog</a>
<a href="#">Contact</a>
</div>
<div class="right-content" style="width: 80%; ">
<h4 id="about-us">About Us</h4>
<p>
Chandigarh Group of Colleges, Landran has become a
synonym to excellence. Situated on the National Highway 205A, Chandigarh Group of Colleges
bespeaks A-class educational facilities. CGC, Landran has come a long way in the field of
education. In the year 2001, it got incepted with a hope to bridge the gap between inquisitive minds
and education.
Initially, Engineering was the flagship program at CGC,

Landran and with time, more & more programs got added to the curriculum. Currently, the college
offers 45+ programs under seven domains namely Engineering, Biotechnology, Computer
Application, Management, Education, Pharmacy, and Hotel Management. Under the aegis of CGC,
Landran, new-wave pedagogy, 360-Degree training, international exposure, and industry-academia
interface have been methodically interwoven, to provide a comprehensive overlook of the
respective industries. With the provision of remarkable infrastructure, ultra-modern laboratories,
accompanied by practical strategies, the college has managed to reform the ways of modern
education.
</p>
<h4 id="blog">Blog</h4>
<div class="card-div" style="display: flex;">
<div class="card">
<img
src="https://www.cgc.edu.in/public/uploads/blogs/thumb_front/21d51948ae8fdc7a424e7febb8c0ce
52.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h3><b>Is Cybersecurity A Bankable Career
Choice?</b></h3>
<p>25-November-2022</p>
</div>
</div>
<div class="card">
<img
src="https://www.cgc.edu.in/public/uploads/blogs/thumb_front/343ae9ecea44f7bea9ac904d7a72e8
c9.jpg" alt="Avatar" style="width:100%">
<h3><b>How Does the World View Hospitality Industry
Post Covid?</b></h3>
</div>
</div>
<div class="card">
<img
src="https://www.cgc.edu.in/public/uploads/blogs/thumb_front/4850ec002f28ba2c8244a591f25274
18.jpg" alt="Avatar" style="width:100%">
<h3><b>B.Sc. Biotechnology: Is it a Remunerative Career
Choice in 2023?</b></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
nav.css
.sidenav {
height: 100vh;
background-color: #111;
overflow-x: hidden;
padding-top: 200px;
}
.sidenav a {
padding: 65px 8px 8px 110px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
OUTPUT:-
Experiment-9
Aim: Write a program to use iframe tag.
THEORY: -
The ”iframe” tag defines a rectangular region within the document in which the browser can
display a separate document, including scrollbars and borders. An inline frame is used to embed
another document within the current HTML document.
Syntax:
<iframe src="URL" title="description"></iframe
CODE:
Iframe.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="welcome.html" width="50%" height="600px"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!
1d13724.475594703914!2d76.6648404!3d30.6869306!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x390fef154b91a85b%3A0x4d8b9df97e986631!2sChandigarh%20Group%20of%20Colleges
%20(CGC)%20-%20Landran!5e0!3m2!1sen!2sin!4v1678336559637!5m2!1sen!2sin"
width="49%" height="600"></iframe>
</body>
</html>
welcome.html
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background: rgba(172, 233, 229, 0.5);">
<h1><center>Welcome to CGC</center></h1>
<img src="https://www.cgc.edu.in/public/images/home/about.webp" width="100%">
<h2><center>Chandigarh Group of Colleges, Landran</center></h2>
</body>
</html>
OUTPUT:-
Experiment-10
Aim: Program to display a message box in Java script..
THEORY: -
There are four ways to display text in the browser using JavaScript:
1.Using the document. write() method to write inside the tag.
2.Using the document. querySelector() method to replace the content of a specific element.
3.Using the console. ...
Using the alert() method to write text output to the popup box.
Code:-
<html>
<head>
<title>Jatin Bajaj 2102497</title></head>
<body>
<script>
window.alert("Chandigarh Engineering College. If you are a student of this college then press ok.");
</script>
</body>
</html>
Output:-
Experiment-11
Aim: - Write a program in which when page loads it asks user to enter a number and then display
the table of that number up to 20.
Software Requirements: Notepad, Windows OS, Laptop.
Code:-
<html>
<head>
<script type="text/javascript"> value=window.prompt("Enter a value"); document.write("<table
border='2'>"); for(i=0;i<=20;i++){ document.write("<tr><td>"); document.write(value);
document.write(" X "); document.write(i); document.write("</td><td>"); document.write(value*i);
document.write("</td></tr>");
} document.write("</table>");
</script>
</head>
<body></body>
</html>
Output:-
Experiment-12
Aim: - Write a program in javascript to validate username
Code:-
<!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">
</head>
<body>
<h1>User Login</h1>
<form name="login" onsubmit="return validate()">
<table>
<tr>
<td>User</td>
<td><input type="text" name="user"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="pass"></td>
</tr>
</table>
<input type="submit" name="SUBMIT">
</form>
<script>
function validate()
{
var check_user = document.login.user.value;
var user_validate = check_user.indexOf("_");
if( check_user.length <= 0 )
{
alert("Enter Username");
return false;
}
if( user_validate < 1 )

{
alert("Invalid Username");
return false;
}
}
</script>
</body>
</html>
Output:-
Experiment-13
Aim: - Write a program in javascript to use cookies
Theory: - Cookies are data, stored in small text files, on your computer.When a web server has sent
a web page to a browser, the connection is shut down, and the server forgets everything about the
user. Cookies were invented to solve the problem "how to remember information about the user":
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Jatin 2102497</title>
</head>
<body>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie('username')">
<script>
function setCookie()
{
var d = new Date();
d.setTime(d.getTime() + (1 * 24 * 60 * 60 *
1000));
var expires = "expires=";
document.cookie = "username=Jatin Bajaj" + "; " +
expires + d;
}
function getCookie(name){
var pattern = RegExp(name + "=.[^;]*")
var matched = document.cookie.match(pattern)
if(matched){
var cookie = matched[0].split('=')
alert("Cookie value=" + cookie[1]);
}
else
{
alert("Cookie not available");
}
return false
}
</script>
</body>
</html>
Output:-
Experiment-14
Aim: - Write a program in PHP to insert and read data from database.
Software Requirements: Notepad, Windows OS, Laptop, Wamp Server.
Code:-
<?php
// database credentials
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "cec_2102497";
// connect to database
$conn = mysqli_connect($servername, $username, $password, $dbname);
// check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// insert data into database

$sql = "INSERT INTO data (id, name, email) VALUES ('1', 'Jatin Bajaj', 'jatin@yahoo.com')";
if (mysqli_query($conn, $sql)) {
echo "Data inserted successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<?php
// retrieve data from database

$sql = "SELECT * FROM data";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "id: " . $row["id"]. " - Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 results";
}
// close database connection

mysqli_close($conn);
?>
</body>
</html>
Output:-
Experiment-15
Aim: - Write a program to demonstrate use of AJAX.
Software Requirements: Notepad, Windows OS, Laptop, Wamp Server.
Code:-
<?php
header('Access-Control-Allow-Origin: *');
?>
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>Ajax Example</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Ajax_info.txt
<!DOCTYPE html>
<html>
<body>
<h1>Ajax Program</h1>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>
</body>
</html>
Output:-

Experiment-2: AIM: To Use Anchor Tag and Hyperlink Different Pages. Theory

Uploaded by

Document Informationclick to expand document information

Document Informationclick to expand document information

Copyright:

Available Formats

Experiment-2: AIM: To Use Anchor Tag and Hyperlink Different Pages. Theory

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experiment-2: AIM: To Use Anchor Tag and Hyperlink Different Pages. Theory

Uploaded by

Copyright:

Available Formats

Department of Information Technology

AIM: To use anchor tag and hyperlink different pages.

S/W Requirments: Web Browser (Internet Explorer, Mozilla), Notepad++

File Directory Structure:

Aim: Write a program to create unordered and ordered list

There can be 4 types of bulleted list:

<meta name="viewport" content="width=device-width, initial-scale=1">

Aim: Write a program to demonstrate the different formatting tags in HTML.

OBJECTIVE: To implement different formatting tags on text, performed on Web Browser.

<title>2102497 Jatin Bajaj</title>

OBJECTIVE: To implement different formatting tags on text, performed on Web Browser.

S/W REQUIREMENTS: Web Browser (Internet Explorer, Mozilla), Notepad

H/W REQUIREMENTS: Intel P-IV, 256 MB Ram.

Aim: Write a program to demonstrate internal Linking in HTML.

OBJECTIVE: To implement different formatting tags on text, performed on Web Browser.

S/W REQUIREMENTS: Web Browser (Internet Explorer, Mozilla), Notepad

H/W REQUIREMENTS: Intel P-IV, 256 MB Ram.

They pass authority from one page to another (search optimization)

They guide visitors to high-value, relevant content (usability / UX)

They prompt visitors to act, as calls-to-action (conversion optimization)

Aim: Write a program to demonstrate use of Frameset tag.

<h3><font color="red">The Chandigarh Group of Colleges are the educational

Aim: Write a program to demonstrate inline, internal and external CSS.

S/W REQUIREMENTS: Web Browser (Internet Explorer, Mozilla), Notepad

H/W REQUIREMENTS: Intel P-IV, 256 MB Ram.

Initially, Engineering was the flagship program at CGC,

Aim: Write a program to use iframe tag.

S/W REQUIREMENTS: Web Browser (Internet Explorer, Mozilla), Notepad

H/W REQUIREMENTS: Intel P-IV, 256 MB Ram.

Aim: Program to display a message box in Java script..

S/W REQUIREMENTS: Web Browser (Internet Explorer, Mozilla), Notepad

H/W REQUIREMENTS: Intel P-IV, 256 MB Ram.

Software Requirements: Notepad, Windows OS, Laptop.

Aim: - Write a program in javascript to validate username

Software Requirements: Notepad, Windows OS, Laptop.

if( user_validate < 1 )

Aim: - Write a program in javascript to use cookies

Software Requirements: Notepad, Windows OS, Laptop.

Software Requirements: Notepad, Windows OS, Laptop, Wamp Server.

// insert data into database

// retrieve data from database

// close database connection

Aim: - Write a program to demonstrate use of AJAX.

Software Requirements: Notepad, Windows OS, Laptop, Wamp Server.

You might also like