Unit 6 : Page

Presentation

Radar Networks 1
Creating clean and Simple Pages

Radar Networks 2
Producing Valid HTML

?
Why do we
have so
much invalid
HTML?

Radar Networks 3
Producing Valid HTML

• Evenif HTML is not valid, the browser will not complain and
will display something based on some heuristic.

Radar Networks 4
Producing Valid HTML

?
What is the
motivation
for writing
valid HTML?

Radar Networks 5
Producing Valid HTML

• In case of Invalid HTML , browsers are on their own in how

to represent invalid HTML.
• Differences between browsers can be seen with invalid
HTML much more than valid HTML.
• So valid HTML narrow downs the gap between different
browsers.

Radar Networks 6
In Web 2.0 world

• Browser renders the page the way we want.

• We are likely to send to the browser Javascript code that
will modify what is displayed by the browser as the user
interacts with the page.
• We do so in Javascript by modifying a tree of objects
called the Document object model(DOM)

What is DOM?

Radar Networks 7
Producing Valid HTML

• DOM is a tree of objects

That represent the structure
of the page.

Radar Networks 8
 Consider the snippet in HTML:

<ol>
<li> Page Presentation</li>
<li> Javascript and AJAX</li>
</ol>
On browser it will look :
1. Page Presentation
2. Javascript and AJAX

Radar Networks 9
What is the difference in the previous code and this
code?
<ol>
<p><li> Page Presentation</li></p>
<p> <li> Javascript and AJAX</li></p>
</ol>
We have made each list item a paragraph.

Can you see the error?

Radar Networks 10
Producing Valid HTML

Yes, the paragraph should go inside the <li> element,

instead of going around it.

Now, consider that you have a button on the page that

moves second item in the list to the first position

Can you write JavaScript for

this?

Radar Networks 11
 Producing Valid HTML
<ol>
<li id=“first”> Page Presentation</li>
<li id=“second”> Javascript and AJAX</li>
</ol>
<script type=“text/javascript”>
function invert(){
var first=document.getElementById(“first”);
var
second=document.getElementById(“second”);
var parent=first.parentNode;
parent.insertBefore(second,first);
}
</script>
<button onclick=“invert()”>Invert</button>
Radar Networks 12
Will the same code work if we add a <p>
element around <li> and move the ID to
the <p> element?

<ol>
<p id=“first”> <li>Page Presentation</li></p>
<p id=“second”><li> Javascript and
AJAX</li></p>
</ol>

Code does not work. Because you

wanted HTML to create DOM that
looks like:

Radar Networks 13
DOM for the code should be

Ol
p id=“first”
li
page presentation

p id=“second”
li
JavaScript and AJAX

Radar Networks 14
Internet Explorer and Firefox create DOM that looks
like

Ol
p id=“first”
li
page presentation When you move the
element with ID “second”
before the element with ID
“first” you are moving an
p id=“first” empty paragraph before
another empty paragraph.
li
JavaScript and AJAX

Radar Networks 15
Using Cascading style Sheets

• Write CSS to get booktitle in the brown color and in italic.

<font color=“marron”><i>Professional Web 2.0
Programming</i></font>
• Instead, you might want to write
<span class=“book-title”>Professional Web 2.0
Programming></span>

Define the CSS book-title

class.

Radar Networks 16
book-title class

.book-title{
font-style : italic;
color : maroon;}

Defining CSS class book-title, declaration of the

font style and color are moved out of your
HTML.HTML is simpler but richer as the name of
the style book-title adds semantic to the string
Professional Web 2.0 Programming.

Radar Networks 17
Choosing appropriate Elements

• Choosing the appropriate HTML elements will make your

page easier to understand, not only by you or other web
developers but also by other softwares like search
engines, screen readers or browsers on mobile devices.

Radar Networks 18
Choosing appropriate Elements

Introduction : Web 2.0 Why?

Before We Start…The Hello World of Web 2.0
Client side
Page Presentation
JavaScript and Ajax
Between Clients and Servers
HTTP and URIs
XML and alternatives

Radar Networks 19
Avoid picking HTML elements based on
how you want the page to be rendered.
Introduction : Web 2.0 Why?<br>
Before We Start…The Hello World of Web 2.0<br>
Client side
<blockquote>
Page Presentation<br>
JavaScript and Ajax
</blockquote>
Between Clients and Servers
<blockquote>
HTTP and URIs<br>
XML and alternatives
<blockquote>

Radar Networks 20
Another alternative is to consider CSS in HTML

<div class=“chapter”>Introduction : Web 2.0 Why?</div>

<div class=“chapter”> Before We Start…The Hello World of
Web 2.0 </div>
<div class=“chapter”> Client side</div>
<div class=“section”> Page Presentation</div>
<div class=“section”> JavaScript and Ajax</div>
<div class=“chapter”> Between Clients and Servers</div>
<div class=“section”> HTTP and URIs</div>
<div class=“section”> XML and alternatives</div>

Radar Networks 21
 Which was the most
appropriate construct in
HTML?

You have a table of contents

organized in a hierarchical way so
you could use HTML lists and lists
within lists to represent hierarchy.

Radar Networks 22
Ordered lists look like :

<ol class=“toc”>
<li>Introduction : Web 2.0 Why?</li>
<li>Before We Start…The Hello World of Web 2.0</li>
<li>
Client side
<ol>
<li>Page Presentation</li>
<li>JavaScript and Ajax</li>
</ol>
</li>
<li>
Between Clients and Servers
<ol>
<li>HTTP and URIs</li>
<li>XML and alternatives</li>
</ol>
</li>
</ol>

Radar Networks 23
From HTML to XHTML

• The W3C describes XHTML as the successor of HTML.

• XHTML 1.0 is a simple evolution of HTML and that XHTML
1.1 is a minor revision of XHTML 1.0

Radar Networks 24
XHTML 1.0 comes in 3 flavors

XHTML 1.0 • It is HTML 4.01 but using XML

transitional syntax.

XHTML 1.0 • It is XHTML 1.0 transitional and

removes all the markup
strict associated with style.

XHTML 1.0 • XHTML 1.0 frameset is a special

frameset flavor that supports frames.

Radar Networks 25
 To declare that your page is XHTML 1.0
transitional put the following document
type declaration in the beginning of the
document

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional //EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd>

Radar Networks 26
XHTML 1.1

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.1 Transitional //EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>

Radar Networks 27
Why use XHTML?

• XHTML is easier to manipulate

• XHTML encourages the use of CSS
• XHTML works better on mobile devices
• XHTML is Extensible.

Radar Networks 28
Differences from HTML

• XHTML is an XML application

• Empty elements
In HTML <br>
In XHTML 1.0 <br /> or <br></br>
• IDs and Names
• XML declaration and Character Encoding
<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd>
<html xmlns=“http://www.w3.org/1999/xhtml”>
Character encoding can be specified with the Content-type HTTP header:
Content-type: text/html;charset=UTF-8
Character encoding can be specified in the meta tag
<meta http-equiv=“Content-type” content=“text/html; charset=UTF-
8”/>
Radar Networks 29
 The Document Object Model – structured as a
tree

<?xml version=“1.0” encoding=“ISO-8859-1”?>

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>DOM example</title>
</head>
<body>
<h1> Page title</h1>
<p>
some <i>very</i> unimportant text.
</p>
</body>
</html>

Radar Networks 30
(Document)
html(DocumentType)
html (Element)

(Text)
head (Element)
(Text)

title (Element)
(Text)
(Text)

(Text)
body (Element)
(Text)
h1 (Element)
(text)
(Text)
p (Element)
(Text)
I (Element)

(Text)
(Text)
(Text)
Radar Networks 31
Observation

• The document node is a very special node in this tree. It is

the root of the document and is the only node of the type
Document.
• Most of the nodes in the tree are either of type Element or
Text and directly map to the HTML structure.
• Because of document type declaration in XHTML, the first
child of the root element is a node of type DocumentType.
• There are a number of text nodes interleaved between
elements that contain just whitespace.

Radar Networks 32
DOM API Level

• Level 1
• When browsers were already providing a DOM-like API.
• Level 2
• most of the API is supported by all the mainstream browsers, except
Internet Explorer which implements a smaller but still significant
subset of the specification.
• Level 3
• Starting with level 2, the DOM specification has been split into a
number of documents: one specification for core components, one for
HTML-specific aspects of the API, one dealing with events, and so on.
Only a subset of those has been published by the W3C as
recommendations, while others are still works in progress. Most
browsers only support a minimal subset of level 3, and Internet
Explorer does not support level 3 at all. For those reasons, at this
point most web developers consider that it is still too early to use the
DOM level
Radar Networks 33
DOM API Overview

• The entry point to the DOM is the document object,

available to the JavaScript code as a global variable. The
document object is of type Document and corresponds to
document node.
• From the document object, recursively navigate the DOM
using attributes available on all nodes: firstChild, lastChild,
nextSibling, previousSibling, childNodes, and parentNode.
Their semantics is clear from their name.They all return a
node, except childNodes, which returns a node list.

Radar Networks 34
DOM API Overview

• The DOM node list is exposed to JavaScript as an array.

html=document.childNodes[1]; //the html element
head=html.firstChild.nextSibling; // The head element
document.parentNode; // Returns null
head.parentNode; // Return the html element
Navigating the DOM this way to access a node that is deep
down in the hierarchy can be pretty lengthy. To make this
easier, the document object exposes two methods :
getElementById() and getElementByTagName().

Radar Networks 35
DOM API Overview

• Check the following calls – getElementByTagName()

document.getElementByTagName(“p”); //returns a list with
1 node
document.getElementByTagName(“p”).length;
//returns 1
document.getElementByTagName(“p”)[0]; //return the p
element

document.getElementByTagName(“P”); //an empty list on

FireFox
The following expression will be true on any browser:
document.getElementByTagName(“p”)[0].tagName.toLowerCase()==“p”
• Element nodes have a tagName property, which returns
the element name. Text nodes have a nodeValue
property, which returns the string value of the node.
Radar Networks 36
DOM API Overview

• A number of methods are available on the document

object to create new nodes, in particular createElement()
and createTextNode(). Newly created nodes can be
inserted in the DOM with appendChild(), insertBefore()
and replaceChild(). Existing nodes can be removed with
removeChild().

Radar Networks 37
Write code to get following output:

Page title
Please note:

Some very unimportant text.

Radar Networks 38
Code

unimportantText = document.getElementsByTagName(“p”)[0];
pleaseNote = document.createElement(“p”);
pleaseNote.appendChild(document.createTextNode(“Please note:”));
unimportantText.parentNode.insertBefore(pleaseNote,unimportantText
);

Radar Networks 39
Cascading Style Sheets - Tabs

<ul id=“tabnav”>
<li><a href=“#” class=“active”>Lorem</a></li>
<li><a href=“#”>Ipsum</a></li>
<li><a href=“#>Dolor</a></li>
<li><a href=“#”>Sit</a></li>
</ul>

Lorem Ipsum Dolor Sit

Radar Networks 40
 Cascading Style Sheets
#tabnav{
height : 20px;
margin : 0;
padding-left : 10px;
background : url(css-tabs.gif) repeat-x bottom;
}
css-tabs.gif is a 1x1 pixel image with the color of the line below the tabs. It
is used to draw that line without requiring any additional markup to be
used in that page.

CSS is used here not only to add styling information but also to add semantic to basic
markup, in this case HTML lists. Using a semantic markup is extremely flexible as opposed
to, say, adding a <tab> element to the HTML language.

Radar Networks 41
Tools

• The DOM inspector for Firefox

• The Web Developer Toolbar for FireFox
• Internet Explorer Developer Toolbar
• DevBoi for Firefox

Radar Networks 42
End of Unit 6

Radar Networks 43