An Introduction to HTML[1]
Transcript of An Introduction to HTML[1]
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 1/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 2/118
ContCont
The markup tags tell the Web browserThe markup tags tell the Web browserhow to displayhow to display the pagethe page
An HTML file must have an An HTML file must have an htmhtm oror htmlhtmlfile extension.file extension.
HTML will display the data not descripeHTML will display the data not descripethe data.the data.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 3/118
Tags in HtmlTags in Html
HTML files are just plain text, withHTML files are just plain text, with tagstags mixed inmixed infor formatting. Tags are used like this:for formatting. Tags are used like this:
<h1>Blorf!</h1><h1>Blorf!</h1> Tags come in pairs surroundingTags come in pairs surrounding
pieces of text. The tags themselves are made uppieces of text. The tags themselves are made upof <, the tag name, and >. The first tag (of <, the tag name, and >. The first tag (<H1><H1>) ) is called theis called the start tagstart tag, the text inside ("Blorf!") is, the text inside ("Blorf!") iscalled thecalled the content content, and the second tag (, and the second tag (</H1></H1>) )
is called theis called the end tagend tag.. The <h1> tag signifies that the content text The <h1> tag signifies that the content text
should be displayed as a header (the 1 meansshould be displayed as a header (the 1 meansthat it is at level 1, the largest ). When viewed inthat it is at level 1, the largest ). When viewed inthe browser (Mosaic, lynx, or whatever), thethe browser (Mosaic, lynx, or whatever), theabove line will look like:above line will look like:
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 4/118
Cont.Cont.
Although most tags work this way, some tags Although most tags work this way, some tagsdon't have end tags. For example, thedon't have end tags. For example, the <P><P> tagtagfor specifying the beginning of a paragraphfor specifying the beginning of a paragraph
doesn't need adoesn't need a </P></P> at the end of theat the end of theparagraph. We will discuss this tag (and others) paragraph. We will discuss this tag (and others) later in this document.later in this document.
Tag names are not caseTag names are not case--sensitive, sosensitive, so <H1><H1> andand<h1><h1>
are equivalent, for instance.are equivalent, for instance.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 5/118
ContCont
Some tags may also have optionalSome tags may also have optional attributesattributes,,which modify the interpretation of the tag. Forwhich modify the interpretation of the tag. Forexample, theexample, the <IMG><IMG> tag, which tells the browsertag, which tells the browser
to display an image, can have a SRC attribute toto display an image, can have a SRC attribute tospecify the image's name or an ALIGN atttributespecify the image's name or an ALIGN atttributeto specify the alignment compared to theto specify the alignment compared to thesurrounding text. With attributes, a tag might besurrounding text. With attributes, a tag might be
used like this:used like this: <IMG SRC="blorf.gif" ALIGN="top"><IMG SRC="blorf.gif" ALIGN="top">
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 6/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 7/118
OUTPUTOUTPUT
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 8/118
Paragraphs and SpacesParagraphs and Spaces
The biggest problem that beginners have withThe biggest problem that beginners have withHTML is that spaces, tabs, and returnsHTML is that spaces, tabs, and returns----knownknowncollectively as "white space"collectively as "white space"----are all treated theare all treated the
same. If I typesame. If I type This is a test.This is a test. oror
This isa test.This isa test. oror
This is a test.This is a test. the result is always the same:the result is always the same:
This is a test.This is a test. So, just pressing "return" at the end of a line willSo, just pressing "return" at the end of a line will
not make a new paragraph. To make anot make a new paragraph. To make aparagraph, use theparagraph, use the <P><P> tag at thetag at the beginningbeginning of of
the paragraph. For example:the paragraph. For example:
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 9/118
Section HeadingsSection Headings
Heading level 1 <H1>Heading level 1 <H1>
Heading level 2 <H2>Heading level 2 <H2>
Heading level 3 <H3>Heading level 3 <H3> Heading level 4 <H4>Heading level 4 <H4>
Heading level 5 <H5>Heading level 5 <H5>
Heading level 6 <H6>Heading level 6 <H6>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 10/118
ExampleExample
<html><html> <head><head> <title>Hello Student</title><title>Hello Student</title> </head></head>
<body><body> <h1>welcome to IPEC </h1><h1>welcome to IPEC </h1> <h2>welcome to IPEC </h2><h2>welcome to IPEC </h2> <h3>welcome to IPEC </h3><h3>welcome to IPEC </h3> <h4>welcome to IPEC </h4><h4>welcome to IPEC </h4> <h5>welcome to IPEC </h5><h5>welcome to IPEC </h5>
<h6>welcome to IPEC </h6><h6>welcome to IPEC </h6>
</html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 11/118
OUTPUTOUTPUT
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 12/118
Type StylesType Styles
HTML allows the use of a number of different HTML allows the use of a number of different type styles. The most useful aretype styles. The most useful are <EM><EM>, for, foraddingadding emphasisemphasis likelike thisthis, and, and <STRONG><STRONG> forfor
stronger emphasisstronger emphasis. Browsers may display the. Browsers may display thetext in italics, in bold characters, underlined, intext in italics, in bold characters, underlined, inall capital letters, or with asterisks around it.all capital letters, or with asterisks around it.
In general, it is best to useIn general, it is best to use <EM><EM> andand<STRONG><STRONG>, since they give good results on all, since they give good results on allbrowsers. If you need to, however, you can usebrowsers. If you need to, however, you can use<I><I>, which produces, which produces italicsitalics, or, or <B><B> whichwhichproducesproduces boldbold text.text.
There is also typewriter style,There is also typewriter style, like thislike this,,produced with theproduced with the <TT><TT> tag.tag.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 13/118
ListsLists
Lists are a very useful construct in HTML. ThereLists are a very useful construct in HTML. Thereare three types of lists: ordered, unordered, andare three types of lists: ordered, unordered, anddescriptive.descriptive.
Ordered lists produce a list of numbered items.Ordered lists produce a list of numbered items.To make an ordered list, use theTo make an ordered list, use the <OL><OL> (ordered(orderedlist ) andlist ) and <LI><LI> (list item) tags, like this:(list item) tags, like this:
<OL><LI>Get two slices of bread, peanut butter,<OL><LI>Get two slices of bread, peanut butter,
and jelly.<LI>Spread jelly on one side of oneand jelly.<LI>Spread jelly on one side of oneslice of bread.<LI>Spread peanut butter on theslice of bread.<LI>Spread peanut butter on theother side of the other slice.<LI>Put theother side of the other slice.<LI>Put thesandwich together and eat!</OL>sandwich together and eat!</OL>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 14/118
Cont.Cont.
The result is this:The result is this:
1.1. Get two slices of bread, peanut butter, and jelly.Get two slices of bread, peanut butter, and jelly.
2.2. Spread jelly on one side of one slice of bread.Spread jelly on one side of one slice of bread.
3.3. Spread peanut butter on the other side of theSpread peanut butter on the other side of theother slice.other slice.
4.4. Put the sandwich together and eat!Put the sandwich together and eat!
As you can see, the items are automatically As you can see, the items are automaticallynumbered in order.numbered in order.
Unordered lists are similar: instead of Unordered lists are similar: instead of <OL><OL>, use, use<UL><UL>. For example:. For example:
Bread (two slices) Bread (two slices)
ellell
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 15/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 16/118
ContCont
<h4>Letters list:</h4><h4>Letters list:</h4><ol type=" A"><ol type=" A">
<li> Apples</li><li> Apples</li> <li>Bananas</li><li>Bananas</li> <li>Lemons</li><li>Lemons</li> <li>Oranges</li><li>Oranges</li></ol></ol>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 17/118
ContCont
<h4>Lowercase letters list:</h4><h4>Lowercase letters list:</h4><ol type="a"><ol type="a">
<li> Apples</li><li> Apples</li> <li>Bananas</li><li>Bananas</li> <li>Lemons</li><li>Lemons</li> <li>Oranges</li><li>Oranges</li></ol></ol>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 18/118
ContCont
<h4>Roman numbers list:</h4><h4>Roman numbers list:</h4><ol type="I"><ol type="I">
<li> Apples</li><li> Apples</li> <li>Bananas</li><li>Bananas</li> <li>Lemons</li><li>Lemons</li> <li>Oranges</li><li>Oranges</li></ol></ol>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 19/118
ContCont
<h4>Lowercase Roman numbers<h4>Lowercase Roman numberslist:</h4>list:</h4>
<ol type="i"><ol type="i"> <li> Apples</li><li> Apples</li> <li>Bananas</li><li>Bananas</li> <li>Lemons</li><li>Lemons</li>
<li>Oranges</li><li>Oranges</li> </ol></ol>
</body></body> </html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 20/118
OUTPUTOUTPUT
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 21/118
Example 2Example 2
<html><html> <body><body>
<h4> An Unordered List:</h4><h4> An Unordered List:</h4> <ul><ul> <li>Coffee</li><li>Coffee</li> <li>Tea</li><li>Tea</li> <li>Milk</li><li>Milk</li>
</ul></ul>
</body></body> </html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 22/118
OUTPUTOUTPUT
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 23/118
TablesTables
Tables are defined with the <table> tag. A table isTables are defined with the <table> tag. A table isdivided into rows (with the <tr> tag), and eachdivided into rows (with the <tr> tag), and eachrow is divided into data cells (with the <td>row is divided into data cells (with the <td>
tag). The letters td stands for "table data,"tag). The letters td stands for "table data,"which is the content of a data cell. A data cellwhich is the content of a data cell. A data cellcan contain text, images, lists, paragraphs,can contain text, images, lists, paragraphs,forms, horizontal rules, tables, etc.forms, horizontal rules, tables, etc.
<table border="1"><tr><td>row 1, cell<table border="1"><tr><td>row 1, cell1</td><td>row 1, cell 2</td></tr><tr><td>row 2,1</td><td>row 1, cell 2</td></tr><tr><td>row 2,cell 1</td><td>row 2, cell 2</td></tr></table>cell 1</td><td>row 2, cell 2</td></tr></table>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 24/118
Tables and the Border AttributeTables and the Border Attribute
<table border="1"><tr><td>Row 1, cell<table border="1"><tr><td>Row 1, cell
1</td><td>Row 1, cell 2</td></tr>1</td><td>Row 1, cell 2</td></tr></table></table>
<table<tableborder="1"><tr><th>Heading</th><th>Anoborder="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cellther Heading</th></tr><tr><td>row 1, cell
1</td><td>row 1, cell1</td><td>row 1, cell
2</td></tr><tr><td>row 2, cell2</td></tr><tr><td>row 2, cell1</td><td>row 2, cell 2</td></tr>1</td><td>row 2, cell 2</td></tr></table></table>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 25/118
Empty Cells in a TableEmpty Cells in a Table
<table border="1"><tr><td>row 1, cell<table border="1"><tr><td>row 1, cell
1</td><td>row 1, cell1</td><td>row 1, cell2</td></tr><tr><td>row 2, cell2</td></tr><tr><td>row 2, cell
1</td><td></td></tr>1</td><td></td></tr></table></table>
<table border="1"><tr><td>row 1, cell<table border="1"><tr><td>row 1, cell
1</td><td>row 1, cell1</td><td>row 1, cell
2</td></tr><tr><td>row 2, cell2</td></tr><tr><td>row 2, cell1</td><td> </td></tr>1</td><td> </td></tr></table></table>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 26/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 27/118
ContCont
<tr><tr> <td>First</td><td>First</td> <td>Row</td><td>Row</td> </tr></tr> <tr><tr> <td>Second</td><td>Second</td>
<td>Row</td><td>Row</td> </tr></tr> </table></table>
<h4>With a thick border:</h4><h4>With a thick border:</h4>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 28/118
ContCont
</table></table>
</body></body></html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 29/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 30/118
Table TagsTable Tags
TagTag
DescriptionDescription
<table><table>
Defines a tableDefines a table <th><th>
Defines a table headerDefines a table header
<tr><tr> Defines a table rowDefines a table row
<td><td>
Defines a table cellDefines a table cell
<caption><caption>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 31/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 32/118
FramesFrames
With frames, you can display more thanWith frames, you can display more thanone HTML document in the same browserone HTML document in the same browserwindow. Each HTML document is called awindow. Each HTML document is called aframe, and each frame is independent of frame, and each frame is independent of the others.the others.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 33/118
The Frameset TagThe Frameset Tag
The <frameset> tag defines how to divide theThe <frameset> tag defines how to divide thewindow into frameswindow into frames
Each frameset defines a set of rowsEach frameset defines a set of rows oror columnscolumns
The values of the rows/columns indicate theThe values of the rows/columns indicate theamount of screen area each row/column willamount of screen area each row/column willoccupyoccupy
The Frame TagThe Frame Tag
The <frame> tag defines what HTML document The <frame> tag defines what HTML document to put into each frameto put into each frame
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 34/118
ContCont
In the example below we have a frameset withIn the example below we have a frameset withtwo columns. The first column is set to 25% of two columns. The first column is set to 25% of the width of the browser window. The secondthe width of the browser window. The secondcolumn is set to 75% of the width of thecolumn is set to 75% of the width of the
browser window. The HTML document browser window. The HTML document "frame_a.htm" is put into the first column, and"frame_a.htm" is put into the first column, andthe HTML document "frame_b.htm" is put intothe HTML document "frame_b.htm" is put intothe second column:the second column:
<frameset cols="25%,75%"><frameset cols="25%,75%"> <frame src="frame_a.htm"><frame src="frame_a.htm"> <frame src="frame_b.htm"><frame src="frame_b.htm"> </frameset></frameset>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 35/118
Examples according to columnsExamples according to columns
<html><html>
<frameset cols="25%,50%,25%"><frameset cols="25%,50%,25%">
<frame src="frame_a.htm"><frame src="frame_a.htm"> <frame src="frame_b.htm"><frame src="frame_b.htm">
<frame src="frame_c.htm"><frame src="frame_c.htm">
</frameset></frameset>
</html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 36/118
OUTPUTOUTPUT
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 37/118
Examples according to RowsExamples according to Rows
<html><html>
<frameset cols="25%,50%,25%"><frameset cols="25%,50%,25%">
<frame src="frame_a.htm"><frame src="frame_a.htm">
<frame src="frame_b.htm"><frame src="frame_b.htm">
<frame src="frame_c.htm"><frame src="frame_c.htm">
</frameset></frameset>
</html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 38/118
OUTPUTOUTPUT
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 39/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 40/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 41/118
LinksLinks
A full explanation of how to create links between A full explanation of how to create links betweendocuments is beyond the scope of thisdocuments is beyond the scope of thisdocument. However, we can give a quickdocument. However, we can give a quick
introduction.introduction. Links, sometimes referred to as "anchors", areLinks, sometimes referred to as "anchors", are
specified with thespecified with the <A><A> tag. Like thetag. Like the <IMG><IMG> tag,tag,<A><A> does nothing bydoes nothing by IPECelf IPECelf. The. The HREF=""HREF=""
attribute specifies the URL that the link pointsattribute specifies the URL that the link pointsto. As always, an example:to. As always, an example:
If you click <A HREF="link.html">here</A>, youIf you click <A HREF="link.html">here</A>, youwill seethe file "link.html".will seethe file "link.html".
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 42/118
Other Random TagsOther Random Tags
There are a number of other tags, more and lessThere are a number of other tags, more and lessuseful. A quick survey:useful. A quick survey:
<PRE><PRE>
Preformatted text: rendered in aPreformatted text: rendered in a monospacemonospace
font. Unlike most HTML, white space isfont. Unlike most HTML, white space issignificant. Tags are still honored, though. Thissignificant. Tags are still honored, though. Thisstyle is useful for tables of information, sincestyle is useful for tables of information, sincetabs work.tabs work.
<LISTING><LISTING>
Similar toSimilar to <PRE><PRE>, but in a smaller size. Meant , but in a smaller size. Meant for program listings. Supposedly, embeddedfor program listings. Supposedly, embeddedtags are ignored.tags are ignored.
<BLOCKQUOTE><BLOCKQUOTE>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 43/118
How to make FormsHow to make Forms
<form method="post" action="mailto:<form method="post" action="mailto:your email address here">your email address here">
Next you want to actually start yourNext you want to actually start your
form:form: First Name: <input name="first"First Name: <input name="first"
type="text" size=12>type="text" size=12> Last Name: <input name="last"Last Name: <input name="last"
type="text" size=12>type="text" size=12> Email Address: <input name="address"Email Address: <input name="address"
type="text" size=30>type="text" size=30>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 44/118
Cont.Cont.
Comments:Comments: <textarea name="whatever" rows=5<textarea name="whatever" rows=5
cols=30> </textarea>cols=30> </textarea>
<select name="whatever" size=4><select name="whatever" size=4><option>choose me <option>choose me<option>choose me <option>choose me<option>choose me <option>choose me<option>choose me <option>choose me<option>choose me<option>choose me
</select></select> Now you want your buttons at the Now you want your buttons at the bottom of the form:bottom of the form:
<input type="Submit" value="Send it in"><input type="Submit" value="Send it in">
<input type="reset" value="reset"><input type="reset" value="reset">
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 45/118
Cont.Cont.
And then you need And then you need
the
clo
sing tag:the
clo
sing tag:</form></form> This is whatThis is what
itwo
uld all loo
k like
:itwo
uld all loo
k like
:
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 46/118
OUTPUTOUTPUT
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 47/118
What is JavaScript?What is JavaScript?
JavaScript is used in millions of WebJavaScript is used in millions of Webpages to improve the design, validatepages to improve the design, validateforms, detect browsers, create cookies,forms, detect browsers, create cookies,and much more.and much more.
JavaScript is the most popular scriptingJavaScript is the most popular scriptinglanguage on the internet, and works in alllanguage on the internet, and works in all
major browsers, such as Internet Explorer,major browsers, such as Internet Explorer,Mozilla, Firefox, Netscape, and Opera.Mozilla, Firefox, Netscape, and Opera.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 48/118
Cont.Cont.
JavaScript was designed to addJavaScript was designed to addinteractivity to HTML pagesinteractivity to HTML pages
JavaScript is a scripting languageJavaScript is a scripting language A scripting language is a lightweight A scripting language is a lightweight
programming languageprogramming language
A JavaScript consists of lines of executable A JavaScript consists of lines of executablecomputer codecomputer code
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 49/118
ContCont
A JavaScript is usually embedded directly A JavaScript is usually embedded directlyinto HTML pagesinto HTML pages
JavaScript is an interpreted languageJavaScript is an interpreted language(means that scripts execute without (means that scripts execute without preliminary compilation)preliminary compilation)
Everyone can use JavaScript without Everyone can use JavaScript without
purchasing a licence.purchasing a licence.
Are Java and Java cript theAre Java and Java cript the
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 50/118
Are Java and Java cript theAre Java and Java cript the
Same?Same?
NO!NO!
Java and JavaScript are two completelyJava and JavaScript are two completelydifferent languages in both concept anddifferent languages in both concept and
design!design! Java (developed by Sun Microsystems) isJava (developed by Sun Microsystems) is
a powerful and much more complexa powerful and much more complex
programming languageprogramming language -- in the samein the samecategory as C and C++.category as C and C++.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 51/118
What can a JavaScript Do?What can a JavaScript Do?
JavaScript gives HTML designers aJavaScript gives HTML designers aprogramming toolprogramming tool -- HTML authors areHTML authors arenormally not programmers, but JavaScript is anormally not programmers, but JavaScript is ascripting language with a very simple syntax!scripting language with a very simple syntax! Almost anyone can put small "snippets" of code Almost anyone can put small "snippets" of codeinto their HTML pagesinto their HTML pages
JavaScript can put dynamic text into anJavaScript can put dynamic text into anHTML page HTML page -- A JavaScript statement like this: A JavaScript statement like this:document.write("<h1>" + name + "</h1>") document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page.can write a variable text into an HTML page.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 52/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 53/118
Cont.Cont.
avaScript can be used to validate avaScript can be used to validate datadata -- A JavaScript can be used to A JavaScript can be used tovalidate form data before it is submitted tovalidate form data before it is submitted toa server. This saves the server from extraa server. This saves the server from extraprocessing .processing .
JavaScript can be used to create JavaScript can be used to create
cookiescookies -- A JavaScript can be used to A JavaScript can be used tostore and retrieve information on thestore and retrieve information on thevisitor's computer .visitor's computer .
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 54/118
First Java ScriptFirst Java Script
<html><html>
<head><head>
<title>ok</title><title>ok</title>
<script language="javascript"><script language="javascript">
document.write(<B>Hello World!")document.write(<B>Hello World!")
</script></script>
</html</html
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 55/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 56/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 57/118
ContCont
<p>This example declares a variable, assigns a<p>This example declares a variable, assigns avalue to it, and then displays the variable.</p>value to it, and then displays the variable.</p>
<p>Then the variable is displayed one more<p>Then the variable is displayed one moretime, only this time as a heading.</p>time, only this time as a heading.</p>
</body></body> </html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 58/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 59/118
ContCont
HegeHegeHegeHege
This example declares a variable, assignsThis example declares a variable, assignsa value to it, and then displays thea value to it, and then displays thevariable.variable.
Then the variable is displayed one moreThen the variable is displayed one moretime, only this time as a heading.time, only this time as a heading.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 60/118
Alert() methodAlert() method
alert()alert() is a method of the window object.is a method of the window object.It is employed to display popIt is employed to display pop--up boxesup boxeswith some text and a button labeled "OK".with some text and a button labeled "OK".
Usage of the alert() method is similar toUsage of the alert() method is similar tothe write() method of the window object.the write() method of the window object.The text placed inside the parenthesis isThe text placed inside the parenthesis is
displayed on the popdisplayed on the pop--up box.up box.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 61/118
Cont.Cont.
window.alert("I am an alert box");window.alert("I am an alert box"); SinceSince
it's not necessary to specify the windowit's not necessary to specify the windowobject we can leave it out from the code.object we can leave it out from the code.
Thus, the following code will functionThus, the following code will functionequally well as the one above.equally well as the one above.
alert("I am an alert box");alert("I am an alert box");
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 62/118
How to write text on multiple How to write text on multiple
lines in an alert box? lines in an alert box? Here are some commonly used escapesHere are some commonly used escapes
characters:characters:
\\nn: Inserts a new line and causes the text : Inserts a new line and causes the text
following it to be placed on that line.following it to be placed on that line. \\tt: Inserts a tab: Inserts a tab
\\rr: Carriage return: Carriage return
\\bb: Backspace: Backspace \\ff: Form feed: Form feed
\\'': Single quote: Single quote
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 63/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 64/118
Cont.Cont.
<input type=button value="Try it now"<input type=button value="Try it now" onClick="if(confirm('Format the hardonClick="if(confirm('Format the hard
disk?'))disk?'))
alert('You are very brave!');alert('You are very brave!'); else alert(' A wise decision!')">else alert(' A wise decision!')"> </form></form> </script></script> </body></body> </html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 65/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 66/118
ContCont
lobal and Local variables inlobal and Local variables in
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 67/118
lobal and Local variables inlobal and Local variables in
JavaScript FunctionsJavaScript Functions
JavaScript functions help us divided ourJavaScript functions help us divided ourscript into discrete chunks of code.script into discrete chunks of code.Functions contain blocks of statementsFunctions contain blocks of statements
that can be regarded as separate entitiesthat can be regarded as separate entitiesfrom the main script because they arefrom the main script because they areonly executed when the function is called.only executed when the function is called.
Understanding Java cript orUnderstanding Java cript or
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 68/118
Understanding Java cript or Understanding Java cript or
LoopLoop
for (Initialization statements; Condition;for (Initialization statements; Condition;
UpdationUpdation statements) { ... statements ... }statements) { ... statements ... }
We can use aWe can use a forfor loop to print loop to print digIPECdigIPEC 1 to1 to10 in an alert box.10 in an alert box.
varvar msgmsg = ""; for (= ""; for (varvar x = 1; x <= 10; x++) {x = 1; x <= 10; x++) {
msgmsg == msgmsg + x + "+ x + "\ \n"; } alert(n"; } alert(msgmsg););
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 69/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 70/118
The while loopThe while loop
The while loop is used when you want theThe while loop is used when you want theloop to execute and continue executingloop to execute and continue executingwhile the specified condition is true.while the specified condition is true.
while (var<=endvalue) {while (var<=endvalue) {
code to be executedcode to be executed
}}
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 71/118
ExampleExample
<html> <body> <script <html> <body> <script type="text/javascript">type="text/javascript">
var i=0 while (i<=10) {var i=0 while (i<=10) {document.write("The number is " + i) document.write("The number is " + i) document.write("<br />") i=i+1 }document.write("<br />") i=i+1 }</script></script>
</body></body>
</html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 72/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 73/118
The do...while LoopThe do...while Loop
The do...while loop is a variant of theThe do...while loop is a variant of thewhile loop. This loop will always execute awhile loop. This loop will always execute ablock of code ONCE, and then it willblock of code ONCE, and then it will
repeat the loop as long as the specifiedrepeat the loop as long as the specifiedcondition is truecondition is true
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 74/118
ExampleExample
<html> <body><html> <body>
<script language="javascript"><script language="javascript">
var i=0 do {var i=0 do { document.write("The number is " + i) document.write("The number is " + i)
document.write("<br />") i=i+1 }document.write("<br />") i=i+1 }
while (i<0) while (i<0) </script> </body> </html></script> </body> </html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 75/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 76/118
Switch StatementSwitch Statement
<html><html> <body><body> <script type="text/javascript"><script type="text/javascript"> var d = new Date()var d = new Date() theDay=d.getDay()theDay=d.getDay()
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 77/118
ContCont
switch (theDay)switch (theDay) {{ case 5:case 5: document.write("<b>Finallydocument.write("<b>Finally
Friday</b>")Friday</b>") breakbreak case 6:case 6: document.write("<b>Superdocument.write("<b>SuperSaturday</b>")Saturday</b>")
breakbreak
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 78/118
ContCont
case 0:case 0: document.write("<b>Sleepydocument.write("<b>SleepySunday</b>")Sunday</b>")
breakbreak default:default: document.write("<b>I'm really lookingdocument.write("<b>I'm really looking
forward to this weekend!</b>")forward to this weekend!</b>") }} </script></script>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 79/118
Cont.Cont.
<p>This JavaScript will generate<p>This JavaScript will generatea different greeting based ona different greeting based onwhat day it is. Note that what day it is. Note that
Sunday=0, Monday=1,Sunday=0, Monday=1,Tuesday=2, etc.</p>Tuesday=2, etc.</p>
</body></body></html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 80/118
Br eak statementBr eak statement
<html> <body><html> <body>
<script language="javascript"><script language="javascript">for(var i=0; i<5; i++)for(var i=0; i<5; i++)
{{ if(i == 3) if(i == 3) break;break;
document.write("i isdocument.write("i is -- "+i);"+i);}}
document.write("document.write(" ------------------ After Looping After Looping------------ ");");</script></script></body></html></body></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 81/118
JavaScript FunctionsJavaScript Functions
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 82/118
JavaScript FunctionsJavaScript Functions
A function is a reusable code A function is a reusable code--block that will beblock that will beexecuted by an event, or when the function isexecuted by an event, or when the function iscalled.called.
Functions can be defined both in the <head>Functions can be defined both in the <head>and in the <body> section of a document.and in the <body> section of a document.However, to assure that the function isHowever, to assure that the function isread/loaded by the browser before it is called, it read/loaded by the browser before it is called, it
could be wise to put it in the <head> section.could be wise to put it in the <head> section.
ExampleExample
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 83/118
ExampleExample
html> <head> <script type="text/javascript">html> <head> <script type="text/javascript">function displaymessage() {function displaymessage() {
alert("Hello World!")alert("Hello World!")
} </script>} </script> </head></head>
<body> <form> <input type="button"<body> <form> <input type="button"
value="Click me!" onclick="displaymessage()" >value="Click me!" onclick="displaymessage()" ></form> </body> </html></form> </body> </html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 84/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 85/118
ExampleExample
<html><html>
<head><head>
<script language="javascript"><script language="javascript"> function myfunction()function myfunction()
{{
alert("HELLO")alert("HELLO")
}}
</script></script>
</head></head>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 86/118
ContCont
<body><body> <form><form> <input type="button"<input type="button" onclick="myfunction()"onclick="myfunction()" value="Call function">value="Call function"> </form></form> <p>By pressing the button, a function will be<p>By pressing the button, a function will be
called. The function will alert a message.</p>called. The function will alert a message.</p> </body></body> </html></html>
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 87/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 88/118
OutputOutput
Java cript ArraysJava cript Arrays -- creatingcreating
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 89/118
and storing valuesand storing values
An array can be regarded as a set of An array can be regarded as a set of variables. This does not mean that thevariables. This does not mean that thevariables in an array are related to eachvariables in an array are related to each
other; they are still separate entities inother; they are still separate entities inthemselves. Arrays helps us groupthemselves. Arrays helps us groupvariables, which we plan to use for avariables, which we plan to use for a
particular purpose because accessing theirparticular purpose because accessing theirvalues becomes a lot easier this way.values becomes a lot easier this way.
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 90/118
Cont.Cont.
Let's see how we make an array.Let's see how we make an array.
var city = new Array();var city = new Array(); Each array isEach array is
initialized using theinitialized using the newnew keyword with thekeyword with the Array() Array() construct (Isn't this similar toconstruct (Isn't this similar tousingusing Date() Date()?). So here we initialize and?). So here we initialize andarray calledarray called citycity. Now we fill this array. Now we fill this array
with our values (city names).with our values (city names).
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 91/118
ContCont
city[0] = "New York"; city[1] = "London";city[0] = "New York"; city[1] = "London";
city[2] = "New Delhi"; city[3] = "Sydney";city[2] = "New Delhi"; city[3] = "Sydney";city[4] = "Tokyo"; city[5] = "Moscow";city[4] = "Tokyo"; city[5] = "Moscow";
city[6] = "Lima";city[6] = "Lima";
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 92/118
ExampleExample
<html><html> <head><head> <title>Javascipt <title>Javascipt -- array plusarray plus
manipulation</title>manipulation</title> <script language=javascript "><script language=javascript "> function array() { }function array() { } student = new array()student = new array() student[1] = 23student[1] = 23 student[2] = 34student[2] = 34 student[3] = 67student[3] = 67
student[4] = 76student[4] = 76
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 93/118
ContCont
document.writeln("<h2>Student document.writeln("<h2>Student results</h2>")results</h2>")
document.writeln("<ul>")document.writeln("<ul>")
numStudents = 0numStudents = 0 sum=0sum=0 ans=0ans=0
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 94/118
ContCont
for (i in student ){for (i in student ){ document.writeln("<li>Student " + i + document.writeln("<li>Student " + i +
": " + student[i] + "%")": " + student[i] + "%")
numStudents++numStudents++ sum=sum+student[i]sum=sum+student[i] }} document.writeln("</ul>")document.writeln("</ul>")
ans = Math.round(sum/numStudents)ans = Math.round(sum/numStudents) document.writeln("student average is " + document.writeln("student average is " +
ans + "%")ans + "%")
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 95/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 96/118
OutputOutput
The Java cript promptThe Java cript prompt --
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 97/118
Getting user inputGetting user input
TheThe prompt() prompt() is a method of the windowis a method of the windowobject, just likeobject, just like alert() alert() oror confirm() confirm()..
The format forThe format for prompt() prompt() is similar tois similar toalert() alert() oror confirm() confirm() except for oneexcept for oneaddition.addition.
prompt("Message", "default value in theprompt("Message", "default value in the
text field");text field");
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 98/118
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 99/118
OutputOutput
Date and Time in JavaScriptDate and Time in JavaScript
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 100/118
Date and Time in JavaScriptDate and Time in JavaScript
To start working with dates and time, weTo start working with dates and time, wefirst initialize a variable and assign it afirst initialize a variable and assign it avalue with the new operator and thevalue with the new operator and the
Date() constructor. The main function of Date() constructor. The main function of the new operator with Date() constructorthe new operator with Date() constructoris to create a new date object that isis to create a new date object that is
stored in the variable. Here is the code:stored in the variable. Here is the code: var d = new Date();var d = new Date();
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 101/118
ContCont
var t_date = d.var t_date = d.getDate()getDate();;
the month var t_mon = d.the month var t_mon = d.getMonth()getMonth();;
var t_year = d.var t_year = d.getFullYear()getFullYear();;
year var t_hour = d.year var t_hour = d.getHours()getHours();;
var t_min = d.var t_min = d.getMinutes()getMinutes();;
var t_sec = d.var t_sec = d.getSeconds()getSeconds();; var t_mil = d.var t_mil = d.getMillisecondsgetMilliseconds;;
CC
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 102/118
ContCont
alert("Today's date is " + t_date + "alert("Today's date is " + t_date + "--" +" +
t_mon + "t_mon + "--" + t_year);" + t_year);
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 103/118
C tC t
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 104/118
ContCont
navigator.appVersionnavigator.appVersion -- Gives the browserGives the browserversion (version (appapplicationlication Version Version))
navigator.appCodeNamenavigator.appCodeName -- Gives theGives thebrowser codename (browser codename (appapplicationlicationCodeNameCodeName))
navigator.platformnavigator.platform -- Gives the platform onGives the platform on
which the browser is runningwhich the browser is running
C tC t
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 105/118
Cont.Cont.
To automatically transfer the visitor, we have toTo automatically transfer the visitor, we have totake the help of take the help of locationlocation property of theproperty of thewindowwindow object. Let's look at the code.object. Let's look at the code.
<SCRIPT LANGUAGE="JavaScript"<SCRIPT LANGUAGE="JavaScript"TYPE="TEXT/JAVASCRIPT"> <!TYPE="TEXT/JAVASCRIPT"> <!---- var bname =var bname =navigator.appName; if (bname == "Microsoftnavigator.appName; if (bname == "MicrosoftInternet Explorer") {Internet Explorer") {
window.location="explorer_version.html"; } else {window.location="explorer_version.html"; } else {window.location="netscape_version.html"; } // window.location="netscape_version.html"; } //---->></SCRIPT></SCRIPT>
E t H dli i J S i tE t H dli i J S i t
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 106/118
Event Handling in Java ScriptEvent Handling in Java Script
The object may be a bus, travelling around IPEC The object may be a bus, travelling around IPEC route. The events that are significant for the busroute. The events that are significant for the busare:are:
Passenger boardsPassenger boards Passenger paysPassenger pays Passenger leavesPassenger leaves Bus arrives at destinationBus arrives at destination The important features of the model are that theThe important features of the model are that the
bus can take any route and still use the samebus can take any route and still use the sameevents, and the same events apply to any busevents, and the same events apply to any busand any combination of passengers.and any combination of passengers.
C tC t
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 107/118
ContCont
Computer programs use this idea. We can modelComputer programs use this idea. We can modelmost situations with the basic Object most situations with the basic Object--OrientatedOrientatedEvent Event--Driven computer programming idiom.Driven computer programming idiom.
HTML and JavaScript provide an excellent HTML and JavaScript provide an excellent
example of this model. HTML provides theexample of this model. HTML provides theobjects, and JavaScript provides the event objects, and JavaScript provides the event handling capability.handling capability.
This article will introduce the idea of attachingThis article will introduce the idea of attachingevents to HTML elements, and writing code toevents to HTML elements, and writing code to
provide greater finesse within our webprovide greater finesse within our webdocuments.documents.
107107
HTML EVENTSHTML EVENTS
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 108/118
HTML EVENTSHTML EVENTS
moving the mouse pointer and clicking themoving the mouse pointer and clicking themouse buttons create the following events:mouse buttons create the following events:
· onmousedown· onmousedown
· onmousemove· onmousemove· onmouseout · onmouseout · onmouseover· onmouseover· onmouseup· onmouseup
· onclick· onclick· ondblclick· ondblclick
C tC t
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 109/118
ContCont
Mouse Event Mouse Event DescriptionDescription
onmousedownonmousedown A mouse button has A mouse button hasbeen pressedbeen pressed
onmousemoveonmousemove The mouse has beenThe mouse has beenmovedmoved
onmouseout onmouseout The mouse pointer hasThe mouse pointer has
left an element left an element onmouseoveronmouseover The mouse pointer hasThe mouse pointer has
entered an element entered an element
onmouseuponmouseup A mouse button has A mouse button has
C tC t
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 110/118
ContCont
Mouse Event Mouse Event DescriptionDescription
onbluronblur An element loses focus An element loses focus
onloadonload The document hasThe document hascompletely loadedcompletely loaded
onscrollonscroll The document is scrolledThe document is scrolled
onsubmit onsubmit A form submit command A form submit commandis issuedis issued
E lE l
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 111/118
ExampleExample
<HTML><HTML><HE AD><HE AD><TITLE>Hello from the 60's</TITLE><TITLE>Hello from the 60's</TITLE></HE AD></HE AD>
<BODY><BODY><P<Ponmousemove="style.color=Math.floor(Math.ranonmousemove="style.color=Math.floor(Math.random()*16777216);"dom()*16777216);"STYLE="position:absolute;top:10;left:10;color:blSTYLE="position:absolute;top:10;left:10;color:bl
ack">Hello from the 60's</P>ack">Hello from the 60's</P></BODY></BODY></HTML></HTML>
O t tO t t
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 112/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 113/118
OutputOutput
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 114/118
OutputOutput
What is the Document ObjectWhat is the Document Object
Model?Model?
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 115/118
Model?Model?
The Document Object Model (DOM) is anThe Document Object Model (DOM) is anapplication programming interface (application programming interface ( API API) for valid) for validHTMLHTML and welland well--formedformed XMLXML documents. It documents. It defines the logical structure of documents anddefines the logical structure of documents and
the way a document is accessed andthe way a document is accessed andmanipulated. In the DOM specification, the termmanipulated. In the DOM specification, the term"document" is used in the broad sense"document" is used in the broad sense --increasingly, XML is being used as a way of increasingly, XML is being used as a way of representing many different kinds of informationrepresenting many different kinds of information
that may be stored in diverse systems, andthat may be stored in diverse systems, andmuch of this would traditionally be seen as datamuch of this would traditionally be seen as datarather than as documents.rather than as documents.
ContCont
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 116/118
Cont.Cont.
For instance, consider this table, takenFor instance, consider this table, takenfrom an HTML document from an HTML document--
<T ABLE><T ABLE>
<TBODY> <TR> <TD>Shady<TBODY> <TR> <TD>ShadyGrove</TD> <TD> Aeolian</TD> </TR>Grove</TD> <TD> Aeolian</TD> </TR>
<TR> <TD>Over the River, Charlie</TD><TR> <TD>Over the River, Charlie</TD>
<TD>Dorian</TD> </TR> </TBODY><TD>Dorian</TD> </TR> </TBODY></T ABLE></T ABLE>
Graphical representationGraphical representation
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 117/118
Graphical r epr esentationGraphical r epr esentation
8/8/2019 An Introduction to HTML[1]
http://slidepdf.com/reader/full/an-introduction-to-html1 118/118