Scribd
Upload
4 views54 pages

HTML Notes

HTML, or Hyper Text Markup Language, is a markup language used to describe web pages through a set of tags that define the structure and content of the document. Key components include the <html>, <head>, <title>, and <body> tags, with various elements for formatting text, creating links, and adding metadata. HTML is not a programming language but serves as the foundation for web content presentation.

Uploaded by

syedaummehafeeza02
Copyright
© All Rights Reserved
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
4 views54 pages

HTML Notes

HTML, or Hyper Text Markup Language, is a markup language used to describe web pages through a set of tags that define the structure and content of the document. Key components include the <html>, <head>, <title>, and <body> tags, with various elements for formatting text, creating links, and adding metadata. HTML is not a programming language but serves as the foundation for web content presentation.

Uploaded by

syedaummehafeeza02
Copyright
© All Rights Reserved
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

4.

HTML
HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language.
HTML is not a programming language, it is a markup language. A markup language is a set of
markup tags. The purpose of the tags are to describe page content.

HTML Tags
HTML markup tags are usually called HTML tags. HTML tags are keywords (tag names)
surrounded by angle brackets like <html>. HTML tags normally come in pairs like <b> and
</b>. The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written
like the start tag, with a forward slash before the tag name. Start and end tags are also called
opening tags and closing tags. "HTML tags" and "HTML elements" are often used to describe
the same thing.
<tagname>content</tagname>

4.1 Basic Structure of HTML


Document Type <HTML></HTML>
Title <TITLE></TITLE>
Header <HEAD></HEAD>
Body <BODY></BODY>

• HTML document begins and ends with HTML tag i.e. <HTML></HTML>
Here <HTML> indicates the browser that it is a HTML document and </HTML> tells the
browser that HTML document is completed.
• Header Tag i.e. <HEAD></HEAD>
Header Tag does not contain any text, it only contains the Title Tag in it.
• Title tag i.e. <TITLE></TITLE>
anything written between this tag is not displayed on the screen but it is used to identify the
Webpage.
• Body tag i.e.<BODY></BODY>

This is the main part of HTML document. The content which is to be displayed on screen as
webpage should be written here. Body Tag contains the text as well as various tags but only the
text will be displayed on Webpage.
A simple example
<html>
<head>
<title> My First WEB PAGE </title>
<body>
HTML is Hyper Text Markup Language
</body>
1
</html>

4.2 The HTML <head> Element


The <head> element is a container for all the head elements. Elements inside < head> can
include scripts, instruct the browser where to find style sheets, provide meta information, and
more.
The following tags can be added to the head section: <title>, <base>, <link>, <meta>, < script>,
and <style>.

HTML head Elements


Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base /> Defines a default address or a default target for all links on a page
<link /> Defines the relationship between a document and an external resource
<meta /> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

4.2.1 The HTML <title> Element


The <title> tag defines the title of the document. The title element is required in all
HTML/XHTML documents.
The title element defines a title in the browser toolbar, provides a title for the page when it is
added to favorites, displays a title for the page in search-engine results

A simplified HTML document:

<!DOCTYPE html>
< html>
< head>
< title>Title of the document</title>
< /head>

< body>
The content of the document......
< /body>
< /html>

4.2.2 The HTML <base> Element


The <base> tag specifies a default address or a default target for all links on a page:

<head>
< base href="[Link] />

2
< base target="_blank" />
< /head>

4.2.3 HTML Links


Links are found in nearly all Web pages. Links allow users to click their way from page to page.

HTML Hyperlinks (Links)


A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new
document or a new section within the current document. When you move the cursor over a link
in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a>
tag.
The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax


The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example
<a href="[Link] College</a>

HTML Links - The target Attribute


The target attribute specifies where to open the linked document. The example below will open
the linked document in a new browser window or a new tab:
Example
<!DOCTYPE html>
<html>
<body>
<a href="[Link] target="_blank">Visit [Link]!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>

HTML Links - The name Attribute


The name attribute specifies the name of an anchor. The name attribute is used to create a
bookmark inside an HTML document.

Example
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:

3
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="[Link]
Visit the Useful Tips Section</a>

4.2.4 The HTML <meta> Element


Metadata is information about data. The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page, but will be machine readable. Meta
elements are typically used to specify page description, keywords, author of the document, last
modified, and other metadata. The <meta> tag always goes inside the head element. The
metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.

Keywords for Search Engines


Some search engines will use the name and content attributes of the meta element to index your
pages. The following meta element defines a description of a page:
< meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
The following meta element defines keywords for a page:
< meta name="keywords" content="HTML, CSS, XML" />
The intention of the name and content attributes is to describe the content of a page.

4.2.5 The HTML <script> Element


The <script> tag is used to define a client-side script, such as a JavaScript. The script element
either contains scripting statements or it points to an external script file through the src attribute.
The required type attribute specifies the MIME type of the script. Common uses for JavaScript
are image manipulation, form validation, and dynamic changes of content.
The script below writes Hello World! to the HTML output:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
[Link]("Hello World!")
</script>
</body>
</html>

The HTML noscript Element


The <noscript> tag is used to provide an alternate content for users that have disabled scripts in
their browser or have a browser that doesn’t support client-side scripting. The noscript element
can contain all the elements that you can find inside the body element of a normal HTML page.
The content inside the noscript element will only be displayed if scripts are not supported, or are
disabled in the user’s browser:
Example:-
<!DOCTYPE html>

4
<html> <body>
<script type="text/javascript">
[Link]("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text in the noscript element.</p>
</body> </html>

4.3 Body Section


The body of the document contains all that can be seen when the user loads the page.

4.3.1 Text Formatting and alignment, fonts and colors


The following HTML tags are used to format the appearance of the text on your web page. This
can jazz up the look of the web page; however, too much variety in the text formatting can also
look displeasing.

Header - <h?></h?>

HTML uses six levels of “heading level” tag pairs; the smaller the heading level number, the
larger is the print size:

• <H1>heading</H1>: creates heading level #1 (24 point type—largest)


• <H2>heading</H2>: creates heading level #2 (18 point type)
• <H3>heading</H3>: creates heading level #3 (14 point type)
• <H4>heading</H4>: creates heading level #4 (12 point type)
• <H5>heading</H5>: creates heading level #5 (10 point type)
• <H6>heading</H6>: creates heading level #6 (8 point type—smallest)

A line space automatically is inserted before and after a heading (that is, an entire line is skipped
between a heading and any text before and after it).

No matter what the font size is, headings with the same level number are always the same size.
Headings are always in bold print.

The <H#> tag may contain within it an alignment parameter (recognized by most browsers) as
part of the command:

• ALIGN="LEFT"|"CENTER"|"RIGHT": positions the heading at a specific location


on the page.

"LEFT" (the default) aligns the heading with the left margin of the page.
"CENTER" centers the heading horizontally on the page.
"RIGHT" aligns the heading with the right margin of the page.

5
In most cases, it is preferable for a heading to be centered horizontally on the page. However,
since some browsers so not recognize the ALIGN parameter for headings, it is a good idea to
center a heading by using <CENTER>&</CENTER> tags.

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a bold typeface.

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a italicized typeface.

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below:

6
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which
is a thin line through the text as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a strikethrough typeface.

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known
as variable-width fonts because different letters are of different widths (for example, the letter 'm'
is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
7
</html>

This will produce following result:

The following word uses a monospaced typeface.

Superscript Text

The content of a <sup>...</sup> element is written in superscript; the font size used is the same
size as the characters surrounding it but is displayed half a character's height above the other
characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a superscript


typeface.

Subscript Text

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as
the characters surrounding it, but is displayed half a character's height beneath the other
characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a subscript typeface.

8
Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
</body>
</html>

This will produce following result:

I want to drink wine

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
</body>
</html>

This will produce following result:

I want to drink wine

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the
text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>

9
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a big typeface.

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of
the text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a small typeface.

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections
or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate to the footnotes. You might then
attach a style to this <div> element so that they appear using a special set of style rules.

Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<divid="menu"align="middle">
<ahref="/[Link]">HOME</a> |
<ahref="/about/contact_us.htm">CONTACT</a> |
<ahref="/about/[Link]">ABOUT</a>
</div>
<divid="content"align="left"bgcolor="white">
<h5>Content Articles</h5>

10
<p>Actual content goes here.....</p>
</div>
</body>
</html>

This will produce following result:


HOME | CONTACT | ABOUT
CONTENT ARTICLES
Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So, if you
have a part of a sentence or paragraph which you want to group together, you could use the
<span> element as follows

Example
<!DOCTYPE html>

<html>

<head>

<title>Span Tag Example</title>

</head>

<body>

<p>This is the example of <spanstyle="color:green">span tag</span> and the


<spanstyle="color:red">div tag</span>alongwith CSS</p>

</body>

</html>

This will produce following result:


This is the example of span tag and the div tag along with CSS
These tags are commonly used with CSS to allow you to attach a style to a section of a page.

Font
The <font> tag provides no real functionality by itself, but with the help of a few attributes, this
tag is used to change the style, size, and color of HTML text elements. The size, color, and face
attributes can be used all at once or individually, providing users with the ability to create
dynamic font styles for any HTML element.

Font Size
Set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7
-- the largest. The default size of a font is 3.

Font Size Code:


<p>
<font size=”5”> Here is a size 5 font </font>
</p>
11
Font Color
Set the color of your font with color.

Font Color Code:


<font color="#990000">This text is hex color #990000</font>
<br />
<font color="red">This text is red</font>

Font Face
Choose a different font face by specifying any font you have installed. Font face is synonymous
with font type. As a web designer, be aware that if you specify a custom font type and users
viewing the page don't have the exact same font installed, they will not be able to see it. Instead
the chosen font will default to Times New Roman. To reduce the risk of running into this
situation, you may provide a list of several fonts with the face attribute, such as outlined below.

Font Face Code:


<p>
<font face="Georgia, Arial, Garamond">This paragraph has had its
font...</font>
</p>
In the example above, we have changed the font face (type) of a paragraph element and specified
a list of similar fonts to apply to this element in the case that some of our viewers do not have
these fonts installed.

Centre - <center></center>
A useful tag, as it says, it makes everything in between the tags centered (in the middle
of the page).

Emphasis - <em></em>
Used to emphasize text, which usually appears in italics, but can vary according to your
browser.

Strong Emphasis - <strong></strong>


Used to emphasize text more, which usually appears in bold, but can vary according to
your browser.

Colors
Colors are displayed combining RED, GREEN, and BLUE light.

Color Values

12
HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and
Blue color values (RGB).

The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is
255 (in HEX: FF).

HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. 147 color names are
defined in the HTML and CSS color specification (16 basic color names plus 130 more). The table
below lists basic colors, along with their hexadecimal values. The 16 basic color names are: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Color Values
Color Name Color Hex Color RGB
Black #000000 rgb(0,0,0)
Yellow #FFFF00 rgb(255,255,0)
Red #FF0000 rgb(255,0,0)
Maroon #800000 rgb(128,0,0)
Gray #808080 rgb(128,128,128)
Lime #00FF00 rgb(0,255,0)
Green #008000 rgb(0,128,0)
Olive #808000 rgb(128,128,0)
Silver #C0C0C0 rgb(192,192,192)
Aqua #00FFFF rgb(0,255,255)
Blue #0000FF rgb(0,0,255)
Navy #000080 rgb(0,0,128)
White #FFFFFF rgb(255,255,255)
Fuchsia #FF00FF rgb(255,0,255)
Purple #800080 rgb(128,0,128)
Teal #008080 rgb(0,128,128)

The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different
colors (256 x 256 x 256).

4.3.2 Unordered Lists and Ordered Lists


Unordered Lists
An unordered list is simply a list of related items whose order does not matter. Creating an
unordered list in HTML is accomplished using the unordered list block-level element, <ul>. Each
item within an unordered list is individually marked up using the list item element, <li>.
By default, most browsers add a vertical margin and left padding to the <ul> element and
precede each <li> element with a solid dot. This solid dot is called the list item marker.
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
Output:
13
• Orange
• Green
• Blue
The default solid dot for Unordered lists can be changed by the type attribute.
Example
<ul type="circle">
The open circle o will be used as list item marker. The possible type values are “disc” and
“square”.
Ordered Lists
The ordered list element, <ol>, works very much like the unordered list element; individual list
items are created in the same manner. The main difference between an ordered list and an
unordered list is that with an ordered list, the order in which items are presented is important.
Because the order matters, instead of using a dot as the default list item marker, an ordered list
uses numbers.
<ol>
<li>Head north </li>
<li>Turn right </li>
<li>Turn left </li>
</ol>
Output:
1. Head north
2. Turn right
3. Turn left
Ordered lists also have unique attributes available to them including start and reversed.
The start attribute defines the number from which an ordered list should start. By default,
ordered lists start at 1. However, there may be cases where a list should start at 30 or another
number. When we use the start attribute on the <ol> element, we can identify exactly which
number an ordered list should begin counting from.

The start attribute accepts only integer values, even though ordered lists may use different
numbering systems, such as roman numerals.
<ol start="30">
<li>Head north </li>
<li>Turn right </li>
<li>Turn left </li>
</ol>
Output:
30. Head north
31. Turn right
32. Turn left

14
The reversed attribute, when used on the <ol> element, allows a list to appear in reverse order.
An ordered list of five items numbered 1 to 5 may be reversed and ordered from 5 to 1.
The value attribute may be used on an individual <li> element within an ordered list to change
its value within the list. The number of any list item appearing below a list item with a value
attribute will be recalculated accordingly.

A type attribute can be added to an ordered list, to define the type of the marker:Type
Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
For example:
Upper case List:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Definition (or Description) Lists


Definition lists create a list with two parts to each entry: the name or term to be defined and
the definition. This creates lists similar to a dictionary or glossary. There are three tags
associated with the definition list:
• <dl> to define the list
• <dt> to define the definition term
• <dd> to define the definition of the term
Here is how a definition list looks:
<dl>
<dt>This is a definition term</dt>
<dd>And this is the definition</dd>
<dt>term 2</dt>
<dd>definition 2</dd>
<dt>term 3</dt>
<dd>definition 3</dd>
</dl>

Output:
This is a definition term
And this is the definition

15
term 2
definition 2
term 3
definition 3

Use definition lists anywhere you have a list that has two parts to each item. The most common
use is with a glossary of terms, but you can also use it for an address book (name is the term
and the address is the definition), or an HTML form (field name is the term, input box is the
definition), or for any list of name/value pairs.

4.3.3 Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks.
A hyperlink is an element, a text, or an image that you can click on, and jump to another
document.
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>

Example:
<a href="[Link] our HTML tutorial</a>
The href attribute specifies the destination address ([Link]
The link text is the visible part (Visit our HTML tutorial). Clicking on the link text, will send you to
the specified address.
When you move the mouse cursor over a link, two things will normally happen, the mouse
arrow will turn into a little hand and the color of the link element will change.
The id attribute can be used to create bookmarks inside HTML documents. Bookmarks are not
displayed in any special way. They are invisible to the reader. These bookmarks can be used to
link the hyperlink to specific content within the same page.
Add an id attribute to any <a> element:
<a id="tips">Useful Tips Section</a>
Then create a link to the <a> element (Useful Tips Section):
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the <a> element (Useful Tips Section) from another page:
<a href="[Link] the Useful Tips Section</a>

4.3.4 Images
The <img> tag defines an image in an HTML page. The <img> tag has two required attributes:
src and alt. Note that Images are not technically inserted into an HTML page, images are linked
to HTML pages. The <img> tag creates a holding space for the referenced image. Also, to link an
image to another document, simply nest the <img> tag inside <a> tags.

16
Example: How to insert an image:
<imgsrc="[Link]" alt="Smiley face" height="42" width="42">

Attributes of <img> tag:

Attribute Value Description


top, bottom,
Specifies the alignment of an image according to surrounding
align middle,
elements
left or right
Alt text Specifies an alternate text for an image
Border pixels specifies the width of the border around an image
Height Pixels Specifies the height of an image
Hspace Pixels Specifies the whitespace on left and right side of an image
ismap ismap Specifies an image as a server-side image-map
Specifies the URL to a document that contains a long
longdesc URL
description of an image
src URL Specifies the URL of an image
usemap #mapname Specifies an image as a client-side image-map
vspace pixels Specifies the whitespace on top and bottom of an image
width pixels Specifies the width of an image

4.3.5 Sounds

Sounds can be played in HTML by many different methods.

Using Plug-ins
A browser Plug-in is a small computer program that extends the standard functionality of the
browser. Plug-ins can be used for many purposes: play music, display maps, verify your bank id,
control your input, and much more. Plug-ins can be added to HTML pages using the <object>
tag or the <embed> tag. These tags defines containers for resources (normally non-HTML
resources), which, depending on the type, will either be displayed by the browsers, or by an
external plug-in.

Using the <embed> Element


The <embed> tag defines a container for external (non-HTML) content. (It is an HTML5 tag,
invalid in HTML 4, but works in all browsers).

The following code fragment can display an MP3 file embedded in a web page:

<!DOCTYPE html>
<html> <body>
<embed height="100" width="100" src="horse.mp3"></embed>

17
<p>If you cannot hear the sound, your computer or browser doesn't support the
sound format.</p>
<p>Or, you have your speakers turned off.</p>
</body> </html>

How the HTML code above looks in a browser:

Using the <object> Element


The <object tag> tag can also define a container for external (non-HTML) content. The following code
fragment can display an MP3 file embedded in a web page.

<!DOCTYPE html>
<html>
<body>
<object height="100" width="100" data="horse.mp3"></object>
<p>If you cannot hear the sound, your computer or browser doesn't support the
sound format.</p>
<p>Or, you have your speakers turned off.</p>
</body>
</html>

How the HTML code above looks in a browser

18
4.3.6 Videos
Videos can be played in HTML by many different methods.

The <embed> Tag


The purpose of the <embed> tag is to embed multimedia elements in HTML pages. The
following HTML fragment displays a Flash video embedded in a web page:

<!DOCTYPE html>
<html>
<body>
<h2>Playing the Object</h2>
<embed src="C:\Users\Public\Videos\Sample Videos\[Link]" width="200"
height="200"><p>If you cannot see this, your computer doesn't support the
format</p>
</body>
</html>

How the HTML code above looks in a browser:

19
The <embed> Tag's Attributes
Attribute Description Possible Values

Determines whether to start the video as soon as the page • True


autostart
has loaded. • False
Determines whether to hide the video. For example, if you • True
hidden
just want background noise with no video. • False
Determines whether to continously replay the video after it • True
loop
has finished. • False
playcount Determines how many times to repeat the video. A number value
Number value
volume Determines how loud the audio should be.
between 1 and 100

Using The <object> Tag


The purpose of the <object> tag is to embed multimedia elements in HTML pages. The following HTML
fragment displays a Flash video embedded in a web page:

<!DOCTYPE html>
<html>
<body>
<object height="400" width="400" data="C:\Users\Public\Videos\Sample
Videos\[Link]""> </object>
</body>
</html>

How the HTML code above looks in a browser:

Video Formats
Some of the more common video formats are:

20
• .swf - Shockwave/Flash File (by Macromedia/Adobe)
• .wmv - Windows Media Player video format (by Microsoft)
• .mov - Quicktime video format (by Apple)
• .mpeg - Video compression format (specified by the Moving Pictures Experts Group)
• .ogg - Open standard container format maintained by the [Link] Foundation. Also includes
.ogv, .oga, .ogx, and .spx extensions
• .webM - royalty-free, high-quality open video compression format for use with HTML5 video.

4.3.7 Background
The <body> tag defines the document's body. The <body> element contains all the contents of
an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Attributes of <body> tag:
Attribute Value Description
alink color Specifies the color of an active link in a document
background URL Specifies a background image for a document
rgb(x,x,x)
bgcolor Specifies the background color of a document
#xxxxxxcolorname
link color Specifies the color of unvisited links in a document
text color Specifies the color of the text in a document
vlink color Specifies the color of visited links in a document

The background attribute specifies a background image for a document.


Example:
Specify a background image for an HTML document:
<html>
<body background="[Link]">
<h1>Hello world!</h1>
<p><a href="[Link] [Link]!</a></p>
</body>
</html>

The bgcolor attribute specifies the background color of a document.


Example:
Specify a background color for an HTML document:
<html>
<body bgcolor="#E6E6FA">
<h1>Hello world!</h1>
<p><a href="[Link] [Link]!</a></p>
</body>
</html>

21
4.3.8 Tables
The <table> tag defines an HTML [Link] HTML table consists of the <table> element and one
or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th> element
defines a table header, and the <td> element defines a table cell.

Attributes:

Attribute Value Description


Specifies the alignment of a table according to surrounding
align left, center or right
text
rgb(x,x,x)
bgcolor #xxxxxx Specifies the background color for a table
colorname
Specifies whether the table cells should have borders or
border 1 or 0
not
cellpadding pixels cellpadding
cellspacing pixels Cellspacing
sortable sortable Specifies that the table should be sortable
summary text summary
width Pixels or % Specifies the width of a table

Example:
A simple HTML table, containing two columns and two rows:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

To make a cell span more than one column, use the colspan attribute:

22
Example:
<table border=1>
<tr>
<th>Name</th>
<thcolspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Output:
Name Telephone

Bill Gates 555 77 854 555 77 855

To make a cell span more than one row, use the rowspan attribute:

Example:
<table border=1>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<throwspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Output:
Name: Bill Gates
555 77 854
Telephone:
555 77 855

23
4.3.9 Forms and Input
HTML Forms are used to select different kinds of user input.

HTML Forms
HTML forms are used to pass data to a server. A form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea,
fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
< /form>

HTML Forms - The Input Element


The most important form element is the input element. The input element is used to select user
information. An input element can vary in many ways, depending on the type attribute. An input
element can be of type text field, checkbox, password, radio button, submit button, and more.

The most used input types are described below.

Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:

<form>
First name:< input type="text" name="firstname" /><br />
Last name:< input type="text" name="lastname" />
< /form>

How the HTML code above looks in a browser:

First name:

Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Field
<input type="password" /> defines a password field:
<form>
Password:< input type="password" name="pwd" />
< /form>

How the HTML code above looks in a browser:

Password:

24
Note: The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited
number of choices:

<form>
< input type="radio" name="sex" value="male" /> Male<br />
< input type="radio" name="sex" value="female" /> Female
< /form>

How the HTML code above looks in a browser:

Male

Female

Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ZERO or MORE options
of a limited number of choices.

<form>
< input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
< input type="checkbox" name="vehicle" value="Car" /> I have a car
< /form>

How the HTML code above looks in a browser:

I have a bike

I have a car

Submit Button
<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:

<form name="input" action="html_form_action.asp" method="get">


Username:< input type="text" name="user" />
< input type="submit" value="Submit" />
< /form>

How the HTML code above looks in a browser:

Submit
Username:

25
If you type some characters in the text field above, and click the "Submit" button, the browser will
send your input to a page called "html_form_action.asp". The page will show you the received input.

HTML Form Tags


Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button

4.3.10 HTML Frames

HTML frames allow you to split the whole window up into different frames. For example, you
can have a frame to display your left menu, another frame to display the top menu, and another frame
to display the main content area. With frames, your HTML document can be made up of many different
pages.

Frames are achieved by creating a frameset page, and defining each frame from within that
page. This frameset page doesn't actually contain any content - just a reference to each frame. The
HTML <frame> tag is used to specify each frame within the frameset. All frame tags are nested with a
<frameset> tag.

So, in other words, if you want to create a web page with 2 frames, you would need to create 3
files - 1 file for each frame, and 1 file to specify how they fit together.

Creating Frames

Two Column Frameset

HTML Code:

The frameset (frame_example_frameset_1.html):

<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>

26
The left frame (frame_example_left.html):

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>
</body>
</html>

The right frame (frame_example_right.html):

<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>

Standard Attributes
The <frame> tag supports the following standard attributes in HTML 4.01:

Attribute Value Description

class classname Specifies a classname for an element

id id Specifies a unique id for an element

style style_definition Specifies an inline style for an element

title text Specifies extra information about an element

Optional Attributes
Attribute Value Description

frameborder 0 Specifies whether or not to display a border around a frame


1

longdesc URL Specifies a page that contains a long description of the


content of a frame

marginheight pixels Specifies the top and bottom margins of a frame

marginwidth pixels Specifies the left and right margins of a frame

name name Specifies the name of a frame

noresize noresize Specifies that a frame is not resizable

scrolling yes Specifies whether or not to display scrollbars in a frame


no
auto

src URL Specifies the URL of the document to show in a frame

27
4.4 XHTML
XHTML is HTML written as XML.
XHTML means:
• XHTML stands for EXtensibleHyperText Markup Language
• XHTML is almost identical to HTML
• XHTML is stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
Today's market consists of different browser technologies. Some browsers run on computers,
and some browsers run on mobile phones or other small devices. Smaller devices often lack the
resources or power to interpret "bad" markup.
XML is a markup language where documents must be marked up correctly (be "well-
formed").By combining the strengths of HTML and XML, XHTML was [Link] is HTML
redesigned as XML.
The Most Important Differences from HTML:
❖ Document Structure
• XHTML DOCTYPE is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
❖ XHTML Elements
• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
❖ XHTML Attributes
• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden
❖ <!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML DOCTYPE [Link] <html>, <head>,
<title>, and <body> elements must also be present, and the xmlns attribute in <html>
must specify the xml namespace for the document.
This example shows an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Title of document</title>
</head>
<body>
some content
28
</body>
</html>
❖ XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
❖ XHTML Elements Must Always Be Closed
This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
❖ Empty Elements Must Also Be Closed
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <imgsrc="[Link]" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <imgsrc="[Link]" alt="Happy face" />
❖ XHTML Elements Must Be In Lower Case
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
❖ XHTML Attribute Names Must Be In Lower Case
This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">

❖ Attribute Values Must Be Quoted


This is wrong:
<table width=100%>
This is correct:
<table width="100%">

29
❖ Attribute Minimization Is Forbidden
Wrong:
<input type="checkbox" name="vehicle" value="car" checked
/>
Correct:
<input type="checkbox" name="vehicle" value="car"
checked="checked" />

Wrong:
<input type="text" name="lastname" disabled />
Correct:
<input type="text" name="lastname" disabled="disabled"
/>

How to Convert from HTML to XHTML


1) Add an XHTML <!DOCTYPE> to the first line of every page
2) Add an xmlns attribute to the html element of every page
3) Change all element names to lowercase
4) Close all empty elements
5) Change all attribute names to lowercase
6) Quote all attribute values

4.5 Dynamic HTML (DHTML)


Dynamic HTML is not really a new specification of HTML, but rather a new way of looking at
and controlling the standard HTML codes and commands.

When thinking of dynamic HTML, you need to remember the qualities of standard HTML,
especially that once a page is loaded from the server, it will not change until another
request comes to the server. Dynamic HTML give you more control over the HTML elements
and allows them to change at any time, without returning to the Web server.

There are four parts to DHTML:

• Document Object Model (DOM)


• Scripts
• Cascading Style Sheets (CSS)
• XHTML

Features of DHTML

There are four primary features of DHTML:

1. Changing the tags and properties


2. Real-time positioning
3. Dynamic fonts (Netscape Communicator)
4. Data binding (Internet Explorer)

30
Changing the tags and properties
This is one of the most common uses of DHTML. It allows you to change the qualities of an
HTML tag depending on an event outside of the browser (such as a mouse click, time, or
date, and so on). You can use this to preload information onto a page, and not display it
unless the reader clicks on a specific link.

Real-time postioning
When most people think of DHTML this is what they expect. Objects, images, and text
moving around the Web page. This can allow you to play interactive games with your
readers or animate portions of your screen.

Dynamic Fonts
This is a Netscape only feature. Netscape developed this to get around the problem
designers had with not knowing what fonts would be on a reader's system. With dynamic
fonts, the fonts are encoded and downloaded with the page, so that the page always looks
how the designer intended it to.

Data binding
This is an IE only feature. Microsoft developed this to allow easier access to databases from
Web sites. It is very similar to using a CGI to access a database, but uses an ActiveX control
to function. This feature is very advanced and difficult to use for the beginning DHTML
writer.

4.5.1 Cascading Style Sheets

CSS is used in DHTML to control the look and feel of the Web page. Style sheets define the
colors and fonts of text, the background colors and images, and the placement of objects on
the page. Using scripting and the DOM, you can change the style of various elements.

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly brackets:

31
p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like this:

Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code
at a later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS Id and Class


The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own
selectors called "id" and "class".

The id Selector
The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

32
The style rule below will be applied to the element with id="para1":

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

The class Selector


The class selector is used to specify a style for a group of elements. Unlike the id selector,
the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class="center" will be center-aligned:

33
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link]
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

• External style sheet


• Internal style sheet
• Inline style

4.5.2 External Style Sheet


An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file. Each page
must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section:

< head>
< link rel="stylesheet" type="text/css" href="[Link]" />
< /head>

An external style sheet can be written in any text editor. The file should not contain any
html tags. Your style sheet should be saved with a .css extension. An example of a style
sheet file is shown below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/[Link]");}

4.5.3 Internal Style Sheet


An internal style sheet should be used when a single document has a unique style. You
define internal styles in the head section of an HTML page, by using the <style> tag, like
this:

34
< head>
< style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/[Link]");}
< /style>
< /head>

4.5..4 Inline Styles


An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property. The example shows how to change the color and the left margin
of a paragraph:

< p style="color:blue;margin-left:20px">This is a paragraph.</p>

Attribute definitions

style = style [CN]


This attribute specifies style information for the current element.

In CSS, property declarations have the form "name : value" and are separated by a
semi-colon.

CSS properties:
Font Properties
font-family, font-style, font-variant, font-weight, font-size and font
Color and Background Properties
Color, background- color, background-image, background- repeat, background-
attachment, background- position andbackground
Text Properties
word-spacing, letter-spacing, text-decoration, vertical- alignment, text-
transformation
text-alignment, text-indentation and line-height,
Box Properties
top-margin, right- margin, bottom-margin, left-margin, margin, top- padding,
right- padding, bottom-padding, left-padding, padding, top- border-width, right-
border- width, bottom-border-width, left border width, border- width, border-
color, border-style, top-border, right- border, bottom- border, left-border,
border, width, height, float and clear
Classification Properties
Display, whitespace, list-style- type, list-style-image, list-style-positionand list-
style,
35
4.5.6 User style sheet
User style sheets allow you to have more control over the Web pages you are visiting. They allow you
to define styles for usability as well as for your own comfort. To use a user style sheet in Internet
Explorer for Windows.

1. Create a style sheet and save it on a drive that can be seen by the user.

2. Open Internet Explorer and click on the Tools menu.

3. Go to Internet Options and click on Accessibility in the General tab.

4. Click the check box for "Format documents using my style sheet".

5. Browse to your style sheet and choose it. Then click "OK" twice to get out of the Internet

Options menu.

6. Close your browser and re-open it. Your styles will be applied to all pages you visit after that.

4.5.7 Positioning elements


The positioning properties allow you to position an element. It can also place an element behind
another, and specify what should happen when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently depending
on the positioning method.

There are four different positioning methods.

Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned
according to the normal flow of the [Link] positioned elements are not affected by the top,
bottom, left, and right properties.

Fixed Positioning
An element with fixed position is positioned relative to the browser [Link] will not move even if the
window is scrolled:

<! DOCTYPE html>


<html>
<head>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
36
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p>
</body>
</html>

Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.

Fixed positioned elements are removed from the normal flow. The document and other elements
behave like the fixed positioned element does not [Link] positioned elements can overlap other
elements.

Relative Positioning
A relative positioned element is positioned relative to its normal position.

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
37
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>

The content of relatively positioned elements can be moved and overlap other elements, but the
reserved space for the element is still preserved in the normal flow.

Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other
than static. If no such element is found, the containing block is <html>:

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
38
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is
placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>

Absolutely positioned elements are removed from the normal flow. The document and other elements
behave like the absolutely positioned element does not [Link] positioned elements can
overlap other elements.

Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other [Link] z-index
property specifies the stack order of an element (which element should be placed in front of, or
behind, the others).An element can have a positive or negative stack order:

<!DOCTYPE html>
<html>
<head>
<style>

img
{
position:absolute;
left:0px;
top:0px;
39
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<imgsrc="C:\Users\Public\Pictures\Sample Pictures\[Link]" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

An element with greater stack order is always in front of an element with a lower stack order.

Note: If two positioned elements overlap, without a z-index specified, the element positioned last in
the HTML code will be shown on top.

4.5.8 Document Object Model:

DHTML is not a technology in and of itself; rather, it is the product of three related and
complementary technologies: HTML, Cascading Style Sheets (CSS), and JavaScript. To
allow scripts and components to access features of HTML and CSS, the contents of the

40
document are represented as objects in a programming model known as the Document
Object Model (DOM).

The DOM Node Tree


The DOM views HTML documents as tree structures. The structure is called a Node Tree:

DOM Tree Example

With the DOM, all nodes in the tree can be accessed by JavaScript. All HTML elements (nodes) can be
modified, and nodes can be created or deleted.

Node Parents, Children, and Siblings


The nodes in the node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe the relationships. Parent nodes have children.
Children on the same level are called siblings (brothers or sisters).

• In a node tree, the top node is called the root


• Every node has exactly one parent, except the root (which has no parent)
• A node can have any number of children
• Siblings are nodes with the same parent

The following image illustrates a part of the node tree and the relationship between the nodes:

41
Look at the following HTML fragment:

<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
< /html>

From the HTML above:

• The <html> node has no parent node; it is the root node


• The parent node of the <head> and <body> nodes is the <html> node
• The parent node of the "Hello world!" text node is the <p> node

and:

• The <html> node has two child nodes: <head> and <body>
• The <head> node has one child node: the <title> node
• The <title> node also has one child node: the text node "DOM Tutorial"
• The <h1> and <p> nodes are siblings and child nodes of <body>

and:

• The <head> element is the first child of the <html> element


• The <body> element is the last child of the <html> element
• The <h1> element is the first child of the <body> element
• The <p> element is the last child of the <body> element

DOM Methods
Methods are actions you can perform on nodes (HTML Elements)

42
Programming Interface
The DOM can be accessed with JavaScript (and other programming languages).

All HTML elements are defined as objects, and the programming interface is the object methods and
object properties.

A method is an action you can do (like add or modify an element).

A property is a value that you can get or set (like the name or content of a node).

DOM Objects - Methods and Properties


Some commonly used DOM methods:

• getElementById(id) - get the node (element) with a specified id


• appendChild(node) - insert a new child node (element)
• removeChild(node) - remove a child node (element)

Some commonly used DOM properties:

• innerHTML - the text value of a node (element)


• parentNode - the parent node of a node (element)
• childNodes - the child nodes of a node (element)
• attributes - the attributes nodes of a node (element)

The getElementById() Method


The getElementById() method returns the element with the specified ID:

Example:

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>


<p>This example demonstrates the <b>getElementById</b> method!</p>

<script>
x=[Link]("intro");
[Link]("<p>The text from the intro paragraph: " + [Link] + "</p>");
</script>

</body>
</html>

Output:

Hello World!

This example demonstrates the getElementById method!

The text from the intro paragraph: Hello World!

43
DOM Properties
Properties are values of nodes (HTML Elements) that you can get or set

The innerHTML Property


The easiest way to get the content of an element is by using the innerHTML property.

The innerHTML property is useful for getting or replacing the content of HTML elements.

Example
The following code gets the innerHTML from the <p> element with id="intro":

Example
<html>
< body>
< p id="intro">Hello World!</p>
< script>
var txt=[Link]("intro").innerHTML;
[Link](txt);
< /script>
< /body>
< /html>

In the example above, getElementById is a method, while innerHTML is a property.

4.6 XML
Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding
documents in a format which is both human-readable and machine-readable.
• XML stands for EXtensible Markup Language.
• XML was designed to describe data.
• XML is a software- and hardware-independent tool for carrying information.
• XML is easy to learn.
• XML is a markup language much like HTML
• XML was designed to describe data, not to display data
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML is a W3C Recommendation
XML Document Example:
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>

44
</note>

XML Advantages
XML is used in many aspects of web development, often to simplify data storage and sharing.
• XML Separates Data from HTML
If you need to display dynamic data in your HTML document, it will take a lot of work to
edit the HTML each time the data [Link] XML, data can be stored in separate
XML files. This way you can concentrate on using HTML/CSS for display and layout, and
be sure that changes in the underlying data will not require any changes to the
[Link] a few lines of JavaScript code, you can read an external XML file and update
the data content of your web page.
• XML Simplifies Data Sharing
In the real world, computer systems and databases contain data in incompatible
formats.
XML data is stored in plain text format. This provides a software- and hardware-
independent way of storing [Link] makes it much easier to create data that can be
shared by different applications.
• XML Simplifies Data Transport
One of the most time-consuming challenges for developers is to exchange data between
incompatible systems over the [Link] data as XML greatly reduces this
complexity, since the data can be read by different incompatible applications.

• XML Simplifies Platform Changes


Upgrading to new systems (hardware or software platforms), is always time consuming.
Large amounts of data must be converted and incompatible data is often lost.
XML data is stored in text format. This makes it easier to expand or upgrade to new
operating systems, new applications, or new browsers, without losing data.
• XML Makes Your Data More Available
Different applications can access your data, not only in HTML pages, but also from XML
data [Link] XML, your data can be available to all kinds of "reading machines"
(Handheld computers, voice machines, news feeds, etc.), and make it more available for
blind people, or people with other disabilities.
4.6.1 Structuring Data
XML documents form a tree structure that starts at "the root" and branches to "the leaves".
An Example XML Document
XML documents use a self-describing and simple syntax:
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>

45
<body>Don't forget me this weekend!</body>
</note>

The first line is the XML declaration. It defines the XML version (1.0).The next line describes the
root element of the document (like saying: "this document is a note"):<note>

The next 4 lines describe 4 child elements of the root (to, from, heading, and body):
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>

And finally the last line defines the end of the root element:</note>
You can assume, from this example, that the XML document contains a note to Tove from Jani.

XML Documents Form a Tree Structure. XML documents must contain a root element. This
element is "the parent" of all other [Link] elements in an XML document form a
document tree. The tree starts at the root and branches to the lowest level of the [Link]
elements can have sub elements (child elements):

<root>
<child>
<subchild>.....</subchild>
</child>
</root>

4.6.2 XML Namespaces


XML Namespaces provide a method to avoid element name [Link] XML, element names
are defined by the developer. This often results in a conflict when trying to mix XML documents
from different XML applications.
This XML carries HTML table information:
<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>

This XML carries information about a table (a piece of furniture):


<table>
<name>African Coffee Table</name>

46
<width>80</width>
<length>120</length>
</table>

If these XML fragments were added together, there would be a name conflict. Both contain a
<table> element, but the elements have different content and meaning.A user or an XML
application will not know how to handle these [Link] conflicts in XML can easily be
avoided using a name prefix.

This XML carries information about an HTML table, and a piece of furniture:
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

In the example above, there will be no conflict because the two <table> elements have
different names.

4.6.3 XML DTD


An XML document with correct syntax is called "Well Formed". An XML document validated
against a DTD is "Well Formed" and "Valid".
A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules
of a DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "[Link]">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The DOCTYPE declaration, in the example above, is a reference to an external DTD file(I.e.
[Link]).

47
The content of the file is shown below:

<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

The DTD above is interpreted like this:


• !DOCTYPE note defines that the root element of the document is note
• !ELEMENT note defines that the note element contains four elements: "to, from, heading,
body"
• !ELEMENT to defines the to element to be of type "#PCDATA"
• !ELEMENT from defines the from element to be of type "#PCDATA"
• !ELEMENT heading defines the heading element to be of type "#PCDATA"
• !ELEMENT body defines the body element to be of type "#PCDATA"

The purpose of a DTD is to define the structure of an XML document. It defines the structure
with a list of legal elements. With a DTD, your XML files can carry a description of its own
format, independent groups of people can agree on a standard for interchanging [Link] , you
can verify that the data you receive from the outside world is valid.

4.6.3 XML Schemas


An XML Schema describes the structure of an XML document, just like a [Link] XML document
with correct syntax is called "Well Formed".An XML document validated against an XML
Schema is both "Well Formed" and "Valid".
Example:
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>

48
The Schema above is interpreted like this:
• <xs:element name="note"> defines the element called "note"
• <xs:complexType> the "note" element is a complex type
• <xs:sequence> the complex type is a sequence of elements
• <xs:element name="to" type="xs:string"> the element "to" is of type string (text)
• <xs:element name="from" type="xs:string"> the element "from" is of type string
• <xs:element name="heading" type="xs:string"> the element "heading" is of type string
• <xs:element name="body" type="xs:string"> the element "body" is of type string

XML Schemas are More Powerful than DTD. XML Schemas are written in XML, are extensible to
additions, support data types and namespaces.

4.6.4 XML Variable


Definition and Usage
The <xsl:variable> element is used to declare a local or global variable.

Syntax:
<xsl:variable name=”name” select=”expression”>

<!--conten:template -- >

</xsl:variable>

Attributes
Attribute Value Description
name name required. Specifies the name of the [Link] expression Optional. Defines the value
of the variable.

Example 1
If the select attribute is present, the <xsl:variable> element cannot contain any content. If the select
attribute contains a literal string, the string, must be within quotes. The following example assigns the
value “red” to the variable “color”:

<xsl: variable name=”color” select=”red”/>

Example 2
If the <xsl:variable> element only contains a name attribute , and there is no content, then the value
of the variable is an empty string:

<xsl: variable name=”j”/>

49
Example 3
The following example adds a value to the variable “header” by the content of the <xsl: variable>
element:

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


<xsl:stylesheet version="1.0"
xmlns:xsl="[Link]
<xsl:variable name=”header”>
<tr>
<th> Element</th>
<th> Description </th>
</tr>
</xsl:variable>
<xsl:template math =”/”>
<html>
<<body>
<table>
<xsl:copy-of select=”$header”/>
<xsl:for-each select=”reference/record”>
<tr>
<xsl:if category=”XML”>
<td><xsl:value-of select=”description”/ ></td>
</xsl:if>
</tr>
</xsl:for-eacj>
</table>
<br/>
>table>
<xsl:copy-of select=”&header”/>
<xsl:for-each select=”table/record”>
<tr>
<xsl:if category=”XSL”>
<td><xsl:value-of select=”element”/></td>
<td><xsl:value-of select=” description”/></td>
</xsl:if>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

4.6.4 Applications of XML.

1. XML-based formats have become the default for many office-productivity tools, including
Microsoft Office (Office Open XML), [Link] and LibreOffice (Open Document), and
Apple's iWork.
2. XML has also been employed as the base language for communication protocols.
3. Applications for the Microsoft .NET Framework use XML files for configuration.
4. XML has come into common use for the interchange of data over the Internet.

50
4.6.5 DTD
A Document Type Definition (DTD) defines the legal building blocks of an XML document. It defines
the document structure with a list of legal elements and attributes.

A DTD can be declared inline inside an XML document, or as an external reference.

Internal DTD Declaration


If the DTD is declared inside the XML file, it should be wrapped in a DOCTYPE definition with the
following syntax:

< !DOCTYPE root-element [element-declarations]>

Example XML document with an internal DTD:

< ?xml version="1.0"?>


< !DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
< note>
<to>Raj</to>
<from>Rani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
< /note>

The DTD above is interpreted like this:

• !DOCTYPE note defines that the root element of this document is note
• !ELEMENT note defines that the note element contains four elements:
"to,from,heading,body"
• !ELEMENT to defines the to element to be of type "#PCDATA"
• !ELEMENT from defines the from element to be of type "#PCDATA"
• !ELEMENT heading defines the heading element to be of type "#PCDATA"
• !ELEMENT body defines the body element to be of type "#PCDATA"

External DTD Declaration


If the DTD is declared in an external file, it should be wrapped in a DOCTYPE definition with the
following syntax:

< !DOCTYPE root-element SYSTEM "filename">

This is the same XML document as above, but with an external DTD (Open it, and select view source):

< ?xml version="1.0"?>


< !DOCTYPE note SYSTEM "[Link]">
< note>
<to>Raj</to>
< from>Rani</from>

51
< heading>Reminder</heading>
< body>Don't forget me this weekend!</body>
< /note>

And this is the file "[Link]" which contains the DTD:

< !ELEMENT note (to, from, heading, body)>


< !ELEMENT to (#PCDATA)>
< !ELEMENT from (#PCDATA)>
< !ELEMENT heading (#PCDATA)>
< !ELEMENT body (#PCDATA)>

DTD – Elements
In a DTD, elements are declared with an ELEMENT declaration.

Declaring Elements
In a DTD, XML elements are declared with an element declaration with the following syntax:

< !ELEMENT element-name category>


or
< !ELEMENT element-name (element-content)>

Empty Elements
Empty elements are declared with the category keyword EMPTY:

< !ELEMENT element-name EMPTY>

Example:

< !ELEMENT br EMPTY>

XML example:

<br />

Elements with Parsed Character Data


Elements with only parsed character data are declared with #PCDATA inside parentheses:

< !ELEMENT element-name (#PCDATA)>

Example:
< !ELEMENT from (#PCDATA)>

Elements with any Contents


Elements declared with the category keyword ANY, can contain any combination of parsable data:

< !ELEMENT element-name ANY>

Example:

52
< !ELEMENT note ANY>

Elements with Children (sequences)


Elements with one or more children are declared with the name of the children elements inside
parentheses:

< !ELEMENT element-name (child1)>


or
< !ELEMENT element-name (child1,child2,...)>

Example:

< !ELEMENT note (to,from,heading,body)>

When children are declared in a sequence separated by commas, the children must appear in the
same sequence in the document. In a full declaration, the children must also be declared, and the
children can also have children. The full declaration of the "note" element is:

< !ELEMENT note (to,from,heading,body)>


< !ELEMENT to (#PCDATA)>
< !ELEMENT from (#PCDATA)>
< !ELEMENT heading (#PCDATA)>
< !ELEMENT body (#PCDATA)>

Declaring Only One Occurrence of an Element


< !ELEMENT element-name (child-name)>

Example:

< !ELEMENT note (message)>

The example above declares that the child element "message" must occur once, and only once inside
the "note" element.

Declaring Minimum One Occurrence of an Element


< !ELEMENT element-name (child-name+)>

Example:

< !ELEMENT note (message+)>

The + sign in the example above declares that the child element "message" must occur one or more
times inside the "note" element.

Declaring Zero or More Occurrences of an Element


< !ELEMENT element-name (child-name*)>

Example:

< !ELEMENT note (message*)>

The * sign in the example above declares that the child element "message" can occur zero or more
times inside the "note" element.

53
Declaring Zero or One Occurrences of an Element
< !ELEMENT element-name (child-name?)>

Example:

< !ELEMENT note (message?)>

The ?sign in the example above declares that the child element "message" can occur zero or one time
inside the "note" element.

Declaring either/or Content


Example:

< !ELEMENT note (to,from,header,(message|body))>

The example above declares that the "note" element must contain a "to" element, a "from" element, a
"header" element, and either a "message" or a "body" element.

Declaring Mixed Content


Example:

< !ELEMENT note (#PCDATA|to|from|header|message)*>

The example above declares that the "note" element can contain zero or more occurrences of parsed
character data, "to", "from", "header", or "message" elements.

54

You might also like