Introduction to Web Programming (PLC1) By Y.V.

Reddy ,SIT,Tumkur

Introduction to
Web Programming
(PLC1)
Unit-I
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

Q) Interpret and analyze Web Application Environment (or) Web Development

Environment.
Ans)

A web application environment is defined as a full website or website application stack

containing everything the website or application needs to deliver features and content to
users.

This includes, but is not limited to, the following:

 A dedicated parcel of server space

 Memory
 A database
 An operating system
 Application services

There are two broad divisions of web development, they are:

1. Front-End Development (also called client-side development)
Front-end development refers to constructing what a user sees when they load a web
application – the content, design and how you interact with it. This is done with three codes –
HTML, CSS and JavaScript.
2. Back-End Development ( also called server-side development)

Back-end development controls what goes on behind the scenes of a web application. A
back-end often uses a database to generate the front-end.

The development environment is located in the backend or server-side of an application,

which means that users can’t directly interact with it. The backend is only accessible for
developers working on the designated application.

Examples of web applications are social networking sites like Facebook or e-commerce sites
like Amazon.

Q) Elaborate about the basic componenets of Web

Ans)

Web physically consists of the following components −

 Personal computer/Laptop − This is the PC/Laptop at which we sit to see the web.
 A Web browser − A software installed on PC which helps to browse the Web.

 An internet connection − This is provided by an ISP and connects to the internet to

reach to any Website.

 A Web server − This is the computer on which a website is hosted.

 Routers & Switches − They are the combination of software and hardware who take
request and pass to appropriate Web server.
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

The Web is known as a client-server system. The computer is the client and the remote
computers that store electronic files are the servers.

Q) Elaborate about Web usage functionality (OR) How the Web works?
Ans)
Web usage functionality (Or) How the Web Works?

When we enter something like Google.com the request goes to one of many special
computers on the Internet known as Domain Name Servers (DNS). All these requests are
routed through various routers and switches. The domain name servers keep tables of
machine names and their IP addresses, so when we type in Google.com it gets translated into
a number, which identifies the computers that serve the Google Website .

When we want to view any page on the Web, we must initiate the activity by requesting a
page using browser. The browser asks a domain name server to translate the domain name
we requested into an IP address. The browser then sends a request to that server for the page
we want, using a standard called Hypertext Transfer Protocol or HTTP.

The server should constantly be connected to the Internet, ready to serve pages to visitors.
When it receives a request, it looks for the requested document and returns it to the Web
browser. When a request is made, the server usually logs the client's IP address, the document
requested, and the date and time it was requested. This information varies server to server.

An average Web page actually requires the Web browser to request more than one file from
the Web server and not just the HTML / XHTML page, but also any images, style sheets, and
other resources used in the web page. Each of these files including the main page needs a
URL to identify each item. Then each item is sent by the Web server to the Web browser and
Web browser collects all this information and displays them in the form of Web page.
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

Q) Distinguish between static web sites and dynamic web sites and list
examples to each.

Ans)

Q) Elaborate about HTML document and its structure.

Ans) The <HTML> is a markup language that is used by the browser to manipulate text,
images, and other content to display it in the required format.
Tags in HTML: Tags are one of the most important part in an HTML Document. HTML
uses some predefined tags which tells the browser about content display property, that is how
to display a particular given content. For Example, to create a paragraph, one must use the
paragraph tags(<p> </p>) and to insert an image one must use the img tags(<img />).
There are generally two types of tags in HTML:

1. Paired Tags: These tags come in pairs. That is they have both opening(<
>) and closing(</ >) tags.
2. Empty Tags: These tags do not require to be closed.

Structure of HTML Document

Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

An HTML Document is mainly divided into two parts:

 HEAD: This contains the information about the HTML document. For Example, Title
of the page, version of HTML, Meta Data etc.
 BODY: This contains everything you want to display on the Web Page.

Q) Elaborate all text format tags used in HTML and implement those tags
using HTML code.
Ans) Text formatting tags used in HTML

<strong> is used for strong text (typically displayed as bold).

<em> is used for emphasized text (typically displayed in italics).
<u> is used for underlined text.
<s> is used for strikethrough text.
<mark> is used for highlighted text.
<sub> is used for subscript text.
<sup> is used for superscript text.
<code> is used for displaying code.
<kbd> is used for representing user input.
<abbr> is used for abbreviations with a title attribute for additional information.
<cite> is used for citations.
<small> is used for smaller text.
<span> is used for applying custom styles.
<a> is used for creating hyperlinks.
<b> is used for creating bold text.
<i> is used for italic text form.

Demonstration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting Tags Example</title>
</head>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<body>

<h1>Text Formatting Tags Example</h1>

<p>This is a paragraph of <b>bold</b> text.</p>

<p>This is a paragraph of <i>italic</i> text.</p>

<p>This is a paragraph with <u>underlined</u> text.</p>

<p>This is a paragraph of <strong>strong</strong> text (typically bold).</p>

<p>This is a paragraph of <em>emphasized</em> text (typically italic).</p>

<p>This is a paragraph with <s>strikethrough</s> text.</p>

<p>This is a paragraph with <mark>highlighted</mark> text.</p>

<p>This is a paragraph with _subscript text and ^superscript

text.</p>

<p>This is a paragraph with <code>code</code> text.</p>

<p>This is a paragraph with <kbd>keyboard input</kbd>.</p>

<p>This is a paragraph with <abbr title="Hypertext Markup Language">HTML</abbr>

abbreviation.</p>

<p>This is a paragraph with <cite>citation</cite> text.</p>

<p>This is a paragraph with <small>small</small> text.</p>

<p>This is a paragraph with <span style="color: blue;">custom-styled</span> text.</p>

<p>This is a paragraph with <a href="https://www.example.com" target="_blank">a

hyperlink</a>.</p>

</body>
</html>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

Q) Tabulate and describe the various tags used in HTML Table.

Ans) HTML Table Tags

Q) Demonstrate simple HTML table using HTML code.

Ans)

<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

Q) Demonstrate HTML table with adding style , alignment and cell padding using HTML
code.

Ans)
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 20px;
}

th {
text-align: left;
}
</style>
</head>

<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

Q) Define XHTML and describe its significance. Elaborate Why does developers migrate
their content to XHTML 1.0.
Ans)
XHTML stands for EXtensibleHyperTextMarkupLanguage. It is the next step in the
evolution of the internet. The XHTML 1.0 is the first document type in the XHTML family.
XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and
stricter version of HTML 4.01. If you already know HTML, then you need to give little
attention to learn this latest version of HTML.
XHTML was developed by World Wide Web Consortium (W3C) to help web developers
make the transition from HTML to XML. By migrating to XHTML today, web developers
can enter the XML world with all of its benefits, while still remaining confident in the
backward and future compatibility of the content.
Why Use XHTML?
Developers who migrate their content to XHTML 1.0 get the following benefits:

• XHTML documents are XML conforming as they are readily viewed, edited, and validated
with standard XML tools.

• XHTML documents can be written to operate better than they did before in existing
browsers as well as in new browsers.

• XHTML gives you a more consistent, well-structured format so that your webpages can be
easily parsed and processed by present and future web browsers.

• We can easily maintain, edit, convert and format your document in the long run.

• Since XHTML is an official standard of the W3C, your website becomes more compatible
with many browsers and it is rendered more accurately.

• XHTML combines strength of HTML and XML. Also, XHTML pages can be rendered by
all XML enabled browsers.
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

• XHTML defines quality standard for your webpages and if you follow that, then your web
pages are counted as quality web pages. The W3C certifies those pages with their quality
stamp.
Q) Describe about Document Type Definition DTD in xhtml. why is it needed?
Ans)
DTD, which stands for Document Type Definition, is a set of rules that defines the structure
and legal elements and attributes of an XML or XHTML document. It essentially serves as a
contract or blueprint that dictates how elements and attributes should be used in a document.
In the context of XHTML, DTD ensures that XHTML documents adhere to specific rules and
guidelines, making them well-formed and valid.

DTD is needed in XHTML for the following purposes:

Validation: DTD provides a way to validate XHTML documents. It allows software (such as
web browsers or XML parsers) to check if the structure of an XHTML document conforms to
the rules specified in the DTD. This validation helps ensure that the document is well-formed
and follows the expected syntax.

Interoperability: DTD promotes interoperability by establishing a common set of rules that

all XHTML documents should follow. This consistency ensures that XHTML documents can
be reliably interpreted and displayed by different browsers and XML processors.

Standardization: DTD contributes to standardizing the structure of XHTML documents. It

helps developers and authors create documents that adhere to a common set of rules,
promoting consistency and clarity in web development.

Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML Document with DTD</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph in an XHTML document.</p>

</body>
</html>

Q) List the important points to remember while writing a new XHTML document or
converting existing HTML document into XHTML document:
Ans.

 Write a DOCTYPE declaration at the start of the XHTML document.

Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 Write all XHTML tags and attributes in lower case only.

<!-- This is invalid in XHTML -->

<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>

<!-- Correct XHTML way of writing this is as follows -->

 Close all XHTML tags properly.

<!-- This is valid in XHTML -->

<p>This paragraph is not written according to XHTML syntax.</p>

<!-- This is also valid now -->

<img src="/images/xhtml.gif" />

 Nest all the tags properly.

 Quote all the attribute values.

 Forbid Attribute minimization.

<img src="/images/xhtml.gif" width="250" height="50" />

 Replace the name attribute with the id attribute.

 Deprecate the language attribute of the script tag.

Q) Use HTML code to construct a form and add the components for different types of
inputs such as text field, buttons , check boxes , radio buttons , textarea and selection
elements.

<!DOCTYPE html>
<html>

<head>
<title>FORM DEMO</title>
</head>

<body bgcolor=yellow>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<form>
<h1>
<br><br>
User ID : <input type = "text" name ="user_id" />
<br>
Password: <input type = "password" name = "password" />
<hr><br>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
<hr><br>
<input type = "checkbox" name = "Java" value = "on" checked> Java
<input type = "checkbox" name = "Python" value = "on"> Python
<hr><br>

<input type = "radio" name = "subject" value = "Java"> Java

<input type = "radio" name = "subject" value = "Python"> Python
<hr><br>

<select name = "dropdown">

<option value = "Java" selected>Java</option>
<option value = "Python">Python</option>
</select><br>
<input type = "hidden" name = "pagename" value = "10" /><br>
<input type = "submit" name = "submit" value = "Submit" /><br>
<input type = "reset" name = "reset" value = "Reset" />
</h1>
</form>
</body>

</html>

Q) Present your understanding about margin and padding.

Ans)

The embedded CSS code that wraps around every HTML element. It consists of: margins,
borders, padding, and the actual content. The image below illustrates the box model
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

Some of the important programs being used in HTML and XHTML are

Q. Create a HTML document giving details of your [Name, Age], [Address, Phone] and [Register
Number, Class] aligned in proper order using alignment attributes of Paragraph tag.

Procedure:

1. Go to start ->all program – >accessories-> notepad

2. Type the html code

3. Align [name,age]to center by using align =”left ” of <p> tag

4. Align [register,number,class] to right using align=”right” of <p> tag

5. Go to file-> save->save the file with html extension

Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

6. Run the html code using browser

<html>

<head>

<title>program 02</title>

</head>

<body>

<p align="center">

Name: AITS<br>

Age: 16

</p>

<p align="right">

Address: Aghraharam post TUMKUR<br> Phone:

123535615

</p>

<p align="left">

Reg No:

20AK1A0501<br>

Class:1stSem

</p>

</body>

</html>

Q)Create a page to show different character formatting (B, I, U, SUB, SUP) tags.

viz :log b mp

= p logbm

Procedure:
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

1. Go to start ->all program – >accessories-> notepad

2. Type the html code

3. Include <b>,<u>,<sup>,<sub>,tags

4. Go to file->save-> save the file with html extension

5. Run the html code using browsers

<html>

<head>

<title>program 04</title>

</head>

<body>

<p><b><i> log</i></b>_bm^p =p<b><i> log </i>

</b>_b m</p>

</body>

</html>

Q) Write HTML code to create a Web Page that contains an Image at its centre.

Procedure:

1. Go to start ->all program – >accessories-> notepad

2. Type the html code

3. Include <img> tag inside <center> tag and set align attribute of img tag to middle

4. Go to file->save->save the file with html extension

5. Run the html code using browsres

<html>

<head>

<title>program 05</title>

</head>

<body>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<center>

<imgsrc="C:\Documents and Settings\All Users\Documents\My Pictures\Sample

Pictures\Winter.jpg" height="200" width="200" align="middle"/>

</center>

</body>

</html>

Q)Create a table to show your class time table.

Source Code:

<html>

<head>TABLE TAG</head>

<title>TABLE</title>

<body>

<style>

table, th, td

border: 1px solid black;

border-collapse:collapse;

padding:15px;

#t01

background-color: #f1f1c1;

td{text-align:center;}

</style>

<table id="t01">

<caption><b>AI&DS ONLINE TABLE</b></caption>

<tr>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<thcolspan="4">AI&DS</th>

</tr>

<tr>

<thcolspan="4">Monday</th>

</tr>

<tr>

<th>9:30-10:20</th>

<th>10:30-11:20</th>

<th>11:30-12:20</th>

<th>12:30-1:20</th>

</tr>

<tr>

<td>P&S</td>

<td>DS</td>

<td>PY</td>

<td>NM</td>

</tr>

</table>

<hr>

<table id="t02">

<caption><strong>CSE-2 ONLINE TABLE</strong></caption>

<tr>

<throwspan="4">CSE-2</th>

</tr>

<tr>

<thcolspan="4">Monday</th>

</tr>

<tr>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

<th>9:30-10:20</th>

<th>10:30-11:20</th>

<th>11:30-12:20</th>

<th>12:30-1:20</th>

</tr>

<tr>

<td>PHY</td>

<td style="background-color: #A52A2A;">DS</td>

<td>P&S</td>

<td>ENG</td>

</tr>

</table>

</body>

</html>
Introduction to Web Programming (PLC1) By Y.V.Reddy ,SIT,Tumkur

….End of Unit-I…..