Post on 23-Aug-2021
transcript
WEB TECHNOLOGY LABORATORY WITH MINI
PROJECT (15CSL77)
[As per Choice Based Credit System (CBCS) scheme ]
Prepared By
Chitra C & Ramya S
Assistant Professor
Maharaja Institute Of Technology Mysore
Belawadi, Srirangapatna Taluk, Mandya-571477
Department of Information Science and Engineering
2019-2020
MANUAL OF THE SUBJECT TAUGHT FOR THE YEAR 2019-2020 (ODD)
Vision of the Institute
To be recognized as a premier technical and management institution promoting extensive education
fostering research, innovation and entrepreneurial attitude.
Mission of the Institute
To empower students with indispensable knowledge through dedicated teaching and collaborative
learning.
To advance extensive research in science, engineering and management disciplines.
To facilitate entrepreneurial skills through effective institute industry collaboration and interaction
with alumni.
To instill the need to uphold ethics in every aspect.
To mould holistic individuals capable of contributing to the advancement of the society.
Vision of the department
To be recognized as the best center for technical education and research in the field of information science
and engineering.
Mission of the department
To facilitate adequate transformation in students through a proficient teaching learning process with
the guidance of mentors and all-inclusive professional activities.
To infuse students with professional, ethical and leadership attributes through industry collaboration
and alumni affiliation.
To enhance research and entrepreneurship in associated domains and to facilitate real time problem
solving.
Program Educational Objectives:
Proficiency in being an IT professional, capable of providing genuine solutions to information
science problems.
Capable of using basic concepts and skills of science and IT disciplines to pursue greater
competencies through higher education.
MAHARAJA INSTITUTE OF TECHNOLOGY MYSORE
BELAWADI, SRIRANGAPATNA TALUK, MANDYA-571477
DEPARTMENT OF INFORMATION SCIENCE AND ENGINEERING
Exhibit relevant professional skills and learned involvement to match the requirements of
technological trends.
Program Outcome
PO1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,
and an engineering specialization to the solution of complex engineering problems.
PO2. Problem analysis: Identify, formulate, research literature, and analyze complex engineering problems
reaching substantiated conclusions using first principles of mathematics, natural sciences, and engineering
sciences.
PO3. Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the public
health and safety, and the cultural, societal, and environmental considerations.
PO4. Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.
PO5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations.
PO6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice.
PO7. Environment and sustainability: Understand the impact of the professional engineering solutions in
societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.
PO8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of
the engineering practice.
PO9. Individual and team work: Function effectively as an individual, and as a member or leader in diverse
teams, and in multidisciplinary settings.
PO10. Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend and write effective reports and
design documentation, make effective presentations, and give and receive clear instructions.
PO11. Project management and finance: Demonstrate knowledge and understanding of the engineering and
management principles and apply these to one’s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments.
PO12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
Program Specific Outcome:
Student will be able
PSO1: Apply the principles of theoretical foundations, data Organizations, networking concepts
and data analytical methods in the evolving technologies.
PSO2:Analyse proficient algorithms to develop software and hardware competence in both
professional and industrial areas
Course Syllabus
FACULTY NAME : CHITRA C & RAMYA S
SUBJECT: WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
SUBJECT CODE: 15CSL77 ACADEMIC YEAR 2019-20(ODD)
NUMBER OF LECTURE HOURS/WEEK 03 TOTAL NUMBER OF LECTURE HOURS 40
Course Overview
The basic idea of web technology was to emerge the evolving technologies of computers, data networks
and hypertext into powerful and easy to use global information system. Tim burners-Lee, a British scientist,
invented the world wide web (www) in 1989 at CERN. The Web was originally developed to meet the
demand for automated information sharing between scientists in universities and institutes around the world,
this makes the www to emerge. Web Programming is a system of interlinked documents that are accessed
via internet. With a web browser, one can view web pages that may contain text, images, and video and
navigate between them via links. HTML is the programming language used to develop home pages on the
Internet.
This course covers the most current tools available for designing (HTML, XHTML and XML)
documents to posting pages on the World Wide Web. This course makes the students to learn client-side
Scripting that is JavaScript document for updating dynamic functionalities and it also includes Server side
scripting language for processing data at the server using PHP. Though mini-project student can develop an
application to communicate client and server using various Scripting languages.
On completion of Lab course, a student will be familiar with client server architecture and able to
develop a web application using JavaScript and Server technologies to create fully functional website/web
application.
Course Objectives
Design and develop static and dynamic web pages.
Familiarize with Client-Side Programming, Server-Side Programming & Active server Pages.
Learn Database Connectivity to web applications.
MAHARAJA INSTITUTE OF TECHNOLOGY MYSORE
BELAWADI, SRIRANGAPATNA TALUK, MANDYA-571477
DEPARTMENT OF INFORMATION SCIENCE AND ENGINEERING
Laboratory Experiments
1. Write a JavaScript to design a simple calculator to perform the following operations: sum, product,
difference and quotient.
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs HTML
text that displays the resulting values in an HTML table format.
3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font
size in the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-
SHRINKING” in BLUE color. Then the font size decreases to 5pt.
4. Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for the
following problems:
a. Parameter: A string
b. Output: The position in the string of the left-most vowel
c. Parameter: A number
d. Output: The number with its digits in the reverse order
5. Design an XML document to store information about a student in an engineering college affiliated to
VTU. The information must include USN, Name, and Name of the College, Branch, Year of Joining, and
email id. Make up sample data for 3students. Create a CSS style sheet and use it to display the document.
6. Write a PHP program to keep track of the number of visitors visiting the web page and to display this
count of visitors, with proper headings.
7. Write a PHP program to display a digital clock which displays the current time of the server.
8. Write the PHP programs to do the following:
a. Implement simple calculator operations.
b. Find the transpose of a matrix.
c. Multiplication of two matrices.
d. Addition of two matrices.
9. Write a PHP program named states.py that declares a variable state with value "Mississippi Alabama
Texas Massachusetts Kansas". write a PHP program that does the following:
a. Search for a word in variable states that ends in xas. Store this word in element of a list named statesList.
b. Search for a word in states that begins with k and ends in s. Perform a case insensitive comparison. [Note:
Passing re.Ias a second parameter to method compile performs a case-insensitive comparison.] Store this
word in element1 of statesList.
c. Search for a word in states that begins with M and ends in s. Store this word in element 2 of the list.
d. Search for a word in states that ends in a. Store this word in element 3 of the list.
10. Write a PHP program to sort the student records which are stored in the database using selection sort.
APPROVED BY
PROF CHITRA C PROF. RAMYA S CRITERIA 3 HOD
Study Experiment / Project:
Develop a web application project using the languages and concepts learnt in the theory and exercises listed
in part A with a good look and feel effects. You can use any web technologies and frameworks and
databases.
Note:
1. In the examination each student picks one question from part A.
2. A team of two or three students must develop the mini project. However during the examination, each
student must demonstrate the project individually.
3. The team must submit a brief project report (15-20 pages) that must include the
following
a. Introduction
b. Requirement Analysis
c. Software Requirement Specification
d. Analysis and Design
e. Implementation
f. Testing
MAHARAJA INSTITUTE OF TECHNOLOGY MYSORE BELAWADI, SRIRANGAPATNA TALUK, MANDYA-571477
Department of Information Science and Engineering
Faculty Name: Chitra C & Ramya S
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT Sub Code: 15CSL77 IA Marks: 20
Hours/week (L. T. P):1:0:2 Exam Hours: 3 hours Total Hours: 50 Exam Marks: 80
Semester: VII Section: A & B
Sl No Contents 1 General Lab Instructions
2 Do’s and Don’ts
3 Syllabus
4 Introduction of Web Programming Tools
5 How To Embed Php Into Html
6 How does web Work
7 Steps to execute Client Side Scripting Programs
8 Steps to execute Server Side Scripting Programs
9 Lab Set Programs (1 to 10)
10 Viva Questions
11 Viva Question with answer
1. General Lab Guidelines:
Conduct yourself in a responsible manner at all times in the laboratory. Intentional misconduct
will lead to the exclusion from the lab.
Do not wander around, or distract other students, or interfere with the laboratory experiments of
other students.
Read the handout and procedures before starting the experiments. Follow all written and verbal
instructions carefully. If you do not understand the procedures, ask the instructor or teaching
assistant.
Attendance in all the labs is mandatory, absence permitted only with prior permission from Class
teacher.
The workplace has to be tidy before, during and after the experiment.
Do not eat food, drink beverages or chew gum in the laboratory.
Every student should know the location and operating procedures of all Safety equipment
including First Aid Kit and Fire extinguisher.
2. DO’S and DON’T’s
DO’s:-
Uniform and ID card are must.
Records have to be submitted every week for evaluation.
Sign the log book when you enter/leave the laboratory.
After the lab session, shut down the computers.
Keep your belongings in designated area.
Report any problem in system (if any) to the person in-charge.
DONT’S:-
Do not insert metal objects such as clips, pins and needles into the computer casings(They may cause
fire) and should not attempt to repair, open, tamper or interfere with any of the computer, printing,
cabling, or other equipment in the laboratory.
Do not change the system settings and keyboard keys.
Do not upload, delete or alter any software/ system files on laboratory computers.
No additional material should be carried by the students during regular labs.
Do not open any irrelevant websites in labs.
Do not use a flash drive on lab computers without the consent of lab instructor.
Students are not allowed to work in Laboratory alone or without presence of the instructor/ teaching
assistant.
3. SYLLABUS
1. Write a JavaScript to design a simple calculator to perform the following operations: sum, product,
difference and quotient.
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs HTML
text that displays the resulting values in an HTML table format.
3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font
size in the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-
SHRINKING” in BLUE color. Then the font size decreases to 5pt.
4. Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for the
following problems:
a. Parameter: A string
b. Output: The position in the string of the left-most vowel
c. Parameter: A number
d. Output: The number with its digits in the reverse order
5. Design an XML document to store information about a student in an engineering college affiliated to
VTU. The information must include USN, Name, and Name of the College, Branch, Year of Joining, and
email id. Make up sample data for 3students. Create a CSS style sheet and use it to display the document.
6. Write a PHP program to keep track of the number of visitors visiting the web page and to display this
count of visitors, with proper headings.
7. Write a PHP program to display a digital clock which displays the current time of the server.
8. Write the PHP programs to do the following:
a. Implement simple calculator operations.
b. Find the transpose of a matrix.
c. Multiplication of two matrices.
d. Addition of two matrices.
9. Write a PHP program named states.py that declares a variable state with value "Mississippi Alabama
Texas Massachusetts Kansas". write a PHP program that does the following:
a. Search for a word in variable states that ends in xas. Store this word in element of a list named statesList.
b. Search for a word in states that begins with k and ends in s. Perform a case insensitive comparison. [Note:
Passing re.Ias a second parameter to method compile performs a case-insensitive comparison.] Store this
word in element1 of statesList.
c. Search for a word in states that begins with M and ends in s. Store this word in element 2 of the list.
d. Search for a word in states that ends in a. Store this word in element 3 of the list.
10. Write a PHP program to sort the student records which are stored in the database using selection sort.
Study Experiment / Project:
Develop a web application project using the languages and concepts learnt in the theory and exercises listed
in part A with a good look and feel effects. You can use any web technologies and frameworks and
databases.
Note:
1. In the examination each student picks one question from part A.
2. A team of two or three students must develop the mini project. However during the examination, each
student must demonstrate the project individually.
3. The team must submit a brief project report (15-20 pages) that must include the
following
a. Introduction
b. Requirement Analysis
c. Software Requirement Specification
d. Analysis and Design
e. Implementation
f. Testing
4. INTRODUCTION TO WEB PROGRAMMING TOOLS
This lab is intended to give the students a sound knowledge in the Web side programming. Before
going in to the details of the lab, the pre-requisites are the basic knowledge in HTML, XHTML, CSS, XML,
JavaScript, PHP and MySql. Let’s look at some of these topics in brief now.
Basics of HTML: -
Hyper Text Markup Language (HTML) is a markup language developed by the W3C people. This
can be used as an interface for working our programs. We submit all our requests in the HTML form. It is
basically a markup language which describes how the documents are to be formatted.
HTML has two basic entities, the “Tags” (Formatting commands) and the strings within the tags
called as the “Directives”. Most of the tags have the following syntax: - <something> that indicates the
beginning of the tag and a </something> that indicates the end of the tag.
NOTE:
Tags can either be in lower case or upper case, i.e. there is no difference between <html> and
<HTML>
The order in which parameters of the tag are given is not significant since each of these parameters is
named.
HTML Essentials
An HTML file should be written in the following format and should be saved with .html file
extension.
<html>
<head><title> New Page </title></head>
<body>
</body>
</html>
The “New Page” title comes on the top of the Browser Window.
Basic HTML Tags: -
To create a text box
<input type=text name=T1 size=20>
To create a Normal Button
<input type=button name=B4 value=GO>
To create a Submit Button
<input type=submit name=B1 size=20>
To create a Reset Button
<input type=reset name=T1 size=20>
To create a Radio Button
<input type=radio value=V1 checked name=R1>
To create a Check box
<input type=checkbox name=C1 value=ON >
To create a Form <form method=[GET/POST] action=[url]>
<input type=submit value=Submit name=B1>
<input type=reset value=Reset name="B2"></form>
To create a Text Area
<textarea rows=2 name=S1 cols=20></textarea>
To create a Drop down Menu <select size=1 name=D1></select>
To create a Hyper Link
<a href=http://localhost: 8080/a.htm>BACK </a>
To create a Marquee (The Marquee tag ensures that the text scrolls horizontally across the screen. It is
usually used by Advertisement sites to catch the user’s attention. Although they sound and look cool, it is
preferred to avoid using too much of these since they can be tiring and confusing to the users eye especially
if the scroll speed is set too high)
<marquee align=middle>Type your text here</marquee>
To give Background color
<body bgcolor=green>…</body>
(The basics colors can be given literally here. For a more elaborate set if colors, Hex code of the colors can
be given. Refer to the possible ranges of the Hex codes in a Text Book)
More Miscellaneous Tags: -
1) <h#>……..</h#> - where ‘#’ is a number ranging from 1-6. This is used to set the text size.
2) <pre> - Preformatted text, ensures that the text appears exactly the way it appears in the HTML code
thereby preserving the white spaces as well.
3) <br> - Inserts a “New line” character (similar to ‘\n’).
4) To Draw a Horizontal Line (Horizontal Ruler):
<hr size=4 width=”50 %”>
5) < b > - Bold, < I > - Italics
6) Tables:
<table>
<caption> Your Caption here </caption> [Optional Tag]
<tr>
<th> Row 1, Col 1 </th> [th implies Table Header]
<th> Row 2, Col 2 </th>
</tr>
<tr>
<td> Table Definition here </td>
<td> …………………….. </td>
</tr>
</table>
7) Comments:
< ! - - Your Comments here - - >
8) Background Images:
<body background = “pathname/abc.gif”>
…………………….
</body>
What is XHTML
XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
XHTML is a W3C Recommendation
XHTML 1.0 became a W3C Recommendation January 26, 2000.
XHTML is compatible with HTML 4.01. All browsers support XHTML.
Why XHTML?
Many pages on the internet contain "bad" HTML.
The following HTML code will work just fine if you view it in a browser (even if it does
NOT follow the HTML rules):
<html> <head> <title>This is bad HTML</title>
<body> <h1>Bad HTML
</body>
XML is a markup language where everything must be marked up correctly, which results in "well-formed"
documents. XML is designed to describe data, and HTML is designed to display data.
Today's market consists of different browser technologies, some browsers run on computers, and some
browsers run on mobile phones or other small devices. The last-mentioned do not have the resources or
power to interpret a "bad" markup language.
Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful
now and in the future - XHTML.
The Most Important Differences:
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.
This is wrong:
<ul> <li>Coffee</li>
<li>Tea <ul>
<li>Black tea</li>
<li>Green tea</li> </ul>
<li>Milk</li>
</ul>
This is correct:
<ul><li>Coffee</li>
<li>Tea <ul>
<li>Black tea</li>
<li>Green tea</li>
</ul> </li>
<li>Milk</li>
</ul>
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.
XHTML Elements Must Always Be Closed
Non-empty elements must have a closing tag.
This is wrong:
<p>This is a paragraph <p>This is another paragraph
This is correct:
<p>This is a paragraph</p> <p>This is another paragraph</p>
Empty Elements Must Also Be Closed
Empty elements must also be closed.
This is wrong:
A break: <br> A horizontal rule:
<hr> An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br /> A horizontal rule:
<hr /> An image: <img src="happy.gif" alt="Happy face" />
XHTML Elements Must Be In Lower Case
Tag names and attributes must be in lower case.
This is wrong:
<BODY> <P>This is a paragraph</P> </BODY>
This is correct:
<body> <p>This is a paragraph</p> </body>
XHTML Documents Must Have One Root Element
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and
correctly nested within their parent element. The basic document structure is:
<html> <head> ... </head>
<body> ... </body>
</html>
Some More XHTML Syntax Rules
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
The id attribute replaces the name attribute
The XHTML DTD defines mandatory elements
The id Attribute replaces The name Attribute
HTML 4.01 defines a name attribute for the elements applet, frame, iframe, and img. In XHTML the name
attribute is deprecated. Use id instead.
This is wrong:
<img src="picture.gif" name="pic1" />
This is correct:
<img src="picture.gif" id="pic1" />
Note: To interoperate with older browsers for a while, you should use both name and id, with identical
attribute values, like this:
<img src="picture.gif" id="pic1" name="pic1" />
IMPORTANT Compatibility Note:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/"
symbol.
The Lang Attribute
The lang attribute applies to almost every XHTML element. It specifies the language of the content within
an element.
If you use the lang attribute in an element, you must also add the xml:lang attribute, like this:
<div lang="no" xml:lang="no">Heia Norge!</div>
Mandatory XHTML Elements
All XHTML documents must have a DOCTYPE declaration. The html, head, title, and body elements must
be present.This is an XHTML document with a minimum of required tags:
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Title goes here</title> </head>
<body> </body>
</html>
Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML
element. You will learn more about the XHTML DOCTYPE in the next chapter.
Note: The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in
XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns attribute is
missing. This is because the namespace "xmlns=http://www.w3.org/1999/xhtml" is default, and will be
added to the <html> tag even if you do not include it.
XHTML DTD (Document Type Definitions)
An XHTML document consists of three main parts:
the DOCTYPE declaration
the <head> section
the <body> section
The basic document structure is:
<!DOCTYPE ...>
<html> <head> <title>... </title> </head>
<body> ... </body>
</html>
Note: The DOCTYPE declaration is always the first line in an XHTML document!
An XHTML Example
This is a simple (minimal) XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> <title>simple document</title> </head>
<body> <p>a simple paragraph</p>
</body>
</html>
The DOCTYPE declaration above defines the document type. The rest of the document looks like HTML.
Document Type Definitions (DTD)
A DTD specifies the syntax of a web page in SGML
DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular
type, including a set of elements and entity declarations
An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML
markup
There are three XHTML DTDs:
STRICT
TRANSITIONAL
FRAMESET
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. Use it together
with CSS.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use the transitional DOCTYPE when you want to still use HTML's presentational features.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Use the frameset DOCTYPE when you want to use HTML frames.
Empty Tags: <hr> , <br> and <img>
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />.
A general "find-and-replace" function was executed to swap the tags.
We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done
manually.
HTML and XHTML Quick Reference:
Tag name Attribute Description Example
Anchor
<a>..</a>
href="URI"
name="text"
used as a hypertext link
or a named fragment
within the document.
<a href="filename.html"> . . .
</a> <a
href="http://server/path/file.h
tml"> . . . </a>
Bold
<b> ..</b>
Only core tag
attributes
Renders the enclosed
text in a bold font.
Turn left onto <b>Blackstone
Blvd.</b>.
Blockquote
<blockquote> .
. .
</blockquote>
Only core tag
attributes
Indicates a long
quotation. Its content is
some number of
blocklevel elements,
such as paragraphs
<blockquote
cite="http://www.example.co
m">
<h1>Fascinating
Evidence</h1>
<p>This is the beginning of a
lengthy quoted passage (text
continues . . . ) </p>
</blockquote>
Body
<body> . . .
</body>
Background=”URI”
bgcolor="#rrggbb"
or "color name"
The body of a
document contains the
document’s content.
Br
<br/>
Only core tag
attributes
Inserts a line break in
the content
Maharaja Institute of
Technology<br / >
Mysore<br />
(Comments)
<!-- . . . -->
Not applicable Inserts notes or scripts
into the document that
are not displayed by
the browser
<!-- start secondary
navigation here -->
<ul> . . . (markup continues)
Div
<div> . . .
</div>
Only core tag
attributes
Denotes a generic
“division” within the
flow of the document.
<div id="summary">
<h1>In Closing</h1>
<p>We can summarize as
follows...</p>
</div>
dl Only core tag Indicates a definition <dl>
<dl> . . . </dl> attributes
list. Each item in a
definition list consists
of two parts: a term (dt)
and description (dd),
which can represent
terms and definitions or
other name-value pairs.
<dt><code>em</code></dt>
<dd>Indicates emphasized
text.</dd>
</dl>
Em
<em> . . .
</em>
Indicates emphasized
text.
This is <em>exactly</em>
what you've been looking for
Font
<font> . . .
</font>
color="#RRGGBB/
color name"
face="typeface"
size="value"
An outdated method
for affecting the style
(color, typeface, and
size) of the enclosed
text
<font face="serif" size="+1"
color="red">Obsolete.</font
>
Form
<form> . . .
</form>
action="URL"
Required.
method="get|post"
name="text"
Indicates an interactive
form that contains
controls for collecting
user input and other
page content
<form action="/cgi-
bin/guestbook.pl"
method="get">
<input type="submit" />
<input type="reset"> </p>
</form>
h1, h2, h3, h4,
h5, h6
<hn > . . . </hn
>
Only core tag
attributes
Specifies a heading that
briefly describes the
section it introduces.
There are six levels of
headings, from h1
(most important)
to h6 (least important).
h1>Story Title</h1>
<p>In the beginning . . . </p>
head
<head> . . .
</head>
id="text"
profile="URLs"
Defines the head
portion of the
document that contains
information about the
document
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD
HTML 4.01//EN"
“http://www.w3.org/TR/HT
ML4.01/strict.dtd">
<html>
<head>
<title>Document
Title</title>
<style type="text/css">h1
{color: #333;}</style>
</head>
</html>
hr
HTML: <hr>;
XHTML: <hr/>
or <hr />
Only core tag
attributes
Adds a horizontal rule
to the page that can be
used as a divider
between sections of
content. It is a block-
level element.
<p>These are notes from
Thursday.</p>
<hr>
<p>These are notes from
Friday.</p>
html
<html> . . .
</html>
id="text"
manifest="URL"
version="-
//W3C//DTD
HTML 4.01//EN"
xmlns="http://www.
w3.org/1999/xhtml"
This is the root element
of HTML and XHTML
documents, meaning
all other elements are
contained within it.
<html
xmlns="http://www.w3.org/1
999/xhtml" xml:lang="en"
lang="en">
<head>… </head>
<body>… </body>
</html>
I
<i> . . . </i>
Only core tag
attributes
Enclosed text is
displayed in italic.
The Western Black Widow
Spider, <i>Latrodectus
hesperus
</i>, is commonly found
img
HTML: <img>;
XHTML:
<img/> or <img
/>
align="bottom|left|
middle|right|top"
alt="text"
src="URL"
height="number"
width="number"
Places an image on the
page.
<p>Your ideal pet: <img
src="tiger.gif" alt="A
Tiger"></p>
input
HTML:
<input>;
XHTML:
<input/> or
<input />
accept="MIME
type"
align="bottom|left|
middle|right|top"
name="text"
src="URL"
size="number"
type="text|password
|checkbox|radio|sub
mit|reset|file|hidden|
image|button"
The input element is
used to create a variety
of form input controls.
<input type="button"
value="Push Me!">
li
<li> . . . </li>
type="format"
start="number"
value="number"
Defines an item in a
list. It is used within
the ol, ul, menu, and
dir list element
<ul>
<li>About</li>
<li>News</li>
</ul>
meta
HTML:
<meta>;
content="text"
name="text"
Provides additional
information about the
document. It should be
<meta name="copyright"
content="CIT gubbi">
XHTML:
<meta/> or
<meta />
placed within the head
of the document
ol
<ol> . . . </ol>
type="1|A|a|I|i"
Defines an ordered
(numbered) list that
consists of one or more
list
items (li).
<ol>
<li>Get out of bed</li>
<li>Take a shower</li>
</ol>
p
<p> . . . </p>
align="center|left|rig
ht"
Denotes a paragraph
<p> Paragraphs are the most
rudimentary elements of a
text document.</p>
pre
<pre> . . .
</pre>
width="number"
Delimits
“preformatted” text,
meaning that lines are
displayed exactly as
they are typed in,
honoring whitespace
such as multiple
character spaces and
line breaks.
<pre>
This is an example of text
with a lot of
Curious whitespace.
</pre>
script
<script> . . .
</script>
id="text"
src="URL"
type="content-type"
Places a script in the
document (usually
JavaScript for web
documents).
<script
type="text/javascript">
// <![CDATA[
. . . JavaScript code goes here
. . .
// ]]>
</script>
Table
<table> . . .
</table>
align="left|right|cent
er"
cellpadding="numb
er"
cellspacing="numbe
r"
border="number"
bgcolor="#rrggbb"
or "color name"
width="number" or
"percentage"
height="number" or
"percentage"
Indicates a table used
for displaying rows and
columns of data or
information.
<table width="70%"
cellpadding="10">
<tr> <td>cell 1</td><td>cell
2</td> </tr>
<tr> <td>cell 3</td><td>cell
4</td> </tr>
</table>
td <td> . . .
</td>
align="left|right|cent
er|justify|char"
bgcolor="#rrggbb"
or "color name"
colspan="number"
height="pixels" or
"percentage"
rowspan="number"
width="pixels" or
"percentage"
Defines a table data
cell
<table>
<tr> <td colspan="2">Cell
1</td> </tr>
<tr> <td>Cell
3</td><td>Cell 4</td> </tr>
</table >
tr
<tr> . . . </tr>
align="left|right|cent
er|justify|char"
bgcolor="#rrggbb"
or "color name"
valign="top|middle|
bottom|baseline"
Defines a row of cells
within a table
<table>
<tr> <td>cell 1</td><td>cell
2</td> </tr>
<tr> <td>cell 3</td><td>cell
4</td> </tr>
</table>
Cascading Style Sheet:
CSS stands for Cascading Style Sheets and describes how HTML elements are to be displayed on screen,
paper, or in other media. It saves a lot of work and can control the layout of multiple web pages all at once.
Three Levels of Style sheets: Internal Level style sheet applied for single element, Document level style
sheets for single document and External style sheets are stored in CSS files separately used to apply for
more than a single document.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
Styles solved a big problem
The original HTML was never intended to contain tags for formatting a document. HTML tags were
intended to define the content of a document, like:
<p>This is a paragraph.</p>
<h1>This is a heading</h1>
When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare
for web developers. Development of large web sites where fonts and color information had to be added to
every single Web page, became a long, expensive and unduly painful process.
To solve this problem, the World Wide Web Consortium (W3C) - responsible for standardizing HTML -
created CSS in addition to HTML 4.0.
With HTML 4.0, all formatting can be removed from the HTML document and stored in a separate CSS file.
All browsers support CSS today.
Styles save a lot of work
Styles sheets define HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance
and layout of all the pages in a Web site, just by editing one single CSS document!
Multiple styles will cascade into one
Style sheets allow style information to be specified in many ways.
Styles can be specified:
inside an HTML element
inside the head section of an HTML page
in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order - What style will be used when there is more than one style specified for an HTML
element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by
the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a
style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external
style sheet will override the internal style sheet!
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property:value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to
change, and each property can take a value. The property and value are separated by a colon, and surrounded
by curly braces:
body {color:black}
Note: If the value is multiple words, put quotes around the value:
p {font-family:"sans serif"}
To make the style definitions more readable, you can describe one property on each line, like this:
P { text-align:center; color:black; font-family:arial }
Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all
the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6 { color:green }
The class Selector
With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and
one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align:right} p.center {text-align:center}
You have to use the class attribute in your HTML document:
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
Note: To apply more than one class per given element, the syntax is:
<p class="center bold">This is a paragraph.</p>
The paragraph above will be styled by the class "center" AND the class "bold".
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that
have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align:center}
In the code below both the h1 element and the p element have class="center". This means that both elements
will follow the rules in the ".center" selector:
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
Add Styles to Elements with Particular Attributes
You can also apply styles to HTML elements with particular attributes.
The style rule below will match all input elements that have a type attribute with a value of "text":
input[type="text"] {background-color:blue}
The id Selector
You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
The style rule below will match the element that has an id attribute with a value of "green":
#green {color:green}
The style rule below will match the p element that has an id with a value of "para1":
p#para1 { text-align:center; color:red }
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. A
comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p { text-align:center; /*This is another comment*/
color:black; font-family:arial
How to Insert a Style Sheet
When a browser reads a style sheet, it will format the document according to it. There are three ways of
inserting a style sheet:
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet using
the <link> tag. The <link> tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
The browser will read the style definitions from the file mystyle.css, and format the document according to
it.
An external style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna} p {margin-left:20px} body {background image:url("images/back40.gif")}
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-
left:20px") will only work in IE6, but it will not work in Firefox or Opera.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles
in the head section by using the <style> tag, like this:
<head> <style type="text/css"
hr {color:sienna} p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style> </head>
The browser will now read the style definitions, and format the document according to it.
Note: A browser normally ignores unknown tags. This means that an old browser that does not support
styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is
possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:
<head><style type="text/css">
<!-- hr {color:sienna} p {margin-left:20px}
body {background-image:url("images/back40.gif")} -->
</style> </head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this
method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS
property. The example shows how to change the color and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited
from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3 { color:red; text-align:left; font-size:8pt }
And an internal style sheet has these properties for the h3 selector:
h3 { text-align:right; font-size:20pt }
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red; text-align:right; font-size:20pt
Basic of XML:
XML stands for eXtensible Markup Language and was designed to store and transport data. XML was
designed to be both human- and machine-readable.
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Basics of JavaScript:
What is JavaScript?
JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
Everyone can use JavaScript without purchasing a license
Are Java and JavaScript the same?
NO!
Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in
the same category as C and C++.
What can a JavaScript do?
JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can
put small "snippets" of code into their HTML pages
JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
JavaScript can react to events - A JavaScript can be set to execute when something happens, like
when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and change the content of
an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form data before it
is submitted to a server. This saves the server from extra processing
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the
visitor's browser, and - depending on the browser - load another page specifically designed for that
browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve
information on the visitor's computer
The Real Name is ECMAScript
JavaScript's official name is ECMAScript. ECMAScript is developed and maintained by the ECMA
organization. ECMA-262 is the official JavaScript standard. The language was invented by Brendan Eich at
Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.
The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA
General Assembly in June 1997.
The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.
The development of the standard is still in progress.
The HTML <script> tag is used to insert a JavaScript into an HTML page.
Put a JavaScript into an HTML page
The example below shows how to use JavaSript to write text on a web page:
<html> <body> <script type="text/javascript"> ... </script> </body> </html>
The example below shows how to add HTML tags to the JavaScript:
<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>"); </script>
</body> </html>
Example Explained
To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the type
attribute to define the scripting language.
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
<html> <body> <script type="text/javascript"> ... </script>
</body> </html>
The document.write command is a standard JavaScript command for writing output to a page.
By entering the document.write command between the <script> and </script> tags, the browser will
recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello
World! to the page:
<html> <body> <script type="text/javascript">
document.write("Hello World!"); </script> </body> </html>
Note: If we had not entered the <script> tag, the browser would have treated the document.write("Hello
World!") command as pure text, and just write the entire line on the page.
How to Handle Simple Browsers
Browsers that do not support JavaScript, will display JavaScript as page content.
To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be
used to "hide" the JavaScript.
Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after
the last JavaScript statement, like this:
<html> <body> <script type="text/javascript"> <!-- document.write("Hello World!"); //--> </script>
</body> </html>
The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents
JavaScript from executing the --> tag.
JavaScripts in the body section will be executed WHILE the page loads.
JavaScripts in the head section will be executed when CALLED.
Where to Put the JavaScript
JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always
what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers
an event
Scripts in <head>
Scripts to be executed when they are called, or when an event is triggered, go in the head section.
If you place a script in the head section, you will ensure that the script is loaded before anyone uses it.
<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with
the onload event");</script> </head> <body onload="message()"> </body> </html>
Scripts in <body>
Scripts to be executed when the page loads go in the body section.
If you place a script in the body section, it generates the content of a page.
<html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written
by JavaScript"); </script> </body> </html>
Scripts in <head> and <body>
You can place an unlimited number of scripts in your document, so you can have scripts in both the body
and the head section.
<html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript">
.... </script> </body>
Using an External JavaScript
If you want to run the same JavaScript on several pages, without having to write the same script on every
page, you can write a JavaScript in an external file.
Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script> tag!
To use the external script, point to the .js file in the "src" attribute of the <script> tag:
<html> <head> <script type="text/javascript" src="xxx.js"></script></head> <body> </body> </html>
Note: Remember to place the script exactly where you normally would write the script!
JavaScript is a sequence of statements to be executed by the browser.
JavaScript is Case Sensitive
Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write
JavaScript statements, create or call variables, objects and functions.
JavaScript Statements
A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what
to do.
This JavaScript statement tells the browser to write "Hello Dolly" to the web page:
document.write("Hello Dolly");
It is normal to add a semicolon at the end of each executable statement. Most people think this is a good
programming practice, and most often you will see this in JavaScript examples on the web.
The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret
the end of the line as the end of the statement. Because of this you will often see examples without the
semicolon at the end.
Note: Using semicolons makes it possible to write multiple statements on one line.
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will write a heading and two paragraphs to a web page:
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript Blocks
JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and ends
with a right curly bracket }. The purpose of a block is to make the sequence of statements execute together.
This example will write a heading and two paragraphs to a web page:
<script type="text/javascript">
{ document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>"); }
</script>
The example above is not very useful. It just demonstrates the use of a block. Normally a block is used to
group statements together in a function or in a condition (where a group of statements should be executed if
a condition is met).
You will learn more about functions and conditions in later chapters.
About PHP:
PHP is a server-side scripting language. The concept of php is very similar to the JavaScipts or
VBScipts. PHP server-side scripting language is similar to JavaScript in many ways, as they both allow you
to embed little programs (scripts) into the HTML of a Web page.
What is PHP?
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose
scripting language that is especially suited for web development and can be embedded into HTML.
Nice, but what does that mean? An example:
Example #1 An introductory example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Example</title> </head>
<body> <?php echo "Hi, I'm a PHP script!"; ?>
</body>
</html>
Instead of lots of commands to output HTML (as seen in C or Perl), PHP pages contain HTML with
embedded code that does "something" (in this case, output "Hi, I'm a PHP script!"). The PHP code is
enclosed in special start and end processing instructions <?php and ?> that allow you to jump into and out of
"PHP mode."
What distinguishes PHP from something like client-side JavaScript is that the code is executed on the server,
generating HTML which is then sent to the client. The client would receive the results of running that script,
but would not know what the underlying code was. You can even configure your web server to process all
your HTML files with PHP, and then there's really no way that users can tell what you have up your sleeve.
The best things in using PHP are that it is extremely simple for a newcomer, but offers many advanced
features for a professional programmer. Don't be afraid reading the long list of PHP's features. You can jump
in, in a short time, and start writing simple scripts in a few hours.
What can PHP do?
Anything. PHP is mainly focused on server-side scripting, so you can do anything any other CGI program
can do, such as collect form data, generate dynamic page content, or send and receive cookies. But PHP can
do much more.
There are three main areas where PHP scripts are used.
▪ Server-side scripting. This is the most traditional and main target field for PHP. You need three things to
make this work. The PHP parser (CGI or server module), a web server and a web browser. You need to run
the web server, with a connected PHP installation. You can access the PHP program output with a web
browser, viewing the PHP page through the server. All these can run on your home machine if you are just
experimenting with PHP programming. See the installation instructions section for more information.
▪ Command line scripting. You can make a PHP script to run it without any server or browser. You only
need the PHP parser to use it this way. This type of usage is ideal for scripts regularly executed using cron
(on *nix or Linux) or Task Scheduler (on Windows). These scripts can also be used for simple text
processing tasks. See the section about Command line usage of PHP for more information.
▪ Writing desktop applications. PHP is probably not the very best language to create a desktop application
with a graphical user interface, but if you know PHP very well, and would like to use some advanced PHP
features in your client-side applications you can also use PHP-GTK to write such programs. You also have
the ability to write cross-platform applications this way.
PHP can be used on all major operating systems, including Linux, many Unix variants (including HP-UX,
Solaris and OpenBSD), Microsoft Windows, Mac OS X, RISC OS, and probably others. PHP has also
support for most of the web servers today. This includes Apache, Microsoft Internet Information Server,
Personal Web Server, Netscape and iPlanet servers, Oreilly Website Pro server, Caudium, Xitami,
OmniHTTPd, and many others. For the majority of the servers, PHP has a module, for the others supporting
the CGI standard, PHP can work as a CGI processor.
The key difference between JavaScript and PHP:
The key difference between JavaScript and PHP is that, while the Web browser interprets JavaScript
once the Web page containing the script has been downloaded, server-side scripting languages like PHP are
interpreted by the Web server before the page is even sent to the browser. Once interpreted, the PHP code is
replaced in the Web page by the results of the script, so all the browser sees is a standard HTML file. The
script processed entirely by the server. Thus the designation: server-side scripting language.
Basics of MySQL: -
MySQL is an Open source Standard Query Language (SQL) database that is fast, reliable, easy to use and
suitable for applications of any size. MySQL can be integrated into Perl programs by using the Perl DBI
(Database Independent Interface) module. DBI is an API that allows Perl to connect and query a number of
SQL Databases such as MYSQL, Oracle, Sybase etc.
For some of the programs in the Lab course, the MySQL database is to be used. For that, the MySQL Server
is to be started. The following steps are to be performed in the same sequence on the Linux shell to start the
server and create the database along with the table.
To Start MySQL Server:
# mysql
mysql> create database ise;
mysql> show databases;
mysql> use ise;
mysql> create table student (
name varchar(25),
age int );
mysql> insert into employee values (“e1”,21);
mysql> insert into employee values (“e2”,22);
mysql> exit;
#.....(The MySQL server is now started and a database along with a table called “employee” is ready for
use).
5. HOW TO EMBED PHP INTO HTML:
Let’s look at the example today.php shown below.
<html>
<head><title>Today's date</title></head>
<body>
<p>Today's date (according to this web server) is
<?php
Echo( date("l, f ds y.") );
?>
</body></html>
The above program shows the PHP code embeded in the HTML. Lines between
<?php and ?> indicates the php code.
1. <?php means “begin php code”.
2. ?> means “end php code”.
The Web server is asked to interpret everything between these two delimiters
(<?php and ?>) and convert it to regular HTML code before sending the Web page to a
browser that requests it. The browser is presented with something like this:
<html><head><title>Today's date</title></head>
<body><p>today's date (according to this web server) is
Wednesday, june 7th 2000.</p>
</body></html>
Apache Http Server:
The web server we are using here is Apache Http Server. It is freely downloadable from the site
www.apache.org. Once you have downloaded the installer, double click on that and install it in to your
start to start your server. Then open an Internet explorer and type http://localhost:80/. The port number 80 is
optional in the URL. If you have successfully installed the server then you will get a screen shown below:
6. HOW DOES THE WEB WORK?
The Web is usually accessed through a browser. When the user types in a URL say,
www.mitmysore.org in the Address Bar of the browser, the browser makes a socket (Network) connection to
the server www.mitmysore.org. This name is mapped to an IP address which is of the form 1.2.3.4 by
making use of a DNS Server. The browser connects to this server using a logical port 80, the port that the
server OS opens for internet connections. This port is standardized.
Based on the client request, the server delivers information. The type of data that the server sends back
to the client could be a simple plain text (HTML), images, Java Applets (More about Applets later!) etc. this
data can be obtained and delivered in three ways.
Serving Static Data – The server does not do any kind of the processing. It merely obtains the data
present on its local hard disk and sends it back to the client.
Serving Dynamic Data – The Server does some processing in this case like executing a program and
then outputs the result of the program back to the client as a response.
Serving Content with Embedded HTML – Here, an executable code is present with the HTML file.
It’s not quite static or dynamic.
The Client: -
The Server: -
Figure : Working of Web
Browser
Disk
abcd
Hyper links to
heythere.com
Web Server
W
The Internet
TCP Connection
7. STEPS TO EXECUTE CLIENT SIDE (HTML, XHTML AND
XML)PROGRAMS :
Open Notepad and edit the program.
Save the program under the extension “,html” for HTML and XHTML program.
For XML program store the program under the extension“.xml”.
Style sheets are applied for documents the store it separately under the extension “,css” for
Cascading Style sheets and “.xsl” for Extensible Transform Style sheet Language.
For executing the program just double click on the program where it is stored.
8. STEPS TO EXECUTE SERVER SIDE (PERL CGI AND PHP)PROGRAMS
Login as root & Open the terminal
Change the directory cd /var/www/html
For php programs save the files in .php extension vi filename.php
Open the Mozilla Web browser and type http://localhost/filename.html
The output of the program will be displayed.
9. LAB SET PROGRAMS
1. Write a JavaScript to design a simple calculator to perform the following operations: sum,
product, difference and quotient.
Aim:
To Write a JavaScript to design a simple calculator
Algorithm/Procedure: 1. Create a webpage with the name program1.html.
2. Create table for Calculator using Html code.
3. Create html form and input field for each entry.
PROGRAM:
<!DOCTYPE HTML> <html>
<head>
<style>
table,th
{
border: 2px solid black;
width: 33%;
text-align: center;
border-spacing:10pt;
background-color: orange;
border-collapse:separate;
}
td{ padding:10pt;}
table { margin: auto; }
input { text-align:right; }
</style>
<script type="text/javascript">
function calc(clicked_id)
{
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
alert("ENTER VALID NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-val2;
else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
}
</script>
</head>
<body bgcolor="pink">
<form method="GET" action="">
<label><center><h1>SIMPLE CALCULATOR</h1></center></label><br/>
<fieldset>
<legend>Arithmetic Opration</legend>
<center><table>
<tr><td>Enter value1 :</td><td><input type="text" id="value1" value="0"/></td></tr>
<tr><td>Enter value2 :</td><td><input type="text" id="value2" value="0"/> </td></tr>
<tr><td><input type="button" value="Addition" id = "add" onclick="calc(this.id)"/></td>
<td><input type="button" value="Subtraction" id = "sub" onclick="calc(this.id)"/></td></tr>
<tr><td><input type="button" value="Multiplication" id = "mul" onclick="calc(this.id)"/></td>
<td><input type="button" value="Division" id ="div" onclick="calc(this.id)"/></td></tr>
<tr><td>Answer:</td><td> <input type="text" id="answer" value=""/></td>
<td colspan="2"><input type="reset" value="CLEAR ALL"/></td> </tr>
</table> </center>
</fieldset>
</form>
</body>
</html>
OUTPUT:
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and
outputs HTML text that displays the resulting values in an HTML table format.
Aim:
To Write a JavaScript to Calculate the Squares and Cubes of numbers.
Algorithm/Procedure:
1. Create a webpage with the name program2.html
2. Create table for displaying squares and cubes using Html code.
3. Create Java script to calculate the squares and Cubes for numbers.
program2.html
<!DOCTYPE HTML> <html>
<head>
<style> table,tr, td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse; background-color:lightblue;
}
table { margin: auto; }
</style>
<script>
document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10 WITH THEIR SQUARES
AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{ document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n + "</td></tr>" ) ;
}
document.write( "</table>" ) ;
</script>
</head>
</html>
OUTPUT:
3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in the
interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-SHRINKING”
in BLUE color. Then the font size decreases to 5pt.
Aim:
To write a JavaScript: Text-Growing and Text Shrinking
Program3.html
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 1000);
var fs = 5;
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'TEXT GROWING'; ids.setAttribute('style', "font-size: " + fs + "px; color: red"); fs += 5;
if(fs >= 50 ){
clearInterval(var1);
var2 = setInterval(deTimer, 1000);
}
}
function deTimer() {
fs -= 5;
ids.innerHTML = 'TEXT SHRINKING'; ids.setAttribute('style', "font-size: " + fs + "px; color: blue"); if(fs === 5 ){
clearInterval(var2);
}
}
</script>
</body>
</html>
OUTPUT:
4. Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for the following
problems:
a. Parameter: A string
b. Output: The position in the string of the left-most vowel
c. Parameter: A number
d. Output: The number with its digits in the reverse order
Aim:
To write a JavaScript : position in the string of the left-most vowel and number with its digits in the reverse
order
Program 4.html <!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
var str = prompt("Enter the Input","");
if(!(isNaN(str)))
{
var num,rev=0,remainder;
num = parseInt(str);
while(num!=0) {
remainder = num%10;
num = parseInt(num/10);
rev = rev * 10 + remainder;
}
alert("Reverse of "+str+" is "+rev);
}
else
{ str = str.toUpperCase();
for(var i = 0; i < str.length; i++) {
var chr = str.charAt(i);
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}
if( i < str.length )
alert("The position of the left most vowel is "+(i+1));
else
alert("No vowel found in the entered string");
}
</script>
</body> </html>
OUTPUT:
5. Design an XML document to store information about a student in an engineering college affiliated to
VTU. The information must include USN, Name, and Name of the College, Branch, Year of Joining,
and email id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the
document.
Aim:
To design a XML document to store information about a student.
Program5.xml
<?xml-stylesheet type="text/css" href="pg5.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN: 1ME15CS001</USN>
<name>NAME: SANVI</name>
<college>COLLEGE : MITM</college>
<branch>BRANCH:Computer Science and Engineering</branch>
<year>YEAR:2015</year>
<e-mail>E-Mail:sanvi@gmail.com</e-mail>
</student>
<student>
<USN>USN: 1ME15IS002</USN>
<name>NAME: MANORANJAN</name>
<college>COLLEGE : MITM</college>
<branch>BRANCH: Information Science and Engineering</branch>
<year>YEAR:2015</year>
<e-mail>E-Mail:manoranjan@gmail.com</e-mail>
</student>
<student>
<USN>USN: 1ME13EC003</USN>
<name>NAME: CHANDANA</name>
<college>COLLEGE :MITM</college>
<branch>BRANCH: Electronics and Communication Engineering</branch>
<year>YEAR:2013</year>
<e-mail>E-Mail:chandana@gmail.com</e-mail>
</student>
</students>
</html>
Pg5.css
student{display:block; margin-top:10px; color:Navy;}
USN{display:block; margin-left:10px;font-size:14pt; color:Red;}
name{display:block; margin-left:20px;font-size:14pt; color:Blue;}
college{display:block; margin-left:20px;font-size:12pt; color:Maroon;}
branch{display:block; margin-left:20px;font-size:12pt; color:Purple;}
year{display:block; margin-left:20px;font-size:14pt; color:Green;}
e-mail{display:block; margin-left:20px;font-size:12pt; color:Blue;}
OUTPUT:
6. Write a PHP program to keep track of the number of visitors visiting the web page and to display this
count of visitors, with proper headings.
Aim: To write a PHP Program to Display the number of visitors visiting the web page.
Program6.php
<?php
$file=’count.txt’;
$count=strval(file_get_contents($file));
file_put_contents($file,$count+1);
echo (you are visitor number:”.$count);
?>
OUTPUT:
You are visitor number: 4
7. Write a PHP program to display a digital clock which displays the current time of the server.
Aim: To Write a PHP Program to display digital clock with current time of the Server.
Program 7.php <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="1"/>
<style>
p {
color:white;
font-size:90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body{background-color:black;}
</style>
<p> <?php echo date(" h: i : s A");?> </p> </head>
</html>
OUTPUT:
8. Write the PHP programs to do the following:
a. Implement simple calculator operations.
b. Find the transpose of a matrix.
c. Multiplication of two matrices.
d. Addition of two matrices.
Aim:
To write a PHP program to implement the Simple Calculator and Multiplication of Matrices.
Program 8a.php
<html>
<head>
<style>
table, td, th
{
border: 1px solid black;
width: 35%;
text-align: center;
background-color: DarkGray;
}
table { margin: auto; }
input,p { text-align:right; }
</style>
</head>
<body>
<form method="post">
<table>
<caption><h2> SIMPLE CALCULATOR </h2></caption>> <tr><td>First Number:</td><td><input
type="text" name="num1" /></td>
<td rowspan="2"><input type="submit" name="submit" value="calculate"></td></tr>
<tr><td>Second Number:</td><td><input type="text"
name="num2"/></td></tr>
</form>
<?php
if(isset($_POST['submit'])) // it checks if the input submit is filled
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
if(is_numeric($num1) andis_numeric($num1) )
{
echo "<tr><td> Addition :</td><td><p>".($num1+$num2)."</p></td>";
echo "<tr><td> Subtraction :</td><td><p> ".($num1-$num2)."</p></td>";
echo "<tr><td> Multiplication :</td><td><p>".($num1*$num2)."</p></td>";
echo "<tr><td>Division :</td><td><p> ".($num1/$num2)."</p></td>";
echo "</table>";
}
else
{
echo"<script type='text/javascript' > alert(' ENTER VALID NUMBER');</script>";
}
}
?>
</body> </html>
OUTPUT:
Program 8b.php <?php
$a = array(array(1,2,3),array(4,5,6),array(7,8,9));
$b = array(array(7,8,9),array(4,5,6),array(1,2,3));
$m=count($a);
$n=count($a[2]);
$p=count($b);
$q=count($b[2]); echo "the first matrix :"."<br/>";
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col++)
echo " ".$a[$row][$col];
echo "<br/>";
}
echo "the second matrix :"."<br/>";
for ($row = 0; $row < $p; $row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$b[$row][$col];
echo "<br/>";
}
echo "the transpose for the first matrix is:"."<br/>"; for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col++)
echo " ".$a[$col][$row];
echo "<br/>";
}
if(($m===$p) and ($n===$q)) {
echo "the addition of matrices is:"."<br/>";
for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col < 3; $col++)
echo " ".$a[$row][$col]+$b[$row][$col]." "; echo "<br/>";
}
}
if($n===$p){
echo " The multiplication of matrices: <br/>"; $result=array();
for ($i=0; $i < $m; $i++) {
for($j=0; $j < $q; $j++){
$result[$i][$j] = 0;
for($k=0; $k < $n; $k++)
$result[$i][$j] += $a[$i][$k] * $b[$k][$j];
}
}
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$result[$row][$col];
echo "<br/>";
}
} ?>
OUTPUT:
The first matrix:
1 2 3
4 5 6
7 8 9
The second matrix:
7 8 9
4 5 6
1 2 3
The transpose of the first matrix:
1 4 7
2 5 8
3 6 9
The addition of matrices is:
8 10 12
8 10 12
8 10 12
the multiplication of matrices:
18 24 30
54 69 84
90 114 138
9. Write a PHP program named states.py that declares a variable states with value "Mississippi Alabama
Texas Massachusetts Kansas". write a PHP program that does the following:
a. Search for a word in variable states that ends in xas. Store this word in element 0 of a list named
statesList.
b. Search for a word in states that begins with k and ends in s. Perform a caseinsensitive comparison.
[Note: Passing re.Ias a second parameter to method compile performs a case-insensitive comparison.]
Store this word in element1 of statesList.
c. Search for a word in states that begins with M and ends in s. Store this word in element 2 of the list.
d. Search for a word in states that ends in a. Store this word in element 3 of the list
Aim: Write a PHP program with variable states with value “Mississippi Alabama Texas Massachusetts
Kansas" Program 9.php <?php
$states = "Mississippi Alabama Texas Massachusetts Kansas"; $statesArray = [];
$states1 = explode(' ',$states);
echo "Original Array :<br>";
foreach ( $states1 as $i => $value )
print("STATES[$i]=$value<br>");
foreach($states1 as $state) {
if(preg_match( '/xas$/', ($state)))
$statesArray[0] = ($state);
}
foreach($states1 as $state) {
if(preg_match('/^k.*s$/i', ($state))) $statesArray[1] = ($state);
}
foreach($states1 as $state) {
if(preg_match('/^M.*s$/', ($state)))
$statesArray[2] = ($state);
}
foreach($states1 as $state){
if(preg_match('/a$/', ($state)))
$statesArray[3] = ($state);
}
echo "<br><br>Resultant Array :<br>";
foreach ( $statesArray as $array => $value )
print("STATES[$array]=$value<br>"); ?>
OUTPUT:
10. Write a PHP program to sort the student records which are stored in the database
using selection sort.
Aim:
To write a PHP - program to sort the student records using selection sort.
Goto Mysql and then type
create database weblab;
use weblab;
create table student(usnvarchar(10),name varchar(20),address varchar(20));
program10.php
<!DOCTYPE html>
<html>
<body>
<style>
table, td, th
{
border: 1px solid black;
width: 33%;
text-align: center;
border-collapse:collapse;
background-color:lightblue;
}
table { margin: auto; }
</style>
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "weblab";
$a=[];
// Create connection // Opens a new connection to the MySQL server
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection and return an error description from the last connection error, if any
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT * FROM student";
// performs a query against the database $result = $conn->query($sql);
echo "<br>";
echo "<center> BEFORE SORTING </center>"; echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>"; if ($result->num_rows> 0)
{
// output data of each row and fetches a result row as an associative array
while($row = $result->fetch_assoc()){
echo "<tr>";
echo "<td>". $row["usn"]."</td>";
echo "<td>". $row["name"]."</td>";
echo "<td>". $row["addr"]."</td></tr>";
array_push($a,$row["usn"]);
}
}
else
echo "Table is Empty";
echo "</table>";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
{ $pos= $i;
echo "<td>". $d[$i]."</td></tr>";
}
echo "</table>";
$conn->close();
?>
</body> </html>
OUTPUT:
BEFORE SORTING
10. VIVA QUESTIONS
1) Why HTML is called a “markup” language?
2) Can you name some Markup languages other than HTML?
3) How do you write comments in HTML?
4) What does the <br> and the <p> tag in HTML do?
5) How do you insert bullets in a HTML page?
6) What is the difference between Dynamic HTML and Dynamic Web Pages?
7) What are the Components of URL?
8) What do you mean by the “Shebang Line”?
9) What does ‘80’ mean in localhost: 8080?
10) What are cookies? Why do you need them?
11) What do you mean by a “Session”? Comment on its importance.
12) What do you mean by URI? Is it the same as URL?
13) What is a Query String?
14) What do you mean by “Embedded HTML”?
15) Why do you have to “use” a database that you have created in MySQL before you perform other operations?
16) What are the different data types supported by MySQL?
17) What does the “grant” command in MySQL do?
18) What do you mean by the “Path Information”?
19) What is the difference between “GET” and “POST”?
20) What do you mean by SSI? What are its uses?
21) Why is Java said to be “secure”?
22) What do you mean by “Exception Handling” in Java?
11. VIVA QUESTIONS WITH ANSWERS:
1. HTML stands for
As: Hyper Text Markup Language
2. What type of language is HTML?
As: Markup Language
3. What does an HTML document describe?
As: Web pages
4. Links in HTML are defined with what tag?
As: <a>, anchor tag
5. How many heading styles are there in HTML?
As: 6 headings, h1..h6
6. How line break is given in HTML?
As: using <br> tag
7. What is the use of attributes used in HTML?
As: They provide additional information for tags
8. For what purpose <hr> tag is used?
As: The <hr /> tag is used to create an horizontal rule (line).
9. What are the basic text formatting tags used in HTML?
As: <b> for bold, <i> for italic, <u> for underline etc.
10. What is a hyperlink?
As: In web terms, a hyperlink is a reference (an address) to a resource on the web.
11. How images are displayed on web pages in HTML?
As: In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src
attribute is the URL of the image you want to display on your page. The syntax of defining an image: <img
src=”url/”>
12. Explain <table> tag used in HTML?
As: Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a
data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
13. How many types of lists are available in HTML?
As: three types of lists are available <ul> for unordered list, <ol> for ordered list, <dl> for definition lists.
14. Explain <form> element used in HTML?
As: A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-
down menus, radio buttons, checkboxes, etc.) in a form.A form is defined with the <form> tag.
15. How colors are defined in HTML?
As: HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and
Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The
highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.
16. Explain about frames used in HTML?
As: With frames, you can display more than one HTML document in the same browser window. Each
HTML document is called a frame, and each frame is independent of the others.The disadvantages of using
frames are:
17. How to use styles in HTML?
As: When a browser reads a style sheet, it will format the document according to it. There are three ways of
inserting a style sheet:
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet using
the <link> tag. The <link> tag goes inside the head section.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles
in the head section with the <style> tag.
18. Expand CSS.
As: Cascading Style Sheets
19. What does styles do in Style sheets ?
As: They tell how to display various elements
20. How CSS syntax is made up of?
As: The CSS syntax is made up of three parts: a selector, a property and a value:
21. What is Javascript?
As: JavaScript is THE scripting language of the Web.JavaScript is used in millions of Web pages to add
functionality, validate forms, detect browsers, and much more.
22. What Javascript can do?
As: JavaScript gives HTML designers a programming tool
JavaScript can put dynamic text into an HTML page
JavaScript can react to events
JavaScript can read and write HTML elements –
JavaScript can be used to validate data –
JavaScript can be used to detect the visitor's browser –
JavaScript can be used to create cookies
23. What was the original name of Javascript?
As: ECMA Script (European Computers Manufacturers Association)
24. What is a Javascript statement?
As: A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser
what to do.
25. Explain the importance of XML?
As: XML stands for EXtensible Markup Language.
XML was designed to transport and store data.
XML is important to know, and very easy to learn.
XML tags are not predefined, user has to define the tags
26. What is the difference between XML and HTML?
As: XML is not a replacement for HTML.
XML and HTML were designed with different goals:
HTML is about displaying information, while XML is about carrying information.
27. What is XML tree?
As: XML Documents Form a Tree Structure
XML documents must contain a root element. This element is "the parent" of all other elements.
The elements in an XML document form a document tree. The tree starts at the root and branches to the
lowest level of the tree.
All elements can have sub elements (child elements):
The terms parent, child, and sibling are used to describe the relationships between elements. Parent elements
have children. Children on the same level are called siblings (brothers or sisters).
All elements can have text content and attributes (just like in HTML).
28. What are the syntax rules for XML document?
As: All XML Elements Must Have a Closing Tag
XML Tags are Case Sensitive
XML Elements Must be Properly Nested
XML Documents Must Have a Root Element
29. What is an XML Element?
As: An XML element is everything from (including) the element's start tag to (including) the element's end
tag.
An element can contain other elements, simple text or a mixture of both. Elements can also have attributes.
<bookstore> <book
category="CHILDREN">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price> </book>
<book category="WEB">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price> </book>
</bookstore>
In the example above, <bookstore> and <book> have element contents, because they contain other
elements. <author> has text content because it contains text.
In the example above only <book> has an attribute (category="CHILDREN").
30. What is a well formed XML document?
As: Well Formed XML Documents
A "Well Formed" XML document has correct XML syntax.
The syntax rules were described in the previous chapters:
t
31. What is a valid XML document?
As: A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a
Document Type Definition (DTD):
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note> <to>Tove</to> <from>Jani</from>
<heading>Reminder</heading> <body>Don't
forget me this weekend!</body> </note>
The DOCTYPE declaration in the example above, is a reference to an external DTD file. The content of the
file is shown in the paragraph below.
32. What is the purpose of XML DTD?
As: The purpose of a DTD is to define the structure of an XML document. It defines the structure with a list
of legal elements:
33. What is PHP?
As: PHP is a powerful tool for making dynamic and interactive Web pages.
PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
PHP stands for PHP: Hypertext Preprocessor
-side scripting language, like ASP
etc.)
an open source software
34. Why PHP is popular than ASP?
As: PHP runs on different platforms (Windows, Linux, Unix, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP is FREE to download from the official PHP resource: www.php.net
PHP is easy to learn and runs efficiently on the server side
35. What is basic PHP syntax?
As: A PHP scripting block always starts with <?php and ends with ?>. A PHP scripting block can be placed
anywhere in the document.On servers with shorthand support enabled you can start a scripting block with <?
and end with ?>.For maximum compatibility, we recommend that you use the standard form (<?php) rather
than the shorthand form.
36. Expand Perl?
As: Perl (Practical Extraction and Reporting Language) A scripting language for web servers. Most
often used on Unix servers
37. What is CGI script?
As: CGI scripts are executables that will execute on the server to produce dynamic and interactive web
pages. Most ISPs offer some kind of CGI capabilities. ISPs often offer preinstalled, ready to run, guest-
books, page-counters, and chat-forums solutions in CGI.CGI is most common on Unix or Linux servers.
38. Who developed PHP?
As: Rasmus Lerdorf
39. Who developed HTML and World Wide Web?
As: Tim Berners Lee
40. What is the use of HTTP protocol?
As: application-level protocol for distributed, collaborative, hypermedia information systems
-oriented
sks, such as name servers & distributed object management systems