Introduction to Web Programming BPLCK205A
MODULE 1
TRADITIONAL HTML AND XHTML
1.1 First Look at HTML and XHTML
In the case of HTML, markup instructions found within a Web page relay the structure
of the document to the browser software.
Ex: if you want to emphasize a portion of text, you enclose it within the tags <em>
and </em>, as shown here:
<em> This is important text! </em>
Markup elements are made up of a start tag, such as <strong>, and an end tag, which
is indicated by a slash within the tag, such as </strong>.
Under traditional HTML (not XHTML), the close tag for some elements is optional
because their closure can be inferred.
To insert a line break, use a single <br> tag, which represents the empty br element,
because it doesn’t enclose any content and thus has no corresponding close tag:
The start tag of an element might contain attributes that modify the meaning of the tag.
Ex, in HTML, the simple inclusion of the noshade attribute in an <hr> tag, as shown
here: <hr noshade> indicates that there should be no shading applied to this
1 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
horizontal rule.
Under XHTML, such style attributes are not allowed, because all attributes must have
a value, so instead you have to use syntax like this:
<hr noshade="noshade" />
As the preceding example shows, attributes may require values, which are specified
with an equal sign; these values should be enclosed within double or single quotes.
For example, using standard HTML syntax,
<img src="[Link]" alt="Angus-Black ScottishTerrier" height="100“ width="100">
Specifies four attributes for this <img> tag that are used to provide more
information about the use of the included image.
1.2. Hello HTML and XHTML World
First complete example written in strict HTML4 is as shown below:
2 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
A simple modification of the initial <!DOCTYPE> line is really all that is necessary to make
this an HTML5 example,
ONLINE [Link]
In the case of XHTML, which is a form of HTML that is based upon the syntax
rules of XML
Once your browser reads the file, it should render a page like the one shown here:
3 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The <!DOCTYPE> statement, which indicates the particular version of HTML or
XHTML being used in the document. The first example uses the strict 4.01 specification,
the second uses a reduced form for HTML5 and the final example uses the XHTML 1.0
strict specification.
The <html>, <head>, and <body> tag pairs are used to specify the general structure of
the document. The required inclusion of the xmlns attribute in the <html> tag is a small
difference required by XHTML.
The <meta> tag used in the examples indicates the MIME type of the document and the
character set in use. Notice that in the XHTML example, the element has a trailing slash
to indicate that it is an empty element.
The <title> and </title> tag pair specifies the title of the document, which generally
appears in the title bar of the Web browser.
A comment is specified by <!-- -->, allowing page authors to provide notes for future
reference.
The <h1> and </h1> header tag pair indicates a headline specifying some important
information.
The <hr> tag, which has a self-identifying end tag (<hr />) under XHTML, inserts a
horizontal rule, or bar, across the screen.
4 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The <p> and </p> paragraph tag pair indicates a paragraph of text.
A special character is inserted using a named entity (♥), which in this case
inserts a heart dingbat character into the text.
The <em> and </em> tag pair surrounds a small piece of text to emphasize which a
browser typically renders in italics
1.3. HTML and XHTML: Version History
5 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
1.4. HTML and XHTML DTDs: The Specifications Up Close
All (X)HTML documents should follow a formal structure defined by the World Wide Web
Consortium (W3C; [Link]), which is the primary organization that defines Web
standards.
Traditionally, the W3C defined HTML as an application of the Standard Generalized
Markup Language (SGML). SGML is a technology used to define markup languages by
specifying the allowed document structure in the form of a document type definition (DTD).
A DTD indicates the syntax that can be used for the various elements of a language such as
HTML
6 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The first line is a comment indicating what is below it. The second line defines the P
element, indicating that it has a start tag (<P>), as shown by the dash, and an optional close
tag (</P>), as indicated by the O.
The type of content that is allowed to be placed within a P element is defined by the entity
%inline, which acts here as a shorthand for various other elements and content.
This idea of only allowing some types of elements within other elements is called the
content model.
The final line defines the attributes for a <P> tag as indicated by the entity %attrs which
then expands to a number of entities like %core, %i18n, and %core events which finally
expand into a variety of attributes like id, class, style, title, lang, dir, onclick, ondblclick,
and many more.
1.5. Document Type Statements and Language Versions
(X)HTML documents should begin with a <!DOCTYPE> declaration. This statement
identifies the type of markup that is supposedly used in a document. For example,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
indicates that we are using the transitional variation of HTML 4.01 that starts with a root
element html. In other words, an <html> tag will serve as the ultimate parent of all the
content and elements within this document.
A <!DOCTYPE> declaration might get a bit more specific and specify the URI (Uniform
Resource Identifier) of the DTD being used as shown here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
In the case of an XHTML document, the situation really isn’t much different:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
However, do note that the root html element here is lowercase, which hints at the
case sensitivity found in XHTML.
There are numerous doctype declarations that are found in HTML and XHTML documents, as
shown in Table 1-2.
7 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
1.6. (X)HTML Document Structure
In this graphical representation, the <!DOCTYPE> indicator,, shows the particular
version of HTML being used, in this case 4.01 Transitional.
Within a root html element, the basic structure of a document reveals two elements: the
head and the body.
The head element contains information and tags describing the document, such as its title,
while the body element houses the document itself, with associated markup required to
specify its structure.
HTML5 follows the same core structure
8 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
In The structure of an XHTML document is pretty much the same with the exception of
a different <!DOCTYPE> indicator and an xmlns (XML name space) attribute added to
the html tag so that it is possible to intermix XML more easily into the XHTML
document:
9 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
Alternatively, 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 frames.
Each frame in turn would reference another HTML/XHTML document containing either
a standard document, complete with <html>, <head>, and <body> tags, or perhaps yet
another framed document.
The <frameset> tag also should include a noframes element that provides a version of
the page for browsers that do not support frames. Within this element, a <body> tag
should be found for browsers that do not support frames.
10 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The structure of a non-framed (X)HTML document breaks out like so:
The Document Head-
The information in the head element of an (X)HTML is used to describe or augment
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 visual styling, defining
interactivity, setting the page title, and providing other useful information that
describes or controls the document.
11 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The title Element- A single title element is required in the head element and is used to
set the text to display in their title bar.
The value within a title is used in a browser’s history system, recorded when the page
is bookmarked.
In short, it is pretty important to have a syntactically correct, descriptive, and
appropriate page title. Thus, given
<title>Simple HTML Title Example</title>
When a title is not specified, most browsers display the URL path or filename instead:
<meta>: Specifying Content Type, Character Set, and More
A <meta> tag has a number of uses. For example, it can be used to specify values that are
equivalent to HTTP response headers.
For example, if you want to make sure that your MIME type and character set for an
English-based HTML document is set, you could use
Other Elements in the head- includes base, link, object, script, and style. Comments are
also allowed.
<base> A <base> tag specifies an absolute URL address that is used to provide server and
directory information to relative links.
<base href="[Link] >
12 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
<script> A <script> tag allows scripting language code to be either directly embedded
within
<script type="text/javascript">
alert("Hi from JavaScript!");
/* more code below */
</script>
<link> A <link> tag specifies a special relationship between the current document and
another document. Most commonly, it is used to specify a style sheet used by the document
<link rel="stylesheet" media="screen“ href="[Link]" type="text/css" >
<object> An <object> tag allows programs and other binary objects to be directly embedded
in a Web page.
<style> A <style> tag is used to enclose document-wide style specifications, typically in
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>
Comments Finally, comments are often found in the head of a document. a comment
starts with <!-- and ends with --> and may encompass many lines:
<!-- Hi I am a comment -->
<!-- Author: Thomas A. Powell Book: HTML: The Complete Reference
Edition: 5 -->
<!------ THIS ISN'T A SYNTACTICALLY CORRECT COMMENT!---->
The complete syntax of the markup allowed in the head element under strict (X)HTML is
shown here:
13 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The Document Body
The body of a document is delimited by <body> and </body>.
Only one body element can appear per document.
Within the body of a Web document is a variety of types of elements.
For example, blocklevel elements define structural content blocks such as paragraphs (p) or
headings (h1-h6).
Block-level elements generally introduce line breaks visually. Special forms of blocks, such
as unordered lists (ul), can be used to create lists of information.
Within nonempty blocks, inline elements are found. There are numerous inline elements,
such as bold (b), italic (i), strong (strong), emphasis (em).
14 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The full syntax of the elements allowed in the body element is a bit more involved than the
full syntax of the head. This diagram shows what is directly included in the body:
1.7. Browsers and (X)HTML
When a browser reads a marked-up document, such as the “hello world” ex it builds a parse
tree to interpret the structure of the document, like this:
15 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
16 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
The parse trees, often called DOM (Document Object Model) trees, are the browsers’
interpretation of the markup provided and are integral to determining how to render the
page visually using both default (X)HTML style and any CSS attached.
JavaScript will also use this parse tree when scripts attempt to manipulate the
document. The parse tree serves as the skeleton of the page.
1.8. The Rules of (X)HTML
Some of the more important aspects of (X)HTML syntax that are necessary to understand
to produce well-formed markup:
1. HTML Is Not Case Sensitive, XHTML Is
2. Attribute Values May Be Case Sensitive
3. (X)HTML Is Sensitive to a Single Whitespace Character
4. (X)HTML Follows a Content Model
5. Elements Should Have Close Tags
6. Unless Empty Unused Elements May Minimize
7. Elements Should Nest
8. Attributes Should Be Quoted
9. Entities Should Be Used for Special Characters
10. Browsers Ignore Unknown Attributes and Elements
1. HTML Is Not Case Sensitive, XHTML Is
These markup examples are all equivalent under traditional HTML:
<B>Go boldly</B>
<B>Go boldly</b>
<b>Go boldly</B>
<b>Go boldly</b>
2. Attribute Values May Be Case Sensitive
Consider,
<img SRC="[Link]">
17 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
<IMG src="[Link]">.
Under traditional HTML, these are equivalent because the <img> tag and the src
attribute are not case sensitive.
3. (X)HTML Is Sensitive to a Single Whitespace Character
Any white space between characters displays as a single space. This includes all tabs,
line breaks, and carriage returns
4. (X)HTML Follows a Content Model
All forms of markup support a content model that specifies that certain elements are
supposed to occur only within other elements. For example, markup like this
5. Elements Should Have Close Tags Unless Empty
Under traditional HTML, some elements have optional close tags. For example, both of
the paragraphs here are allowed, although the second one is better:
<p>This isn't closed
<p>This is</p>
A few elements, like the horizontal rule (hr) and line break (br), do not have close tags
because they do not enclose any content.
6. Unused Elements May Minimize
Sometimes tags may not appear to have any effect in a document.
Consider, for example, the <p> tag, which specifies a paragraph.
18 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
As a block tag, it induces a return by default, but when used repeatedly, like so,
<p></p><p></p><p></p>
Does this produce numerous blank lines? No, since the browser minimizes the empty p
elements.
7. Elements Should Nest
A simple rule states that tags should nest, not cross;
Thus <b><i>is in error as tags cross</b></i>
<b><i>is not since tags nest</i></b>
and thus is syntactically correct.
All forms of markup, traditional HTML, XHTML, and HTML5, follow this rule, and
while crossing tags may seem harmless, it does introduce some ambiguity in parse
trees.
To be a well-formed markup, proper nesting is mandatory.
8. Attributes Should Be Quoted
Under traditional HTML as well as under HTML5, simple attribute values do not need to
be quoted. If the attribute contains only alphanumeric content, dashes, and periods, then the
quotes can safely be removed; so would work fine in most browsers and would validate.
<img src=[Link] height=10 width=10 alt=robot>
However, the lack of quotes can lead to trouble, especially when scripting is involved.
Quotes should be used under transitional markup forms and are required under strict
forms like XHTML; so,
<img src="[Link]" height="10" width="10" alt="robot" />
would be the correct form of the tag.
9. Entities Should Be Used for Special Characters
Markup parsers are sensitive to special characters used for the markup itself, like < and >.
Instead of writing these potentially parse-dangerous characters in the document, they should
be escaped out using a character entity.
For example, instead of <, use < or the numeric equivalent
< Instead of >, use > or >.
19 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
10. Browsers Ignore Unknown Attributes and Elements
For better or worse, keep in mind that browsers will ignore unknown elements and
attributes; so,
<bogus> this text will display on screen </bogus>
1.9. Major Themes of (X)HTML
The major themes addressed deep issues that will encounter over:
1. Logical and Physical
2. Standards vs. Practice
3. Myths and Misconceptions About HTML and XHTML
1. Logical and Physical
Physical markup refers to using a markup language such as (X)HTML to make pages
look a particular way.
Logical markup refers to using (X)HTML to specify the structure or meaning of content
while using another technology, such as CSS, to designate the look of the page.
Physical markup is obvious; if you want to highlight something that is important to the
reader, you might embolden it by enclosing it within a <b> tag:
<b>This is important!</b>
This simple approach fits with the WYSIWYG (what you see is what you get) world of
programs such as Microsoft Word.
Logical markup is a little less obvious; to indicate the importance of the phrase, it should
be enclosed in the logical strong element:
<strong>This is important.</strong>Whether you subscribe to the physical (specific) or
logical (general) viewpoint, traditional HTML is neither purely physical nor purely
logical, at least not yet.
In other words, currently used HTML elements come in both flavors, physical and
logical, though users nearly always think of them as physical.
2. Standards vs. Practice
Just because a standard is defined doesn’t necessarily mean that it will be embraced.
Many Web developers simply do not know or care about standards.
20 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
As long as their page looks right in their favorite browser, they are happy and will
continue to go on abusing HTML tags like <table> and using various tricks and
proprietary elements.
Without standards, the modern world wouldn’t work well.
The Web needs standards, but standards have to acknowledge what people actually
do.
Web standards and development practices provide an interesting study of the
difference between what theorists say and what people want and do.
HTML5 seems a step in the right direction. The specification acknowledges that, for
better or worse, traditional HTML practices are here for now, and thus attempts to
make them solid while continuing to move technology forward and encourage correct
usage.
3. Myths and Misconceptions About HTML and XHTML
Misconception: WYSIWYG Works on the Web
(X)HTML isn’t a specific, screen- or printer-precise formatting language like PostScript.
Many people struggle with HTML on a daily basis, trying to create perfect layouts using
(X)HTML elements inappropriately or using images to make up for HTML’s lack of
screen and font-handling features.
Misconception: HTML Is a Programming Language
Many people think that making HTML pages is similar to programming. However,
HTML is unlike programming in that it does not specify logic. It specifies the structure of
a document.
Misconception: XHTML Is the Only Future
Approaching its tenth birthday, XHTML still has yet to make much inroads in the
widespread building of Web pages. Sorry to say, most documents are not authored in
XHTML, and many of those that are, are done incorrectly.
Misconception: XHTML Is Dead
Although XHTML hasn’t taken Web development by storm, the potential rise of HTML5
does not spell the end of XHTML. In fact, you can write XML-style markup in HTML,
which most developers dub XHTML 5.
21 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
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 non standardized 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 are important. Standards should help. 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.
Myth: Hand-Coding of HTML Will Continue Indefinitely
Although some people will continue to craft pages in a manner similar to mechanical
typesetting, as Web editors improve and produce standard markup perfectly, the need to
hand-tweak HTML documents will diminish.
Myth: (X)HTML Is the Most Important Technology Needed to Create Web Pages
Whereas (X)HTML is the basis for Web pages, you need to know a lot more than markup
to build useful Web pages (unless the page is very simple).
However, don’t underestimate markup, because it can become a bit of a challenge itself.
Based on the simple examples presented in this chapter, you might surmise that mastering
Web page creation is merely a matter of learning the multitude of markup tags, such as
<h1>, <p>, <em>, and so on, that specify the structure of Web documents to browsers.
1.10. The Future of Markup—Two Paths?
(i) XHTML: Web Page Markup XML Style
To demonstrate, let’s reformulate the [Link] example slightly by adding
an XML directive and forcing the MIME type to be XML.
22 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
If a browser really believes it is getting XML, it will enforce parsing rules and force well-
formedness.
Regardless of whether rules are enforced or not, without Internet Explorer rendering
markup visually, it would appear that we have to deliver XHTML as standard HTML.
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, yet it
ends up supporting most of the syntax that end users actually use, particularly self-identifying
empty elements (for example, <br />).
23 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru
Introduction to Web Programming BPLCK205A
ii) HTML5: Back to the Future
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
([Link]), whose goal was to produce a new version of HTML.
The exact reasons and motivations for this effort seem to vary depending on Web standards
body, need for innovation, or any one of many other reasons—but, whatever the case, the aim
was to create a new, rich future for Web applications that include HTML as a foundation
element.
Aspects of the emerging specification such as the canvas element have already shown up in
browsers like Safari and Firefox, so by 2008, the efforts of this group were rolled into the W3C
and drafts began to emerge.
Whether this makes HTML5 become official or likely to be fully adopted is obviously
somewhat at the mercy of the browser vendors and the market, but clearly another very likely
path for the future of markup goes through HTML5.
24 Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT, Bengaluru