Introduction to

Web Programming (PLC1)

Unit-1

Dr. Bharathi P. T,
Assistant Professor,
Dept. of CSE, SIT
[email protected]
 Web programming
• Web programming refers to the writing,
markup and coding involved in Web development.
• Refers to the creating, building, and maintaining of websites.
•Web
The word Web Development is made up of two words, that
is:
• Web: It refers to websites, web pages or anything that
works over the internet.
• Development: It refers to building the application from
scratch.
 Static and Dynamic web pages

https://protonix-india.com/ http://sit.ac.in
Static and Dynamic web pages
Sl.N
o Static Web Page Dynamic Web Page
In static web pages, Pages will In dynamic web pages, Content of
1. remain same until someone pages are different for different
changes it manually. visitors.

Static Web Pages are simple in

2. Dynamic web pages are complicated.
terms of complexity.

In static web pages, Information are In dynamic web page, Information are
3.
change rarely. change frequently.

Static Web Page takes less time for Dynamic web page takes more time for
4.
loading than dynamic web page. loading.

In Static Web Pages, database is In dynamic web pages, database is

5.
not used. used.
Static web pages are written in Dynamic web pages are written in
6. languages such as: HTML, languages such as: CGI, AJAX, ASP,
JavaScript, CSS, etc. ASP.NET, etc.

Dynamic web pages contain

Static web pages does not contain
7. application program for different
any application program.
services.

Dynamic web pages require

Static web pages require less work
8. comparatively more work and cost in
 Static and Dynamic web
pages
https://protonix-india.com/ http://sit.ac.in
 Static and Dynamic web
pages
https://protonix-india.com/ http://sit.ac.in
 Jobs Designation with Web
Development
Front End Developer
• Client-side development

• It is a type of development that involves programs that run on

a client's or user's device.
• Creating website layouts, Designing user interfaces (UI),
Adding form validation, Reviewing the performance of
websites, Adding visual design elements like colors and fonts,

Backend Developer
• Server-side development
• It is a type of development that involves programs that run on
a server.
• Connecting websites to databases, Coding dynamic websites
 Jobs Designation with Web
Development
Full stack Developer
• Build and maintain both the front-end and the back-end of a
website.
Client-side (Front End) Programming

The languages for client-side programming are :

1)HTML
2)CSS
3)Javascript
4)VBScript
5)AJAX
Server-side (Back End) Programming

The languages for server-side programming are :

1) PHP, Perl

2) C++

3) Java and JSP

4) Python

5) Ruby on Rails

6)C#
World Wide Web (WWW)
 The Internet is often confused
with the World Wide Web.

 The Internet consists of a wide

range of technologies including
email, file data transfer,
protocols (communications
infrastructure) as well as the
Web.

 The World Wide Web is just

one component of the Internet.
World Wide Web (WWW)
 The World Wide Web (WWW) is made
up of a lot of interconnected computers
(via phone lines, cables, or satellites).
 Some of these computers are designed to serve out webpages.
These computers are called web servers, which are usually running
24/7.
 Other computers, like the one you are using to read this text, are
called clients.
 Client computers make requests to server computers, like asking
for a web page and its associated graphics.
 The server computer responds by feeding (or serving) the web
page data back to the client.
 Each website has a unique addresses determined by its domain
name.
 Tim Berners-Lee

 Tim Berners-Lee is a British

computer scientist who
invented the World Wide
Web (WWW).
 Berners-Lee enabled a
method to be able to view
hypertext documents (web-
pages) through the internet.
 He also serves as a
director for the World Wide
Web Consortium (W3C)
which manages standards
for the Internet and World
Wide Web.
First web page: Tim Berners-Lee
Web Browsers
 Web browsers are computer programs that are installed on
client computers to request web page files from server
computers.
 Once a request is made via the browser (by clicking a link or
entering a web address in the “address bar”), the web server
server sends the requested data back to the browser. The
browser then interprets the data and displays it on the screen.
 Popular web browsers include Firefox, Chrome, Opera, Safari
& Edge. Each of these browsers differ somewhat in terms of
features, but their purpose is the same. They’re all meant to
request and present web pages to the user.
 “Mobile browsers” are web browsers designed for use on a
mobile devices like PDAs and cell phones.
 Web Application
A Web application (Web app) is an application program
that is stored on a remote server and delivered over the
Internet through a browser interface
 HTML: Web Programming Language
•HTML stands for Hyper Text Markup Language
•HTML is the standard markup language for creating Web pages
•HTML describes the structure of a Web page
•HTML elements tell the browser how to display the content

HTML
 HTML History
HTML – Web Programming Language
HTML5
Structure
HTML • The <!DOCTYPE html> declaration
defines that this document is an
HTML5 document
<!DOCTYPE html>
<html>
• The <html> element is the root
element of an HTML page
<head>
• The <head> element contains meta
<title>Page information about the HTML page
Title</title>
• The <title> element specifies a title for
</head> the HTML page (which is shown in the
browser's title bar or in the page's tab)
<body>
• The <body> element defines the
document's body, and is a container for
all the visible contents
</body>
• Like headings, paragraphs, images,
</html>
hyperlinks, tables, lists, etc.
HTML and XHTML: Version
History
 HTML and XHTML: Version Histor
HTML 2.0 Classic HTML supported by browsers such as Mosaic. It supports
core HTML elements and features such as tables and forms, but
not consider any of the browser innovations of advanced
features such as style sheets, scripting, or frames
HTML 3.0 was never widely adopted, most likely due to the heavy
use of browser-specific markup
HTML 3.2 supports many presentation-focused elements such as font, as
well as early support for some scripting features.
HTML 4.0 It provides a basis of transition to Cascading Style Sheets (CSS)
Transitional as well as a base set of elements and attributes for multiple-
language support, accessibility, and scripting.
HTML 4.0 Strict Removes most of the presentation elements from the HTML
specification, such as font, in favor of using CSS for page
formatting.
4.0 Frameset The frameset specification provides a rigorous syntax for
framed documents that was lacking in previous versions of
HTML.
HTML 4.01 A minor update to the 4.0 standard that corrects some of the
Transitional/ errors in the original specification.
Strict/Frameset
 HTML and XHTML: Version
HTML5 Extend it to address Web application development, multimedia,
History
and the ambiguities found in browser parsers.
XHTML 1.0 The transitional form preserves many of the basic presentation
Transitional features of HTML 4.0 transitional but applies the strict syntax
rules of XML to HTML.
XHTML 1.0 A reformulation of HTML 4.0 Strict using XML. This language is rule
Strict enforcing and leaves all presentation duties to technologies like
CSS.
XHTML 1.1 A restructuring of XHTML 1.0 that modularizes the language for
easy extension and reduction.
XHTML 2.0 A new implementation of XHTML that will not provide
backward compatibility with XHTML 1.0 and traditional
HTML. XHTML 2 will remove all presentational tags and will
introduce a variety of new tags and ideas to the language.
XHTML Modularization of XHTML (1.1)
Basic 1.0 designed to work with less-power ful Web clients such as mobile
phones.
XHTML some fairly specific to the constrained interfaces found
Basic 1.1 in mobile devices.
Document Type Statements and Language
Versions
• All HTML documents must start with a <!DOCTYPE>
declaration.

• It is an "information" to the browser about the type

of markup that is used in a document. It specifies
which version of HTML the document is using.

Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">

Indicates that we are using the transitional variation of

HTML 4.01
<html> tag will serve as the ultimate parent of all the
content and elements within this document.
 Examples of Document Type
• In HTML 5, the declaration is simple: <!DOCTYPE html>

• HTML 4.01:<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.01 Transitional//EN“
"http://www.w3.org/TR/html4/loose.dtd">

• XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

In case of HTML 4.01 and XHTML 1.1 , the declaration must

refer to a DTD (Document Type Definition). HTML 4.01 has 3
possible doctypes: HTML 4 Strict, HTML 4 Transitional and
HTML 4 Frameset
Common HTML Doctype
Declarations
Document Structure HTML 4.0

version of HTML
being
used, in this case
4.01
 Document Structure HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equip="Content-Type"
content="text/html; charset=utf-8">

<title>Page Title</title>
</head>

<body>
</body>
Document Structure XHTML
version of XHTML
being used, in this
case 1.0

xmlns (XML name

space)
 Document Structure XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
txhtml1-strict.dtd">

<html xmlns = “http://www.w3.org/1999/xhtml”>

<head>
<meta http-equip="Content-Type"
content="text/html; charset=utf-8" />
<title> Page Title </title>
</head>
<body>
</body>
</html>
In either HTML
or XHTML (but
not in HTML5),
we can replace
the
<body> tag with
a
<frameset> tag,
which encloses
potentially
numerous

<frame> tags
corresponding to
individual
portions of the
browser
window, termed
<!DOCTYPE HTML > Frameset example1
<HTML>
<HEAD>
<TITLE>Simple frameset</TITLE>
<FRAMESET cols="50%,50%">
<FRAME border="1" name="frame1" src="#">
</FRAME>

<FRAME border="1" name="frame2" src="#">

</FRAME>

</FRAMESET>

</HEAD>
<BODY>
</BODY>

</HTML>
<HTML>
<HEAD> Frameset example2
<TITLE>Simple frameset</TITLE>
<FRAMESET cols="30%,70%">
<FRAMESET rows="50%,50%" >
<FRAME frameborder="1" name="frame1" src="">
</FRAME>
<FRAME frameborder="1" name="frame2" src="">
</FRAME>
</FRAMESET>

<FRAMESET rows="20%,80%">
<FRAME frameborder="1" name="frame3" src="">
</FRAME>
<FRAME frameborder="1" name="frame4" src="">
</FRAME>
</FRAMESET>
</HEAD>
<BODY>
</BODY>
</HTML>
The <frameset>
tag also should
include a
noframes
element that
provides a
version of the
page for
browsers that
do not support
frames
 Frame example3

<!DOCTYPE html>
<html>
<body>

<h1>The iframe
element</h1>

<iframe
src="https://www.w3schools
.com" title="W3Schools Free
Online Web Tutorials"> Use the <iframe> tag to embed
</iframe> another document within the current
HTML document:

</body>
</html>
 The Document Head
• It is used to describe the content of the document.
• The element acts like the front matter or cover page of a
document.
• head element is information about the page that is useful
for setting the page title, defining interactivity, visual
styling, and providing other useful information that
describes or controls the document.

<!DOCTYPE >
<html>20
<hea
d>
<title>Page
Title</title>
</
head>
<body
>

</
body>
</
html>
 The Document Head
<title> Defines the title of the document. The title must be text-only, and it is
shown in the browser's title bar or in the page's tab.

<title>Simple HTML Title Example</title>

<title>Simple HTML Title Example, &copy; 2010 WebMonopoly,
Inc.</title>

<meta> Defines metadata about an HTML document. Used to specify character

set, page description, keywords, author of the document, and viewport
settings.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

Character Code
Description of
webpage Keywords
Author
Screen size
adjustment
Browser refresh

https://www.dofactory.com/html/charset - more information

 Other Elements in the head
Comments <!-- and ends with -->
<!-- Hi I am a comment -->
<!-- Author: Thomas A. Powell Book: HTML: The Complete Reference
Edition: 5-->

<link> Specifies a special relationship between the current document and

another document. It is used to specify a style sheet used by the document.
<link rel="stylesheet" href="mystyle.css">

More Example: https://www.w3schools.com/css/css_howto.asp

<script> used to embed a client-side script (JavaScript)

<script type="text/javascript">
alert("Hi from JavaScript!");
/* more code below */
</script>

<style> Used to enclose Cascading Style Sheet (CSS) format, relating to fonts, colors,
positioning, and other aspects of content presentation
<style type="text/css" media="screen">
h1 {font-size: xx-large; color: red; font-style: italic;}
/* all h1 elements render as big, red and italic */
</style>
 Other Elements in the head
<base> Used to specifies an absolute URL address that is used to
provide server and directory information for
partiallyspecified URL addresses, called
relative links, used within the document

<base href="https://www.w3schools.com/" >

More Example: https://www.w3schools.com/tags/tag_base.asp

<object> Defines a container for an external resource. The external

resource can be a
web page, a picture, a media player, or a plug-in application.
<object data="snippet.html" width="500"
height="200"></object> More Example: https://www.
w3schools.com/tags/tag_object.asp
The Document Head
• The complete syntax of the markup allowed in the head
element under strict (X)HTML is shown here:
 HTML 4.01 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> Unicode Transformation
Format
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello HTML 4 World</title>
<!-- Simple hello world in HTML 4.01 strict example -->
</head>
<body>
<h1>Welcome to the World of HTML</h1>
<hr>
<p>HTML <em>really</em> isn't so hard!</p>
<p>Soon you will &hearts; using HTML.</p>
<p>You can put lots of text here if you want.
We could go on and on with fake text for you
to read, but let's get back to the book.</p>
</body>
http://htmlref.com/ch1/html4hellow
</html> orld.html
The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data. <meta> tags always go inside the <head> element, and
are typically used to specify character set, page description, keywords, author of
the document, and viewport settings.
 HTML TAGS
Tag Meaning
<p> Paragraph
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Heading Tags 1 to 6
<strong> Define text with strong importance
<b> Bold Tag
<!-- comment---> Comment Tag
<center> This will center your contents
<em> Emphasis
<i> (italics)
<hr> Horizontal rule
<hr width="50%" size="3" /> Horizontal rule
<hr width="75%" color="#ff0000" Horizontal rule
size="4"/>
<img src=“earth.gif” /> Image tag
<img src="Earth.gif" width="41" Image tag with attributes
height="41" border="0" alt="text
describing the image" />
 Tag Meaning
<big>Example</big>
<small>Example</small> Display the contents in big and small
<br> line break
<ul>
<li>Coffee</li>
<li>Tea</li> Unordered Listing
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li> Ordered Listing
<li>Milk</li>
</ol>
<ol type="a">
<li>List item 1</li>
<li>List item 2</li> Ordered Listing with a,b,c numbering
</ol>

<ol type=“A">
<li>List item 1</li> Ordered Listing with A,B,C numbering
</ol>
 Tag Meaning
<ol type="i"> Ordered Listing with i,ii,iii numbering
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol start="5"> Ordered Listing start with 5,6,7
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<strike>Example</strike> To strike Example
<table> Table tag to create table tr
<tr> - row
<th>Month</th> th – header
<th>Savings</th> td- values
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
 Tag Meaning
<div> paragraph1 </div> For different sections
<div> paragraph2 </div>
<div> paragraph3 </div>
<dl> Definition description
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<pre> Preformatted text. The text will be
Text in a pre element is displayed in a displayed exactly as written in the
fixed-width font, and it preserves both HTML source code.
spaces and line breaks
</pre>

<p>My favorite color The <ins> tag defines a text that has been
is <del>blue</del> inserted into a document. Browsers will usually
<ins>red</ins>!</p> underline inserted text.
The <del> tag defines text that has been
deleted from a document. Browsers will usually
strike a line through deleted text.
 Tag Meaning
<blockquote cite="https://www.brainyqu HTML <blockquote> tag is used to define a block
ote.com/authors/erin_cummings"> of text which is quoted from another source. The
<p> Browser usually displays the content within
At the end of the day, you are solely re <blockquote> tag as indented text.
sponsible for your success and your failur
e. And the sooner you realize that, you ac
cept that, and integrate that into your wo
rk ethic, you will start being successful.
</p>
</blockquote>
The Document
Body
 XHTML
• XHTML stands for eXtensible HyperText Markup
Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is supported by all major browsers

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

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>

some content here...

</body>
</html>
Document Structure XHTML
version of XHTML
being used, in this
case 1.0

xmlns (XML name

space)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" >
XHTML
<html xmlns ="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Hello XHTML World</title>
<!-- Simple hello world in XHTML 1.0 strict example -->
</head>
<body>
<h1>Welcome to the World of XHTML</h1>
<hr />
<p>XHTML <em>really</em> isn't so hard either!</p>
<p>Soon you will &hearts; using XHTML too.</p>
<p>There are some differences between
XHTML and HTML but with some precise
markup you'll see such differences are
easily addressed.</p>
</body>
http://htmlref.com/ch1/xhtmlhelloworld.html
</html>
 XHTML
• <!DOCTYPE> is mandatory

• The xmlns attribute in <html> is mandatory

• <html>, <head>, <title>, and <body> are
mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
XHTML Rules
• XHTML Elements Must be in Lowercase.
XHTML is case sensitive
XHTML Rules
• XHTML Attribute Names Must be in
Lowercase

<img src="test.gif">

<img SRC="test.gif">

<IMG src="test.gif">.
XHTML Rules
• (X)HTML Follows a Content Model

<ul>

<p> What a simple way to break the content

model! </p>
</ul>

• The <ul> tag is only supposed to contain <li> tags.

The <p>
• tag is not really appropriate in this context. Much
XHTML Rules
• XHTML Elements Must Always be
Closed
XHTML Rules
• An XHTML document must have an XHTML <!DOCTYPE>
declaration.
• XHTML Elements Must be Properly Nested

• Correct: tags are properly nested

• Wrong: tags are not nested correctly…

 XHTML Rules
• XHTML Attribute Values Must be
Quoted

<img src="robot.gif" height="10" width="10" alt="robot" />

<img src=robot.gif height="10" width="10" alt="robot">

XHTML Rules
• (X)HTML Is Sensitive to a Single Whitespace
Character
• (X)HTML does treat whitespace characters differently
<strong>T e s t o f s p a c e s</strong><br>

<strong>T e s t o f s p a c e s </strong><br>
<strong>T
e s
t o f s p a c e s</strong><br>
all the spaces, tabs, and returns are collapsed to a
single element:

If more spaces are required, it is possible to use the nonbreaking space

entity, or &nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Look, I'm spaced out!

XHTML Rules
• XHTML Empty Elements Must Always be
Closed
XHTML Rules
• Browsers Ignore Unknown Attributes and Elements

<bogus>this text will display on screen

</bogus>
<p id="myPara" obviouslybadattribute="TRUE">
will also render fine.
</p>
XHTML Rules
• Unused Elements May Minimize
Eg:
<p></p><p></p><p></p>
• does this produce numerous blank lines? No,
since the browser minimizes the empty p
elements.

• Some HTML editors output nonsense markup

such as to deal with this.
• <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

If this looks like misused markup to you, you’re

right!
XHTML Rules

Entities Should Be Used for Special Characters

• Instead of <, use &lt; or the numeric equivalent &#60;.

• Instead of >, use &gt; or &#62

• ampersand character &amp; or &#38;

• Yen symbol (¥), you would use &yen; or &#165

Why XHTML? When HTML is there...
• XHTML was developed to make HTML more extensible
and flexible to work with other data formats (such as
XML).

• In addition, browsers ignore errors in HTML pages, and

try to display the website even if it has some errors in
the markup. So XHTML comes with a much
stricter error handling.

•Code looks better.

•Code is easier to grasp.
•Code validators work slightly better on it.
•The risk of dumb syntax errors is lowered.
 Major Themes of (X)HTML
Logical and Physical Markup

Physical tag:
• Provides a visual appearance to the text.
• to make pages look a particular way
• they are designed to provide certain instructions
regarding the display of enclosed text

<b>, this tag will make the text bold.

<i>, this tag will make the font style of the text
italic.
So physical tags are simple and straightforward tags
 Major Themes of (X)HTML
Logical and Physical Markup

Logical tag:
• to specify the structure or meaning of content
• Adds some logical or semantic value to the text.
• They are designed to mention the meaning of the
enclosed text
<strong></strong> tag. This “strong” tag implies
that the text is of great importance.
<em>This is emphasized text</em>
<kbd>This is keyboard text</kbd>
 What are Semantic Elements?
• A semantic element clearly describes its meaning to both the
browser and the developer.

• Examples of non-semantic elements:

• <div> and <span>
• - Tells nothing about its content.

• Examples of semantic elements:

• <form>,
• <table>, and
• <article> - <nav>,

Clearly defines its content.

 What are Semantic Elements?
• A semantic element clearly describes its meaning to both the
browser and the developer.

• Examples of semantic elements:

• <form>,
• <table>, and
• <article> - <nav>,

Clearly defines its content.

 Semantic Elements
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding
the conservation, research and restoration of the
environment, formerly named the World Wildlife Fund. WWF
was founded in 1961.</p>
</section>

<p>Do not forget to buy <mark>milk</mark> today.</p>

<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
 Semantic Elements
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google,
released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
Myths and
Misconceptions
About
HTML and XHTML
Myths and Misconceptions About HTML and
XHTML
Misconception: HTML Is a Programming Language
• HTML is unlike programming in that it does not specify logic.
It specifies the structure of a document.

Misconception: XHTML Is the Only Future

• XHTML still has yet to make much in-roads in the widespread
building of Web pages. Most documents are not authored in
XHTML, and many of those that are, are done incorrectly.

Misconception: XHTML Is Dead

• The potential rise of HTML5 does not spell the end of XHTML.
XHTML’s
future is bright for those who build well-formed, valid markup
documents.

misconception is incorrect thinking or flawed understanding

Myth is something that has no logical explanation. No one knows the origin of it.
Myths and Misconceptions About HTML and
XHTML
Myth: (X)HTML Is the Most Important Technology Needed to Create Web Pages
• You need to know a lot more than markup to build useful Web pages.
There is a tremendous amount to know in the field of Web design
and development, including information architecture, visual
design, client- and server-side programming, marketing and
search engines, Web servers and delivery, and much, much more.

Myth: Traditional HTML Is Going Away

• HTML is the foundation of the Web; with literally billions of pages in
existence, not every document is going to be upgraded anytime
soon. The “legacy” Web will continue for years, and traditional
nonstandardized HTML will always be lurking around underneath
even the most advanced Web page years from now.

Myth: Someday Standards Will Alleviate All Our Problems

• Standards likely won’t fix everything. From varying
interpretations of standards, proprietary additions, and plain old
bugs, there is likely never going to be a day where Web
development, even at the level of (X)HTML markup, doesn’t have its
quirks and oddities.
 The Future of Markup—Two Paths?
1.XHTML: Web Page Markup XML Style
• A new version of HTML called XHTML became a W3C
recommendation in January 2000.
• A strictly XHTML-conforming browser shouldn’t render a page
at all if it doesn’t conform to the standard, though this is
highly unlikely to happen because browsers resort to a
backward-compatibility

2.HTML5: Back to the Future

• Starting in 2004, a group of well-known organizations and
individuals got together to form a standards body called
the Web Hypertext Application Technology Working Group, or
WHATWG (www.whatwg.org), whose goal was to produce a new
version of HTML.

• The aim was to create a new, rich future for Web

applications that include HTML as a foundation element

• HTML5 is meant to represent a new version of HTML along

the HTML 4 path. The emerging specification also suggests
that it will be a replacement for XHTML
 Validation
• A DTD is a Document Type Definition.
•ADTD defines the actual elements, attributes, and element
relationships that are valid in documents.
• Process of checking whether a document conforms to the
rules of the DTD is called validation.
• the document is syntactically correct - that all tags used are
part of a
particular specification and are being used correctly.
• To validate a document is simply to use an online service
such as the W3C Markup Validation Service, at

• .
Sample Questions on module 1
1. Distinguish between static and dynamic webpages.
2. Explain the Document Structure of HTML 4.0.
3. Explain the Document Structure of XHTML
4. What is HTML? Explain the Document Structure of HTML5.
5. List and explain the elements of the Document Head. Or
explain the following document head tags 1)title 2)meta 3)link
4)script
5)style 6)base
6. What is XHTML? Illustrate the rules of XHTML.
7. What are physical and logical tags?
8. Explain the myths and misconceptions About HTML and XHTML.
9. What do you mean by DTD and validation of document?
10. Explain the following tags with an example
1)<p> 2)h1,h6 3)div 4)ul, ol 5)dl,dt,dd 6)pre 7)hr
8)blockquote
9)Table 10)script 11)ins 12)del 13)<!---- >