Professional Documents
Culture Documents
Semantic Web For Begineering
Semantic Web For Begineering
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
Radar Networks 6
In Web 2.0 world
What is DOM?
Radar Networks 7
Producing Valid HTML
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.
Radar Networks 10
Producing Valid HTML
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>
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
Radar Networks 16
book-title class
.book-title{
font-style : italic;
color : maroon;}
Radar Networks 17
Choosing appropriate Elements
Radar Networks 18
Choosing appropriate Elements
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
Radar Networks 21
Which was the most
appropriate construct in
HTML?
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
Radar Networks 24
XHTML 1.0 comes in 3 flavors
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?
Radar Networks 28
Differences from 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
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
Radar Networks 34
DOM API Overview
Radar Networks 35
DOM API Overview
Radar Networks 37
Write code to get following output:
Page title
Please note:
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>
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
Radar Networks 42
End of Unit 6
Radar Networks 43