0% found this document useful (0 votes)

26 views137 pages

ICT461 - 4 - HTML and XML

HTML AND XML

Uploaded by

miteinns

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

26 views137 pages

ICT461 - 4 - HTML and XML

HTML AND XML

Uploaded by

miteinns

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 137

MULUNGUSHI UNIVERSITY

Pursing frontiers of Knowledge

SCHOOL OF SCIENCE, ENGINEERING AND

TECHNOLOGY
ICT461 Web Systems and Technology

Lecture 4. HTML and XML

In this lecture you will learn . . .
• A very brief history of HTML

• The syntax of HTML

• Why semantic structure is so important for HTML

• How HTML documents are structured

• A tour of the main elements in HTML

• The semantic structure elements in HTML5

• Introduction to XML

• HTML is defined as a markup

language. A markup language
is simply a way of annotating a
document in such a way as to
make the annotations distinct
from the text being annotated.

• You may very well have been

the recipient of markup from
caring parents or concerned
teachers at various points in
your past
Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
HTML Markup Language
• At its simplest, markup is a way to indicate information about the content
that is distinct from the content.

• This “information about content” in HTML is implemented via tags (or more
formally, HTML elements, but more on that later).

• Since the initial HTML specification in 1991, HTML has gone through many
interesting changes worth understanding in brief.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Early HTML
• Initial implementation of HTML and HTTP between 1990 and 1991 by Tim
Berners-Lee and Robert Cailliau

• HTML’s formal codification by the World Wide Web Consortium (better known
as the W3C) between 1995 and 1997

• “browser wars” in the mid 1990s between Netscape Navigator and Microsoft
Internet Explorer motivated many new tags and features such as CSS and
JavaScript, but the development of new features happened quickly, and
interoperability between browsers became a major issue

• In 1998 the W3C froze the HTML specification at version 4.01

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
XHTML
• In the late 1990s the W3C developed o a new specification called XHTML
1.0, which was a version of HTML that used stricter XML

• The goal of XHTML with its strict rules was to make page rendering more
predictable by forcing web authors to create web pages without syntax
errors.

• To help web authors, two versions of XHTML were created:

– XHTML 1.0 Strict and
– XHTML 1.0 Transitional.

• Development on the XHTML 2.0 specification dragged on for many years

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
HTML5
• While the XHTML 2.0 specification was being developed, a small group of
developers at Opera and Mozilla formed the WHATWG (Web Hypertext Application
Technology Working Group).

• By 2009, the W3C stopped work on XHTML 2.0 and instead adopted the work done
by WHATWG and named it HTML5.

• There are three main aims to HTML5:

1. Specify unambiguously how browsers should deal with invalid markup.
2. Provide an open, nonproprietary programming framework (via JavaScript) for
creating rich web applications.
3. Be backward compatible with the existing web.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
HTML Syntax
• HTML documents are composed of content and HTML elements.

• An HTML element is identified in the HTML document by tags.

– A tag consists of the element name within angle brackets.
• The element name appears in both the opening tag and the closing tag.

• HTML elements can also contain attributes. An HTML attribute is a name=value

pair that provides more information about the element

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Empty Element
• An empty element does not contain any text content; instead, it is an
instruction to the browser to do something.

• Perhaps the most common empty element is <img>, the image element.

• In XHTML, empty elements had to be terminated by a trailing slash (as

shown in image). In HTML5, the trailing slash in empty elements is
optional.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Nesting HTML Elements
• Often an HTML element will contain other
HTML elements. In such a case, the
container element is said to be a parent
of the contained, or child, element.

• Any elements contained within the child

are said to be descendants of the parent
element; likewise, any given child
element may have a variety of
ancestors.

• This concept is called the Document Object

Model (DOM) formally, though for now we
will only refer to its hierarchical aspects.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Correct Nesting
• In order to properly construct this hierarchy of elements, your browser expects
each HTML nested element to be properly nested.

• A child’s ending tag must occur before its parent’s ending tag

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Semantic Markup
• HTML documents should only focus on the structure of the document

• Information about how the content should look is best left to CSS
(Cascading Style Sheets), a topic introduced in the next chapter

• As a consequence, beginning HTML authors are often counseled to create

semantic HTML documents.

• HTML document should not describe how to visually present content but
only describe its content’s structural semantics or meaning

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Semantic Markup Advantages
• Maintainability. Semantic markup is easier to update and change than
web pages that contain a great deal of presentation markup.

• Performance. Semantic web pages are typically quicker to author and

faster to download.

• Accessibility. Not all web users are able to view the content on web
pages. Users with sight disabilities experience the web using voice-reading
software.

• Search engine optimization. For many site owners, the most important
users of a website are the various search engine crawlers.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Structure of HTML Documents
• Figure 3.8 illustrates one of the simplest valid HTML5 documents you can
create.

The <title> element plays an important role in search engine optimization (SEO),
that is, improving a page’s rank (its position in the results page after a search) .

While each search engine uses different algorithms for determining a page’s rank,
the title (and the major headings) provides a key role in determining what a given
page is about.

As a result, be sure that a page’s title text briefly summarizes the document’s
content. As well, put the most important content first in the title. Most browsers
limit the length of the title that is displayed in the tab or window title to about 60
characters. Chapter 18 goes into far greater detail on SEO.

• Consider this more complete HTML5 document that includes structural

elements as well as some other common HTML elements.

• Let’s explore this

page in detail

• The DOCTYPE declaration tells the browser what type of document it is

about to process.

• It does not indicate what version of HTML is contained within the document

HTML5 does not require the use of the <html>, <head>, and <body>
elements. However, in XHTML they were required, and most web authors
continue to use them.
The <html> element is
sometimes called the root
element as it contains all
the other HTML elements
in the document. The
optional lang attribute tells
the browser the language
that is being used.

The head contains descriptive elements about the document, such as its title,
encoding, and any style sheets or JavaScript files it uses.

The body contains content (both HTML elements and regular text) that will be
displayed by the browser. The rest of this chapter and the next chapter will cover the
HTML that will appear within the body.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Quick Tour of HTML Elements
1. Headings. Describes the main structure of
document. There are six levels of headings.

2. Paragraphs. The basic unit of text in HTML.

As block-level elements, browsers typically
add newlines before and after the element.

3. Link. Hyperlinks are essential feature of all

web pages and can reference another page
or another location in same page.

4. Inline Text Elements. These do not change

the flow of text and provide more information
about text.

5. Image. Used to display an image by

specifying a filename or URL.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Quick Tour of HTML Elements (cont)
6. Unordered List. Used to display a bulleted list.
Within a list is a collection of list item elements.

7. Division. Container for text or other HTML

elements. Like paragraphs, they are also block-
level elements.

8. Horizontal Rule. Indicates a thematic break in the

text. Usually displayed as a horizontal line.

9. Character Entity. The mechanism for including

special symbols (such as ©) or characters that
have a reserved meaning in HTML.

10. Semantic Block Element. Special containers in

HTML5 for describing structural elements in a
document.

NOTE

Why does this look so awful? Plain HTML is just that . . . plain looking.

To make our pages look more stylish, you need to style the elements using
CSS, which you will learn in Chapters 4 and 7.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Headings
• HTML provides six levels of heading (h1 through h6)

• They are an essential way for document authors to show their readers the
structure of the document

• Headings are also used by the browser to create a document outline for
the page.

• Choose the heading level because it is appropriate semantically NOT

because of its default presentation (e.g., choosing <h3> because you want
your text to be bold and 16pt).

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Heading Styles
The browser has its own
default styling for each
heading level.

These are easily modified

and customized via CSS
(next chapter)

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Paragraphs and Divisions
• The <p> tag is a container. It can
contain HTML and other inline
HTML elements

• <div> is also a container element

The <div> element has no intrinsic
presentation or semantic value;

• <hr> element is used to add a

“break” between paragraphs or
<div> elements.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
HyperLinks
• Links are created using the <a> element (the “a” stands for anchor).

• A link has two main parts: the destination and the label.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Kinds of Links
• Links to external sites (or to individual resources, such as images or movies on an external site).

• Links to other pages or resources within the current site.

• Links to other places within the current page.

• Links to particular locations on another page (whether on the same site or on an external site).

• Links that are instructions to the browser to start the user’s email program.

• Links that are instructions to the browser to execute a JavaScript function.

• Links that are instructions to the mobile browser to make a phone call.

• Links that are instructions to other programs (e.g., Skype, FaceTime, FaceBook Messenger).

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Absolute and Relative URLs
When referencing a page or resource When referencing a resource that is
on an external site, a full absolute on the same server, you can use
URL reference is required relative referencing.

• Full URL with a protocol (typically, • If the URL does not include the
http:// or https://), the domain “http://” then the browser will
name, any paths, and the file request the current server for the
name of the desired resource. file.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Relative URLs
1. Same Directory To link to a file within the same folder, simply use the file
name.
2. Child Directory To link to a file within a subdirectory, use the name of the
subdirectory and a slash before the file name.
3. Grandchild/Descendant Directory To link to a file that is multiple
subdirectories below the current one, construct the full path by including each
subdirectory name (separated by slashes) before the file name.
4. Parent/Ancestor Directory Use “../” to reference a folder above the current
one. If trying to reference a file several levels above the current one, simply
string together multiple “../”.
5. Sibling Directory Use “../” to move up to the appropriate level, and then use
the same technique as for child or grandchild directories.
6. Root Reference In this approach, begin the reference with the root reference
(the “/”), and then use the same technique as for child or grandchild
directories.
See Table 3.1 for examples (p. 97)

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Inline Text Elements
• inline elements because they do not disrupt the flow of text (i.e., cause a line
break).

• HTML defines over 30 of these elements.

• Table 3.2 lists some of the most commonly used of these elements.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Common Text-Level Semantic Elements
• <a> Anchor used for hyperlinks. • <small> For displaying the fine-print,
that is, “nonvital” text, such as
• <abbr> An abbreviation copyright or legal notices
• <br> Line break • <span> The inline equivalent of the
<div> element. It is generally used to
• <cite> Citation (i.e., a reference to
mark text that will receive special
another work)
formatting using CSS
• <code> Used for displaying code, such
• <strong> For content that is strongly
as markup or programming code
important
• <em> Emphasis
• <time> For displaying time and date
• <mark> For displaying highlighted text data
Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Images
• Chapter 6 examines the different types of graphic file formats.

• Note the key attributes of the <img> element.

• Attributes such as title, width, and height are optional

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Character Entities
Character entities are special characters for symbols for which there is either
no easy way to type them via a keyboard or which have a reserved meaning
in HTML (for instance the “<” or “>” symbols).

• They can be used in an HTML document by using the entity name or the
entity number

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Entity Examples
Entity Name Entity Number Description

    Nonbreakable space.

< < Less than symbol (“<”).
> > Greater than symbol
(“>”).
© © The © copyright
symbol
€ € The € euro symbol.
™ ™ The ™ trademark
symbol.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Lists
• Ordered lists Collections of
items that have a set order
<ol> <li>
• Unordered Lists
Collections of items in no
particular order
<ul> <li>
• Description Lists
Collection of name and
description/definition pairs.
<dl> <dt>

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
HTML5 Semantic Structure
• So far, the main semantic
elements you have seen are
headings, paragraphs, lists,
some inline elements and the
semantic block element, the
division (i.e., <div> element).

• HTML5 semantic elements

allow to replace some of your
<div> sprawl with cleaner and
more self-explanatory
elements

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
HTML5 Semantic Structure Elements
• Header
• Nav
• Main
• Section
• Article
• Figure
• Figcaption
• Aside
• Footer
Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Using Semantic Elements
• HTML5 semantic elements do
not apply any special
presentation giving them great
flexibility.

• Article and section, for instance,

can be used many ways when
designing your website.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Figure and figcaption
The <figure> element can
be used not just for images
but for any type of
essential content that
could be moved to a
different location in the
page or document, and the
rest of the document would
still make sense.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Details and Summary
• The <details> and <summary>
elements provide a way of
semantically relating a summary and
a details.

• For browsers that support these

elements, accordion functionality is
included as well (thus no JavaScript
programming is required).

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Additional Semantic Elements
• The <blockquote> element is a way to indicate a quotation from another
source.
• The <address> element indicates that the enclosed HTML contains contact
information for a person or organization.

• Additional list in Table 3.2

XML Introduction

• XML is a portable, widely supported, open (i.e., nonproprietary) technology for data
storage and exchange

Copyright © 2021, 2018,

XML Basics
 XML permits document authors to create markup for virtually any type of information
▪ Can create entirely new markup languages that describe specific types of data, including mathematical formulas, chemical molecular
structures, music and recipes

 XML describes data in a way that human beings can understand and computers can process.
 An XML parser is responsible for identifying components of XML documents (typically files with the
.xml extension) and then storing those components in a data structure for manipulation

 An XML document can reference a Document Type Definition (DTD) or schema that defines the
document’s proper structure

 An XML document that conforms to a DTD/schema (i.e., has the appropriate structure) is valid
 If an XML parser (validating or non-validating) can process an XML document successfully, that
XML document is well-formed

Copyright © 2021, 2018,

©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
46

Structuring Data
• An XML document begins with an optional XML declaration, which identifies the
document as an XML document. The version attribute specifies the version of XML
syntax used in the document.

• XML comments begin with

• An XML document contains text that represents its content (i.e., data) and elements that
specify its structure. XML documents delimit an element with start and end tags

• The root element of an XML document encompasses all its other elements

• XML element names can be of any length and can contain letters, digits, underscores,
hyphens and periods
▪ Must begin with either a letter or an underscore, and they should not begin with “xml” in any combination of uppercase
and lowercase letters, as this is reserved for use in the XML standards

Copyright © 2021, 2018,

Structuring Data (Cont.)

• When a user loads an XML document in a browser, a parser parses the
document, and the browser uses a style sheet to format the data for
display
• Google Chrome places a down arrow and right arrow next to every
container element; they’re not part of the XML document.
▪ down arrow indicates that the browser is displaying the container element’s child
elements
▪ clicking the right arrow next to an element expands that element

Copyright © 2021, 2018,

©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
49

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
50

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
51

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
52

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
53

Namespaces
• XML namespaces provide a means for document authors to prevent naming collisions
• Each namespace prefix is bound to a uniform resource identifier (URI) that uniquely
identifies the namespace
▪ A URI is a series of characters that differentiate names
▪ Document authors create their own namespace prefixes
▪ Any name can be used as a namespace prefix, but the namespace prefix xml is reserved for use in XML standards

• To eliminate the need to place a namespace prefix in each element, authors can specify a
default namespace for an element and its children
▪ We declare a default namespace using keyword xmlns with a URI (Uniform Resource Identifier) as its value

• Document authors commonly use URLs (Uniform Resource Locators) for URIs, because
domain names (e.g., deitel.com) in URLs must be unique

Copyright © 2021, 2018,

©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
55

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
56

15.5 Document Type Definitions (DTDs)

• DTDs and schemas specify documents’ element types and attributes, and
their relationships to one another
• DTDs and schemas enable an XML parser to verify whether an XML
document is valid (i.e., its elements contain the proper attributes and
appear in the proper sequence)
• A DTD expresses the set of rules for document structure using an EBNF
(Extended Backus-Naur Form) grammar
• In a DTD, an ELEMENT element type declaration defines the rules for an
element. An ATTLIST attribute-list declaration defines attributes for a
particular element

Copyright © 2021, 2018,

©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
58

W3C XML Schema Documents

• Unlike DTDs
▪ Schemas use use XML syntax not EBNF grammar
▪ XML Schema documents can specify what type of data (e.g., numeric, text) an element can contain

• An XML document that conforms to a schema document is schema valid

• Two categories of types exist in XML Schema: simple types and complex types
▪ Simple types cannot contain attributes or child elements; complex types can

• Every simple type defines a restriction on an XML Schema-defined schema type or on a

user-defined type
• Complex types can have either simple content or complex content
▪ Both can contain attributes, but only complex content can contain child elements

• Whereas complex types with simple content must extend or restrict some other existing
type, complex types with complex content do not have this limitation

Copyright © 2021, 2018,

©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
60

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
61

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
62

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
63

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
64

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
65

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
66

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
67

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
68

XML Vocabularies
• Some XML vocabularies
▪ MathML (Mathematical Markup Language)
▪ Scalable Vector Graphics (SVG)
▪ Wireless Markup Language (WML)
▪ Extensible Business Reporting Language (XBRL)
▪ Extensible User Interface Language (XUL)
▪ Product Data Markup Language (PDML)
▪ W3C XML Schema
▪ Extensible Stylesheet Language (XSL)

• MathML markup describes mathematical expressions for display

▪ Divided into two types of markup—content markup and presentation markup
▪ Content MathML allows programmers to write mathematical notation specific to different areas of
mathematics
▪ Presentation MathML is directed toward formatting and displaying mathematical notation
▪ By convention, MathML files end with the .mml filename extension
Copyright © 2021, 2018,
©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
70

XML Vocabularies (Cont.)

• MathML document root node is the math element
▪ Default namespace is http:// www.w3.org/1998/Math/MathML
• mn element
▪ marks up a number
• mo element
▪ marks up an operator
• Entity reference ⁢
▪ indicates a multiplication operation without explicit symbolic representation
• msup element
▪ represents a superscript
▪ has two children—the expression to be superscripted (i.e., the base) and the
superscript (i.e., the exponent)
▪ Correspondingly, the msub element represents a subscript
• To display variables, use identifier element mi

XML Vocabularies (Cont.)

• mfrac element
▪ displays a fraction
▪ If either the numerator or the denominator contains more than one element, it must appear
in an mrow element
• mrow element
▪ groups elements that are positioned horizontally in an expression
• Entity reference ∫
▪ represents the integral symbol
• msubsup element
▪ specifies the subscript and superscript of a symbol
▪ Requires three child elements—an operator, the subscript expression and the superscript
expression
• msqrt element
▪ represents a square-root expression
• Entity reference δ
▪ represents a lowercase delta symbol

Extensible Stylesheet Language and XSL Transformations

• Convert XML into any text-based document

• XSL documents have the extension .xsl
• XPath
▪ A string-based language of expressions used by XML and many of its related technologies for effectively and efficiently
locating structures and data (such as specific elements and attributes) in XML documents
▪ Used to locate parts of the source-tree document that match templates defined in an XSL style sheet. When a match
occurs (i.e., a node matches a template), the matching template executes and adds its result to the result tree. When
there are no more matches, XSLT has transformed the source tree into the result tree.

• XSLT does not analyze every node of the source tree

▪ it selectively navigates the source tree using XPath’s select and match attributes

• For XSLT to function, the source tree must be properly structured

▪ Schemas, DTDs and validating parsers can validate document structure before using XPath and XSLTs

• XSL style sheets can be connected directly to an XML document by adding an

xml:stylesheet processing instruction to the XML document

Extensible Stylehsheet Language & XSL Transformations (Cont.)

• Two tree structures are involved in transforming an XML document using XSLT
▪ source tree (the document being transformed)
▪ result tree (the result of the transformation)
• XPath character / (a forward slash)
▪ Selects the document root
▪ In XPath, a leading forward slash specifies that we are using absolute addressing
▪ An XPath expression with no beginning forward slash uses relative addressing
• XSL element value-of
▪ Retrieves an attribute’s value
▪ The @ symbol specifies an attribute node
• XSL node-set function name
▪ Retrieves the current node’s element name
• XSL node-set function text
▪ Retrieves the text between an element’s start and end tags
• The XPath expression //*
▪ Selects all the nodes in an XML document
Copyright © 2021, 2018,
©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
©1992-2012 by Pearson Education, Inc. All Rights Reserved.
82

Document Object Model

 Retrieving data from an XML document using traditional sequential file
processing techniques is neither practical nor efficient
 Some XML parsers store document data as tree structures in memory
▪ This hierarchical tree structure is called a Document Object Model (DOM)
tree, and an XML parser that creates this type of structure is known as a
DOM parser
▪ Each element name is represented by a node
▪ A node that contains other nodes is called a parent node
▪ A parent node can have many children, but a child node can have only one
parent node
▪ Nodes that are peers are called sibling nodes
▪ A node’s descendant nodes include its children, its children’s children and
so on
▪ A node’s ancestor nodes include its parent, its parent’s parent and so on
Copyright © 2021, 2018,
©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
96

Document Object Model (Cont.)

• Many of the XML DOM capabilities are similar or identical to those of the HTML DOM
• The DOM tree has a single root node, which contains all the other nodes in the
document
• XMLHttpRequest object
▪ can be used to load an XML document.
▪ Typically, such an object is used with Ajax to make asynchronous requests to a server—the topic of the
next chapter.
• XMLHttpRequest object’s open method is used to create a get request for an XML
document at a specified URL.
• The argument null to the send method indicates that no data is being sent to the
server as part of this request.
• nodeType property of a node
▪ contains the type of the node
• Nonbreaking spaces ( )
▪ spaces that the browser is not allowed to collapse or that can be used to keep words together.

Document Object Model (Cont.)

• nodeName property of a node
▪ Obtain the name of an element
• childNodes list of a node
▪ Nonzero if the currrent node has children
• nodeValue property
▪ Returns the value of an element
• firstChild property of a node
▪ Refers to the first child of a given node
• lastChild property of a node
▪ refers to the last child of a given node
• nextSibling property of a node
▪ refers to the next sibling in a list of children of a particular node.
• previousSibling property of a node
▪ refers to the current node’s previous sibling
• parentNode property of a node
▪ refers to the current node’s parent node
Copyright © 2021, 2018,
©1992-2012 2015 Education,
by Pearson Pearson Inc. Education,
All Rights Inc. All Rights Reserved
Reserved.
98

Document Object Model (Cont.)

• Use XPath expressions to specify search criteria

• When the user clicks the Get Matches button, the script applies the
XPath expression to the XML DOM and displays the matching
nodes.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Key Terms
• absolute • directory • inline HTML • Recommendatio • standards mode
referencing elements ns
• document • tags
• accessibility outline • maintainability • relative
referencing • unordered lists
• ancestors • Document • markup
Object Model • root element • UTF-8
• body • markup
• empty element language • root reference • WHATWG
• Cascading Style
Sheets • folder • ordered lists • schemas • World Wide Web

• (CSS) • Head • pathname • search engine • Consortium

optimization
• character entity • HTML attribute • performance • W3C
• semantic HTML
• description lists • HTML element • polyfill • XHTML 1.0
• specifications
• descendants • HTML validators • quirks mode • XML
Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Copyright

This work is protected by United States copyright laws and is

provided solely for the use of instructors in teaching their
courses and assessing student learning. Dissemination or sale of
any part of this work (including on the World Wide Web) will
destroy the integrity of the work and is not permitted. The work
and materials from it should never be made available to students
except by instructors using the accompanying text in their
classes. All recipients of this work are expected to abide by these
restrictions and to honor the intended pedagogical purposes and
the needs of other instructors who rely on these materials.

Learnwebdevelopmentwithvegibit PDF
100% (1)
Learnwebdevelopmentwithvegibit PDF
2,135 pages
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
From Everand
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
i Code Academy
4/5 (7)
ConnollyHoar - 3rded - Chapter 3
No ratings yet
ConnollyHoar - 3rded - Chapter 3
45 pages
WT 3
No ratings yet
WT 3
51 pages
Web Technologies Design - Lecture 2
No ratings yet
Web Technologies Design - Lecture 2
55 pages
Lesson 3 - HTML
No ratings yet
Lesson 3 - HTML
38 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
M2 New
No ratings yet
M2 New
59 pages
Week Two HTML Html5 XHTML
No ratings yet
Week Two HTML Html5 XHTML
83 pages
Html5 and Css3
100% (1)
Html5 and Css3
88 pages
Web-Module I
No ratings yet
Web-Module I
35 pages
HTML and Css
No ratings yet
HTML and Css
27 pages
HTML5
No ratings yet
HTML5
103 pages
1 HTML
No ratings yet
1 HTML
15 pages
Chapter 2
No ratings yet
Chapter 2
174 pages
Module-1: Introduction To HTML and Introduction To Css 1.1. What Is HTML and Where Did It Come From?
No ratings yet
Module-1: Introduction To HTML and Introduction To Css 1.1. What Is HTML and Where Did It Come From?
41 pages
L02 - HTML Basics Part 1
No ratings yet
L02 - HTML Basics Part 1
20 pages
Chapter 3
No ratings yet
Chapter 3
44 pages
Day1 html5 Intro New
No ratings yet
Day1 html5 Intro New
60 pages
Web Design and Development Lecture 6 - HTML5
No ratings yet
Web Design and Development Lecture 6 - HTML5
42 pages
Prelim_Reviewer_ITEC87
No ratings yet
Prelim_Reviewer_ITEC87
5 pages
18CS63 Mod-1
No ratings yet
18CS63 Mod-1
33 pages
HTML
No ratings yet
HTML
59 pages
Unit 2WD
No ratings yet
Unit 2WD
8 pages
WT M1 - HTML & CSS
No ratings yet
WT M1 - HTML & CSS
140 pages
Html Introduction
No ratings yet
Html Introduction
36 pages
HTML5
No ratings yet
HTML5
31 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
02 - HTML Elements
No ratings yet
02 - HTML Elements
36 pages
1.02. - Introduction To HTML
No ratings yet
1.02. - Introduction To HTML
7 pages
Module 1
No ratings yet
Module 1
74 pages
HTML
No ratings yet
HTML
35 pages
Ilovepdf Merged
No ratings yet
Ilovepdf Merged
304 pages
HTML Basics (1)
No ratings yet
HTML Basics (1)
43 pages
Full Stack Unit - 1 (HTML)
No ratings yet
Full Stack Unit - 1 (HTML)
88 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
HTML Final
No ratings yet
HTML Final
58 pages
WD-lecture1 HTML (2) (2)
No ratings yet
WD-lecture1 HTML (2) (2)
27 pages
Lecture 3
No ratings yet
Lecture 3
43 pages
HTML is widely used
No ratings yet
HTML is widely used
26 pages
B.01 Introduction To The Web - HTML5
No ratings yet
B.01 Introduction To The Web - HTML5
31 pages
html5
No ratings yet
html5
29 pages
01 WPI HTML5 Introduction
No ratings yet
01 WPI HTML5 Introduction
39 pages
Lab 7
No ratings yet
Lab 7
12 pages
HTMLCSSJS 3
No ratings yet
HTMLCSSJS 3
113 pages
Getting The Structure and Text Right
No ratings yet
Getting The Structure and Text Right
33 pages
L1 - HTML
No ratings yet
L1 - HTML
80 pages
Chapter 2.part1
No ratings yet
Chapter 2.part1
62 pages
mod 1 web
No ratings yet
mod 1 web
36 pages
HTML_5
No ratings yet
HTML_5
14 pages
Web Programmimg Mod1
No ratings yet
Web Programmimg Mod1
19 pages
Web 01 - 03
No ratings yet
Web 01 - 03
14 pages
Introduction To Web Technology: Unit 3 HTML
No ratings yet
Introduction To Web Technology: Unit 3 HTML
49 pages
Computer 10 - HTML Basic Structure
No ratings yet
Computer 10 - HTML Basic Structure
16 pages
Module- 15-20 Web Engineering
No ratings yet
Module- 15-20 Web Engineering
59 pages
Module - 2 - HTML5Introduction To HTML5
No ratings yet
Module - 2 - HTML5Introduction To HTML5
28 pages
FALLSEM2021-22 ITE1002 ETH VL2021220100575 Reference Material I 18-Aug-2021 Introduction To HTML 5
No ratings yet
FALLSEM2021-22 ITE1002 ETH VL2021220100575 Reference Material I 18-Aug-2021 Introduction To HTML 5
56 pages
Unit-1 HTML5 - CCS3
No ratings yet
Unit-1 HTML5 - CCS3
268 pages
1.HTML Introduction
No ratings yet
1.HTML Introduction
7 pages
Comprehensive Hypertext Markup Language (HTML).: A Tutorial Guide to Editing and Developing a Responsive and Dynamic Website for Beginners.
From Everand
Comprehensive Hypertext Markup Language (HTML).: A Tutorial Guide to Editing and Developing a Responsive and Dynamic Website for Beginners.
Ibrahim Nugwa Abdulrazak
No ratings yet
NW Unit 5
No ratings yet
NW Unit 5
65 pages
1.7 Represent Simple Facts With RDF
No ratings yet
1.7 Represent Simple Facts With RDF
16 pages
Harish Dice Bot v1.3
No ratings yet
Harish Dice Bot v1.3
7 pages
OV Sample QB - HTML5 - 1 PDF
No ratings yet
OV Sample QB - HTML5 - 1 PDF
5 pages
FacturaElectronica V4.3
No ratings yet
FacturaElectronica V4.3
171 pages
XML Based Web Applications
No ratings yet
XML Based Web Applications
108 pages
SWTransferRequest 0001000107360361JK3QHDJ3 H9D7BHFD
No ratings yet
SWTransferRequest 0001000107360361JK3QHDJ3 H9D7BHFD
1 page
Xsl-Fo Tutorial
No ratings yet
Xsl-Fo Tutorial
12 pages
Question Bank - WP
No ratings yet
Question Bank - WP
9 pages
Doctype HTML
No ratings yet
Doctype HTML
29 pages
XML Interview Questions
No ratings yet
XML Interview Questions
6 pages
SOA XML questions
No ratings yet
SOA XML questions
51 pages
gc_٢٠٢٤_١٢_٢٣
No ratings yet
gc_٢٠٢٤_١٢_٢٣
11 pages
XML and Web Services Question Bank
No ratings yet
XML and Web Services Question Bank
28 pages
The Websocket Handbook
No ratings yet
The Websocket Handbook
62 pages
Diagrama de Interacción Col Circular 50 LRFD ADIP
No ratings yet
Diagrama de Interacción Col Circular 50 LRFD ADIP
9 pages
Components of An XML Document
100% (6)
Components of An XML Document
21 pages
SMIL Tutorial
No ratings yet
SMIL Tutorial
11 pages
HTML 4 Bible, 2nd Edition 8
No ratings yet
HTML 4 Bible, 2nd Edition 8
1 page
5 Best Features of HTML5 and CSS3
No ratings yet
5 Best Features of HTML5 and CSS3
3 pages
Jquery
No ratings yet
Jquery
7 pages
MM Assignment 2
No ratings yet
MM Assignment 2
17 pages
Employee Ename Empid Designation Email Address Employee Note:-Make Entry For at Least 10 Employees
No ratings yet
Employee Ename Empid Designation Email Address Employee Note:-Make Entry For at Least 10 Employees
35 pages
Historia de Los Marcos Front-End
No ratings yet
Historia de Los Marcos Front-End
20 pages
22 Web Programming - Sep 2020 (CBCS F+R - 2016-17 and Onwards)
No ratings yet
22 Web Programming - Sep 2020 (CBCS F+R - 2016-17 and Onwards)
2 pages
XSLT Multiple Name Spaces in XML Documents
No ratings yet
XSLT Multiple Name Spaces in XML Documents
12 pages
Cascading Style Sheets (CSS) : Web Based System Development
No ratings yet
Cascading Style Sheets (CSS) : Web Based System Development
48 pages
3 XML DTD and XSLT Assignment No 31
No ratings yet
3 XML DTD and XSLT Assignment No 31
7 pages
Unit-Iv XML and Datawarehouse
No ratings yet
Unit-Iv XML and Datawarehouse
59 pages
Web Technology and Its Application 18CS63
No ratings yet
Web Technology and Its Application 18CS63
63 pages