Introduction To HTML

1) Introduction to HTML
a) What is HTML?
HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to
develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification
which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an
extension to HTML 4.01, and this version was published in 2012.
HTML is a markup language for describing web documents (web pages).

 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different document content
b) DOM structure
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
c) HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
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, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag.
d) Categories of tags:
i) A container tag is one that activates an effect and that has a companion tag that discontinues the effect.
Eg: <i> is a container tag that, together with its companion closing tag </i>, causes all text found between
them to be rendered in italic. The <i> tag turns on the italic affect and the </i> tag turns it off .
ii) A standalone tag is one that does not have a companion tag. Eg: the <img> tag simply places an image
on a page.
2) Common tags:
a) HTML tag:
Name:<html>
Type: Container
Purpose: The <html> tag tells the browser that this is an HTML document. It represents the root of an
HTML document.
Syntax: <html>…..</html>
Eg:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
b) HEAD tag:
Name:<head>
Type: Container
Purpose:
The <head> element is a container for all the head elements.
The <head> element must include a title for the document, and can include scripts, styles, meta information,
and more.
The following elements can go inside the <head> element:
<title> (this element is required in the head section), <style>, <base>, <link>, <meta>, <script>, <noscript>
Syntax: <head>…..</head>
Eg:
<html>
<head>
</head>
<body>
</body>
</html>
c) TITLE tag:
Name:<title>
Type: Container
Purpose: The <title> tag is required in all HTML documents and it defines the title of the document.
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
Syntax: <title>…..</title>
Eg:
<html>
<head>
<title>HTML Reference</title>
</head>
<body>
</body>
</html>
d) BODY tag:
Name:<body>
Type: Container
Purpose: It defines the document's body.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images,
tables, lists, etc.
Syntax: <body>…..</body>
Attributes:
background: sets the background picture tiled behind the text and graphics on the page
eg: <body background=”winter.jpg”>
bgcolor: sets the background color
eg: <body bgcolor=”#00BFFF”>
alink: sets the color of all active links
eg: <body alink = “#00BFFF”>
vlink: sets the color of links that have already been visited
eg: <body vlink=”#CFCFCF”>
<body alink=”#00BFFF” background=”winter.jpg” bgcolor=”#00BFFF” vlink=”#CFCFCF”>
link: sets the color of unvisited links in a document
<body link=”#CCCCCC”>
text: sets the color of the text in a document
<body text=”#ABABAB”>
Eg:
<html>
<head>
</head>
<body>
</body>
</html>
3) HTML Tags
A)Formatting tags:
Name: <h1> to <h6>

Type: Container
Purpose: Defines HTML headings. <h1> defines the most important heading. <h6> defines the least
important heading.
Syntax: <h1> - <h6>
Attributes: align = left | center | right | justify
Example <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
Name: <p>
Type: Container
Purpose: Defines a paragraph. Browsers automatically add some space (margin) before and after each
<p> element.
Syntax: <p>---</p>
Attributes: align = left | center | right | justify
Example <p>This is some text in a paragraph.</p>
Name: <br>
Type: Standalone
Purpose: Inserts a single line break
Syntax: <br>
Example: This text contains<br>a line break.
Name: <hr>
Type: Standalone
Purpose: the <hr> tag represents a horizontal rule.
Syntax: <hr>
Attributes: align = left | center | right
size=pixels
width=pixels | %
Name: <acronym>
Type: Container
Purpose: Defines an acronym An acronym can be spoken as if it were a word, example NATO, NASA,
ASAP, GUI.
Attributes The title attribute can be used to show the full version of the acronym when you mouse over
it.
Ex Can I get this <acronym title="as soon as possible">ASAP</acronym>?
Name: <abbr>
Type: Container
Purpose: Defines an abbreviation like "WWW" or "NATO".
By marking up abbreviations you can give useful information to browsers, spell checkers,
translation systems and search-engine indexers.
Attributes: The global title attribute can be used in the <abbr> tag to show the full version of the
abbreviation/acronym when you mouse over the <abbr> element.
Ex The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
Name: <address>
Type: Container
Purpose: Defines contact information for the author/owner of a document/article The text in the
<address> element usually renders in italic. Most browsers will add a line break before and
after the address element.
Ex: <address>
Written by Jon Doe<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Name: <b>
Type: Container
Purpose: Defines bold text
Ex: <p>This is normal text - <b>and this is bold text</b>.</p>
Name: <bdo>
Type: Container
Purpose: bdo stands for Bi-Directional Override.
The <bdo> tag is used to override the current text direction.

Ex: <bdo dir="rtl">
This text will go right-to-left.
</bdo>
Attributes: dir=ltr | rtl
Name: <big>
Type: Container
Purpose: Make text bigger than normal:
Ex: <p><big>Bigger text</big></p>
Name: <blockquote>
Type: Container
Purpose: Defines a section that is quoted from another source. Browsers usually indent <blockquote>
elements.
Attributes: cite=url
Ex: <blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. </blockquote>
Name: <center>
Type: Container
Purpose: Defines centered text
Ex: <center>This text will be center-aligned.</center>
Name: <cite>
Type: Container
Purpose: Defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture,
etc.).
Ex: <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
Name: <code>
Type: Container
Purpose: The <code> tag is a phrase tag. It defines a piece of computer code.
Attributes:
Ex: <code>A piece of computer code</code>
Name: <del> & <ins>

Type: Container
Purpose: <del> Defines text that has been deleted from a document
& <ins> Defines a text that has been inserted into a document
Attributes: cite=url
Ex: <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
Name: <dfn>
Type: Container
Purpose: The <dfn> tag is a phrase tag. It defines a definition term.
Ex: <dfn>Definition term</dfn>
Name: <em>
Type: Container
Purpose: The <em> tag is a phrase tag. It renders as emphasized text.
Ex: <em>Emphasized text</em>
Name: <font>
Type: Container
Purpose: Defines font, color, and size for text
Attributes: color= rgb(x,x,x) | #xxxxxx | colorname
face=font_family (Specifies the font of text)
size=number (Specifies the size of text)
Ex: <font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
Name: <i>
Type: Container
Purpose: The content of the <i> tag is usually displayed in italic.
Ex: <p>He named his car <i>The lightning</i>, because it was very fast.</p>
Name: <kbd>
Type: Container
Purpose: The <kbd> tag is a phrase tag. It defines keyboard input.
Ex: <kbd>Keyboard input</kbd>
Name: <pre>
Type: Container
Purpose: Defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks. Use the <pre> element when displaying
text with unusual formatting, or some sort of computer code.
Ex: <pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
Name: <q>
Type: Container
Purpose: Defines a short quotation. Browsers normally insert quotation marks around the quotation.
Ex: <p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
Name: <s>
Type: Container
Purpose: Defines text that is no longer correct
Ex: <p><s>My car is blue.</s></p>
<p>My new car is silver.</p>
Name: <samp>
Type: Container
Purpose: The <samp> tag is a phrase tag. It defines sample output from a computer program.
Ex: <samp>Sample output from a computer program</samp>
Name: <small>
Type: Container
Purpose: Defines smaller text
Ex: <p><small>Copyright 1999-2050 by Refsnes Data</small></p>
Name: <strike>
Type: Container
Purpose: Defines strikethrough text
Ex: <p>Version 2.0 is <strike>not yet available!</strike> now available!</p>
Name: <strong>
Type: Container
Purpose: The <strong> tag is a phrase tag. It defines important text.
Ex: <strong>Strong text</strong>
Name: <sub>
Type: Container
Purpose: Defines subscripted text
Ex: <p>H<sub>2</sub>O</p>
Name: <sup>
Type: Container
Purpose: Defines superscripted text
Ex: <p>x<sup>2</sup>+y<sup>2</sup></p>
Name: <tt>
Type: Container
Purpose: Defines teletype text
Ex: <p><tt>Teletype text</tt></p>
Name: <u>
Type: Container
Purpose: Defines text that should be stylistically different from normal text
Ex: <p>This is a <u>parragraph</u>.</p>
Name: <var>
Type: Container
Purpose: The <var> tag is a phrase tag. It defines a variable.
Ex: <var>Variable</var>
B) Lists Tags:
Name: <ul>
Type: Container
Purpose: Defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create
unordered lists.
Attributes: type= disc | square | circle
Ex: <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Name: <ol>
Type: Container
Purpose: Defines an ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to
define list items.
Attributes: start=number
type= 1 | A | a | I | i
Ex: <ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Name: <li>
Type: Container
Purpose: Defines a list item. The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>)
Attributes: type= 1 | A | a | I | i | disc | square | circle
value=number
Ex:
Name: <dl>
Type: Container
Purpose: Defines a definition list. The <dl> tag is used in conjunction with <dt> (defines terms/names)
and <dd> (describes each term/name).
Ex: <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Name: <dt>
Type: Container
Purpose: Defines a term/name in a definition list
Name: <dd>
Type: Container
Purpose: describe an item in a definition list. Inside a <dd> tag you can put paragraphs, line breaks,
images, links, lists, etc.
Links tags
Name: <a>
Type: Container
Purpose: the <a> tag could be either a hyperlink or an anchor. hyperlink is used to link from one page
to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
Attributes: href=url (Specifies the URL of the page the link goes to)
name= section_name (Specifies the name of an anchor)
target= _blank | _parent | _self | _top | framename (Specifies where to open the linked
document)
_blank (The response is displayed in a new window or tab)
_self (The response is displayed in the same frame (this is default))
_parent (The response is displayed in the parent frame)
_top (The response is displayed in the full body of the window)
Framename (The response is displayed in a named iframe)
Ex: <a href="http://www.google.com">Visit google.com!</a>
Name: <link>
Type: standalone
Purpose: Defines the relationship between a document and an external resource (most used to link to
style sheets) This element goes only in the head section, but it can appear any number of
times.
Attributes: href=url (Specifies the location of the linked document)
rel= stylesheet (Required. Specifies the relationship between the current document and the
linked document)
type= media_type (Specifies the media type of the linked document)
Ex: Link to an external style sheet as follows:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Images
Name: <img>
Type: Standalone
Purpose: Defines an image in an HTML page. The <img> tag has two required attributes: src and alt.
To link an image to another document, simply nest the <img> tag inside <a> tags.
Attributes: align=top|bottom|middle|left|right (Specifies the alignment of an image according to
surrounding elements)
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)
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)
Ex: <img src="smiley.gif" alt="Smiley face" height="42" width="42">
Name: <map>
Type: Container
Purpose: Defines a client-side image-map. An image-map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable areas in
the image map.
Attributes: name= mapname (Required. Specifies the name of an image-map)

Ex: An image-map, with clickable areas created as follows:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Name: <area>
Type: Standalone
Purpose: Defines an area inside an image-map (an image-map is an image with clickable areas).
The <area> element is always nested inside a <map> tag.
Attributes: alt= text (Specifies an alternate text for the area. Required if the href attribute is present)
coords= coordinates (Specifies the coordinates of the area)
href= URL (Specifies the hyperlink target for the area)
shape= default|rect|circle|poly (Specifies the shape of the area)
Ex: Ex as given in map tag.
C) Tables
Name: <table>
Type: Container
Purpose: Defines a table
Attributes: align= left|center|right (Specifies the alignment of a table according to surrounding text)
bgcolor= rgb(x,x,x)|#xxxxxx|colorname (Specifies the background color for a table)
border= 1|"" (Specifies whether the table cells should have borders or not)
cellpadding= pixels (Specifies the space between the cell wall and the cell content)
cellspacing= pixels (Specifies the space between cells)
frame= void|above|below|hsides|lhs|rhs|vsides|box|border (Specifies which parts of the outside
borders that should be visible)
width= pixels|% (Specifies the width of a table)
Ex: <table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Name: <caption>
Type: Container
Purpose: Defines a table caption. By default, a table caption will be center-aligned above a table.
Attributes: align= left|right|top|bottom (Defines the alignment of the caption)
Ex: <table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</table>
Name: <th>
Type: Container
Purpose: Defines a header cell in a table. The text in <th> elements are bold and centered by default.
Attributes: align= left|right|center|justify (Aligns the content in a header cell)
bgcolor= rgb(x,x,x)|#xxxxxx|colorname (Specifies the background color of a header cell)
colspan= number (Specifies the number of columns a header cell should span)
height= pixels|% (Sets the height of a header cell)
rowspan= number (Specifies the number of rows a header cell should span)
valign= top|middle|bottom|baseline (Vertical aligns the content in a header cell)
width= pixels|% (Specifies the width of a header cell)
Ex: <table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</table>
Name: <tr>
Type: Container
Purpose: Defines a row in a table
Attributes: align= right|left|center|justify (Aligns the content in a table row)
bgcolor= rgb(x,x,x)|#xxxxxx|colorname (Specifies the background color for a table row)
valign= top|middle|bottom|baseline (Vertical aligns the content in a table row)
Ex: Same as above
Name: <td>
Type: Container
Purpose: Defines a cell in a table. The text in <td> elements are regular and left-aligned by default.
Attributes: align= right|left|center|justify (Aligns the content in a cell)
bgcolor= rgb(x,x,x)|#xxxxxx|colorname (Specifies the background color of a cell)
colspan=number (Specifies the number of columns a cell should span)
height=pixels|% (Sets the height of a cell)
rowspan=number (Sets the number of rows a cell should span)
valign=top|middle|bottom|baseline (Vertical aligns the content in a cell)
width=pixels|% (Specifies the width of a cell)
Ex: Same as above
d) Forms and Input
Name: <form>
Type: Container
Purpose: Defines an HTML form for user input
Attributes: action=URL (Specifies where to send the form-data when a form is submitted)
enctype=application/x-www-form-urlencoded|multipart/form-data|text/plain
(Specifies how the form-data should be encoded when submitting it to the server (only for
method="post"))
method=get|post (Specifies the HTTP method to use when sending form-data)
name=text (Specifies the name of a form)
target=_blank|_self|_parent|_top (Specifies where to display the response that is received after
submitting the form)
Ex: An HTML form with two input fields and one submit button created as follows:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
Name: <input>
Type: Standalone
Purpose: Defines an input control that allow users to input data. An input field can vary in many ways,
depending on the type attribute. The default type is: text.
Attributes: align=left|right|top|middle|bottom (Specifies the alignment of an image input (only for
type="image"))
alt=text (Specifies an alternate text for images (only for type="image"))
checked=checked (Specifies that an <input> element should be pre-selected when the page
loads (for type="checkbox" or type="radio"))
disabled=disabled (Specifies that an <input> element should be disabled)
maxlength=number (Specifies the maximum number of characters allowed in an <input>
element)
name=text (Specifies the name of an <input> element)
readonly=readonly (Specifies that an input field is read-only)
size=number (Specifies the width, in characters, of an <input> element)
src=URL (Specifies the URL of the image to use as a submit button (only for type="image"))
type=button (Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox (Defines a checkbox)
file (Defines a file-select field and a "Browse..." button (for file uploads))
hidden (Defines a hidden input field)
image (Defines an image as the submit button)
password (Defines a password field (characters are masked))
radio (Defines a radio button)
reset (Defines a reset button (resets all form values to default values))
submit (Defines a submit button)
text (Default. Defines a single-line text field (default width is 20 characters))
value=text (Specifies the value of an <input> element
Ex: A clickable button, that activates a JavaScript when it is clicked:
<input type="button" value="Click me" onclick="msg()">
Checkboxes let a user select one or more options of a limited number of choices:
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car
Define a file-select field and a "Browse..." button (for file uploads):

Select a file: <input type="file" name="img">
Define a hidden field (not visible to a user).

A hidden field often stores a default value, or can have its value changed by a JavaScript:
<input type="hidden" name="country" value="Norway">
Define an image as a submit button:

<input type="image" src="img_submit.gif" alt="Submit">
Define a password field (characters are masked)

<input type="password" name="pwd">
Radio buttons let a user select only one of a limited number of choices:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female
Define a reset button (resets all form values to default values):

<input type="reset">
Define a submit button:

<input type="submit">
Define two single-line text fields that a user can enter text into:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Name: <textarea>
Type: Container
Purpose: Defines a multiline text input control. A text area can hold an unlimited number of characters,
and the text renders in a fixed-width font (usually Courier).
Attributes: cols=number (Specifies the visible width of a text area)
disabled=disabled (Specifies that a text area should be disabled)
name=text (Specifies a name for a text area)
readonly=readonly (Specifies that a text area should be read-only)
rows=number (Specifies the visible number of lines in a text area)
Ex: <textarea rows="4" cols="50">Type Here…</textarea>
Name: <button>
Type: Container
Purpose: Defines a clickable button. Inside a <button> element you can put content, like text or images.
This is the difference between this element and buttons created with the <input> element.
Attributes: disabled=disabled (Specifies that a button should be disabled)
name=name (Specifies a name for the button)
type=button|reset|submit (Specifies the type of button)
value=text (Specifies an initial value for the button)
Ex: <button type="button">Click Me!</button>
Name: <select>
Type: Container
Purpose: Defines a drop-down list
Attributes: disabled=disabled (Specifies that a drop-down list should be disabled)
multiple=multiple (Specifies that multiple options can be selected at once)
name=name (Defines a name for the drop-down list)
size=number (Defines the number of visible options in a drop-down list)
Ex: <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Name: <optgroup>
Type: Container
Purpose: Defines a group of related options in a drop-down list. If you have a long list of options,
groups of related options are easier to handle for a user.
Attributes: disabled=disabled (Specifies that an option-group should be disabled)
Ex: <select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Name: <option>
Type: Container
Purpose: Defines an option in a drop-down list. The <option> tag can be used without any attributes,
but you usually need the value attribute, which indicates what is sent to the server.
Attributes: disabled=disabled (Specifies that an option should be disabled)
selected=selected (Specifies that an option should be pre-selected when the page loads)
value=text (Specifies the value to be sent to a server)
Ex: Same as <select> tag example
Name: <label>
Type: Container
Purpose: Defines a label for an <input> element
Attributes: for=element_id (Specifies which form element a label is bound to)
Ex: <form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
Name: <fieldset>
Type: Container
Purpose: Groups related elements in a form
Ex: <form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
Name: <legend>
Type: Container
Purpose: Defines a caption for a <fieldset> element
Attributes: align=top|bottom|left|right (Specifies the alignment of the caption)
Ex: <form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
e) Frames
Name: <frame>
Type: Container
Purpose: Defines a window (a frame) in a frameset
Attributes: frameborder=0|1 (Specifies whether or not to display a border around 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=text (Specifies the name of a frame)
noresize=noresize (Specifies that a frame is not resizable)
scrolling=yes|no|auto (Specifies whether or not to display scrollbars in a frame)
src=URL (Specifies the URL of the document to show in a frame)
Ex: <frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
Name: <frameset>
Type: Container
Purpose: Defines a set of frames. The <frameset> element holds one or more <frame> elements. Each
<frame> element can hold a separate document.
The <frameset> element specifies HOW MANY columns or rows there will be in the
frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
Attributes: cols=pixels | % | * (Specifies the number and size of columns in a frameset)
rows= pixels | % | * (Specifies the number and size of rows in a frameset)
Ex: Same as above
Name: <noframes>
Type: Container
Purpose: Defines an alternate content for users that do not support frames
Ex: <html>
<frameset cols="50%,50%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<noframes>Sorry, your browser does not handle frames!</noframes>
</frameset>
</html>
Name: <iframe>
Type: Container
Purpose: Defines an inline frame. An inline frame is used to embed another document within the
current HTML document. To deal with browsers that do not support <iframe>, add a text
between the opening <iframe> tag and the closing </iframe> tag.
Attributes: align= left|right|top|middle|bottom (Specifies the alignment of an <iframe> according to
surrounding elements)
frameborder= 1|0 (Specifies whether or not to display a border around an <iframe>)
height= pixels (Specifies the height of an <iframe>)
marginheight= pixels (Specifies the top and bottom margins of the content of an <iframe>)
marginwidth= pixels (Specifies the left and right margins of the content of an <iframe>)
scrolling= yes|no|auto (Specifies whether or not to display scrollbars in an <iframe>)
name= text (Specifies the name of an <iframe>)
src= URL (Specifies the address of the document to embed in the <iframe>)
width= pixels (Specifies the width of an <iframe>)
Ex: <iframe src="http://www.google.com"></iframe>
f) Style
Name: <style>
Type: Container
Purpose: Defines style information for a document. Inside the <style> element you specify how HTML
elements should render in a browser.
Each HTML document can contain multiple <style> tags.
Attributes: type=text/css (The type attribute specifies the Internet media type (formerly known as MIME
type) of the <style> tag.The type attribute identifies the content between the <style> and
</style> tags.The value "text/css" indicates that the content is CSS.)
Ex: <html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Name: <div>
Type: Container
Purpose: Defines a division or a section in an HTML document. The <div> tag is used to group block-
elements to format them with CSS. The <div> element is very often used together with CSS,
to layout a web page.
Note: By default, browsers always place a line break before and after the <div> element.
However, this can be changed with CSS.
Attributes: align=left|right|center|justify (Specifies the alignment of the content inside a <div> element)
Ex: A section in a document that will be displayed in blue:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Name: <span>
Type: Container
Purpose: Defines a division or a section in an HTML document . The <span> tag is used to group
inline-elements in a document. It provides no visual change by itself.
Ex: A <span> element used to color a part of a text:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
g) Meta Info
Name: <meta>
Type: Standalone
Purpose: Defines metadata about an HTML document. Metadata is data (information) about data.
Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the
document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
<meta> tags always goes inside the <head> element. Metadata is always passed as name/value
pairs.
Attributes: content= text (Gives the value associated with the http-equiv or name attribute)
http-equiv= content-type (Specifies the character encoding for the document)
default-style (Specified the preferred style sheet to use.)
refresh (Defines a time interval for the document to refresh itself.)
(http-equiv Provides an HTTP header for the information/value of the content attribute)
name= application-name (Specifies the name of the Web application that the page represents)
author (Specifies the name of the author of the document.)
description (Specifies a description of the page. Search engines can pick up this description to
show with the results of searches.)
generator (Specifies one of the software packages used to generate the document (not used on
hand-authored pages)
keywords (Specifies a comma-separated list of keywords - relevant to the page (Informs
search engines what the page is about).
Tip: Always specify keywords (needed by search engines to catalogize the page).)
(name attribute specifies the name for the metadata.)
Ex: <head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head>
Example 1 - Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Example 2 - Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Example 3 - Define the author of a page:
<meta name="author" content="Hege Refsnes">
Example 4 - Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Name: <base>
Type: Standalone
Purpose: Specifies the base URL/target for all relative URLs in a document. There can be at maximum
one <base> element in a document, and it must be inside the <head> element.
Attributes: href=URL (Specifies the base URL for all relative URLs in the page)
target=_blank|_parent|_self|_top|framename (Specifies the default target for all hyperlinks and
forms in the page)
_blank (The response is displayed in a new window or tab)
_self (The response is displayed in the same frame (this is default))
_parent (The response is displayed in the parent frame)
_top (The response is displayed in the full body of the window)
Framename (The response is displayed in a named iframe)
Ex: Specify a default URL and a default target for all links on a page:
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="http://www.w3schools.com">W3Schools</a>
</body>
Name: <basefont>
Type: Standalone
Purpose: Specifies a default color, size, and font for all text in a document
Attributes: color=color (Specifies the default color for text in a document)
face=font_family (Specifies the default font for text in a document)
size=number (Specifies the default size of text in a document)
Ex: Specify a default text-color and font-size for text on page:
<head>
<basefont color="red" size="5">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
h) Programming
Name: <script>
Type: Container
Purpose: Defines 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.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes
of content.
Attributes: src=URL (Specifies the URL of an external script file)
type=media_type (Specifies the media type of the script)
The type attribute identifies the content between the <script> and </script> tags.
The media type consists of two parts: one media type and one subtype. For JavaScript, the
media type is "text/javascript".
Ex: Write "Hello JavaScript!" with JavaScript:

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Name: <noscript>
Type: Container
Purpose: Defines an alternate content for users that have disabled scripts in their browser or have a
browser that doesn't support script.
In HTML 4.01, the <noscript> tag can only be used inside the <body> element.It is also a
good practice to use the comment tag to "hide" scripts from browsers without support for
client-side scripts (so they don't show them as plain text):
<script>

</script>
Ex: <script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
Name: <applet>
Type: Container
Purpose: Defines an embedded applet
Attributes: code=URL (Specifies the file name of a Java applet)
object=name (Specifies a reference to a serialized representation of an applet)
height=pixels (Specifies the height of an applet)
width=pixels (Specifies the width of an applet)
Ex: <applet code="Bubbles.class" width="350" height="350">
Java applet that draws animated bubbles.
</applet>
Name: <object>
Type: Container
Purpose: Defines an embedded object. Use this element to embed multimedia (like audio, video, Java
applets, ActiveX, PDF, and Flash) in your web pages.
You can also use the <object> tag to embed another webpage into your HTML document.
You can use the <param> tag to pass parameters to plugins that have been embedded with the
<object> tag.
An <object> element must appear inside the <body> element. The text between the <object>
and </object> is an alternate text, for browsers that do not support this tag.
Attributes: data=URL (Specifies the URL of the resource to be used by the object)
type=media_type (Specifies the media type of data specified in the data attribute)
Ex: To embed a flash file:
<object width="400" height="400" data="helloworld.swf"></object>
Name: <param>
Type: Standalone
Purpose: Define parameters for plugins embedded with an <object> element.
Attributes: name=name (Specifies the name of a parameter)
value=value (Specifies the value of the parameter)
Ex: Set the "autoplay" parameter to "true", so the sound will start playing as soon as the page
loads:
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
Practical-02
(Form Tag, Frame Tags, Applying CSS (Internal and External style))
1) Introduction to CSS
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style
of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or
colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
CSS Versions:
Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December 1996. This
version describes the CSS language as well as a simple visual formatting model for all the HTML tags.
CSS2 was became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for
media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and
tables.
2) Advantages of CSS
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You
can define a style for each HTML element and apply it to as many Web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster
download times.
 Easy maintenance - To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give
far better look to your HTML page in comparison of HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type
of device. By using the same HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being recommended to
use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to
future browsers.
3)Types of CSS
There are three ways of inserting a style sheet:
a) 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 just one file.
Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head
section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. The style
sheet file must be saved with a .css extension. An example of a style sheet file is shown below:
"myStyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
b) 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, inside the <style> tag, like this:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
c) Inline Styles
An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this
method sparingly!
To use inline styles, add the style attribute to 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 h1 element:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
4) CSS Selectors
The element Selector
The element selector selects elements based on the element name.
p{
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML tag to find the specific element.
The style rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
The class Selector

The class selector finds elements with the specific class.
.center {
text-align: center;
color: red;
}
Grouping Selectors
To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}
5) CSS Properties:
Color Properties:
Property Purpose Possible values CSS level
color Sets the color of text Colorname| #000000|rgb(0,0,0) 1
Background and Border Properties:
Property Purpose Possible values CSS

level
background Sets all the background properties body { 1
in one declaration background: #00ff00
url('smiley.gif')
no-repeat fixed center;
}
Sets whether a background image scroll(default) | fixed 1
background-
is fixed or scrolls with the rest of
attachment
the page
Sets the background color of an color|transparent (default) 1
background-color
element
Sets the background image for an url('URL') | none (default) 1
background-image
element
left top|left center 1
left bottom|right top
right center|right bottom
Sets the starting position of a center top|center center
background-position
background image center bottom
x% y%
(default: 0% 0%)
xpos ypos
repeat(default)|repeat-x| 1
Sets how a background image will
background-repeat repeat-y|no-repeat|
be repeated
initial|inherit;
Sets all the border properties in border: border-width 1
border
one declaration border-style border-color
Sets all the bottom border border-bottom: border-width 1
border-bottom
properties in one declaration border-style border-color
border-bottom-color Sets the color of the bottom border color|transparent (default) 1
none|hidden| 1
dotted|dashed|
border-bottom-style Sets the style of the bottom border solid|double|
groove|ridge|
inset|outset
Sets the width of the bottom medium(default)|thin| 1
border-bottom-width
border thick|length
border-color Sets the color of the four borders color|transparent (default) 1
Sets all the left border properties border-left: border-width 1
border-left
in one declaration border-style border-color
border-left-color Sets the color of the left border color|transparent (default) 1
none|hidden|dotted| 1
border-left-style Sets the style of the left border dashed|solid|double|
groove|ridge|inset|outset
medium(default)|thin| 1
border-left-width Sets the width of the left border
thick|length
Sets all the right border properties border-right: border-width border- 1
border-right
in one declaration style border-color
border-right-color Sets the color of the right border color|transparent (default) 1
none|hidden|dotted|dashed| 1
border-right-style Sets the style of the right border solid|double|groove|ridge|
inset|outset
border-right-width Sets the width of the right border
thick|length
border-style Sets the style of the four borders solid|double|groove|ridge|
inset|outset
Sets all the top border properties border-top: border-width 1
border-top
in one declaration border-style border-color
border-top-color Sets the color of the top border color|transparent (default) 1
border-top-style Sets the style of the top border solid|double|groove|ridge|
inset|outset
border-top-width Sets the width of the top border
thick|length
border-width Sets the width of the four borders
thick|length
Basic Box Properties

level
Specifies the bottom position of a positioned auto|length|% 2
bottom
element
Specifies which sides of an element where other none|left|right|both 1
clear
floating elements are not allowed
clip Clips an absolutely positioned element auto|shape 2
Specifies how a certain HTML element should be inline | block|none 1
display
displayed
float Specifies whether or not a box should float none|left|right 1
height Sets the height of an element auto|length|% 1
left Specifies the left position of a positioned element auto|length|% 2
Specifies what happens if content overflows an visible|hidden| 2
overflow
element's box scroll|auto
padding Sets all the padding properties in one declaration Length|% 1
padding-bottom Sets the bottom padding of an element Length|% 1
padding-left Sets the left padding of an element Length|% 1
padding-right Sets the right padding of an element Length|% 1
padding-top Sets the top padding of an element Length|% 1
Specifies the type of positioning method used for static|absolute| 2
position
an element (static, relative, absolute or fixed) fixed|relative
right Specifies the right position of a positioned element auto|length|% 2
top Specifies the top position of a positioned element auto|length|% 2
visibility Specifies whether or not an element is visible visible|hidden|collapse 2
width Sets the width of an element auto|length|% 1
baseline|length|sub| 1
super|top|text-top|
vertical-align Sets the vertical alignment of an element
middle|bottom|
text-bottom
z-index Sets the stack order of a positioned element auto|number 2
Flexible Box Layout

level
Specifies how a certain HTML inline | block |none 1
display
element should be displayed
Sets all the margin properties in one auto|length|% 1
margin
declaration
margin- Sets the bottom margin of an auto|length|% 1
bottom element
margin-left Sets the left margin of an element auto|length|% 1
margin-right Sets the right margin of an element auto|length|% 1
margin-top Sets the top margin of an element auto|length|% 1
Text Properties
Increases or decreases the space normal|length 1
letter-spacing
between characters in a text
line-height Sets the line height normal|number|length|% 1
Specifies the horizontal alignment of left|right|center|justify 1
text-align
text
Specifies the indentation of the first length|% 1
text-indent
line in a text-block
none|capitalize|uppercase| 1
text-transform Controls the capitalization of text
lowercase
Specifies how white-space inside an normal|nowrap|pre| 1
white-space
element is handled pre-line|pre-wrap
Increases or decreases the space normal|length 1
word-spacing
between words in a text
none|underline| 1
text-decoration Specifies the decoration added to text
overline|line-through
Font Properties
Sets all the font properties in one font: font-style font-variant font-weight 1
font
declaration font-size/line-height
font-family: "Times New Roman", 1
font-family Specifies the font family for text
Georgia, Serif;
medium|xx-small| 1
x-small|small|large|
font-size Specifies the font size of text
x-large|xx-large|smaller|
larger|length
font-style Specifies the font style for text normal|italic|oblique 1
font-variant Specifies whether or not a text normal|small-caps 1
should be displayed in a small-caps
font
normal|bold|bolder|lighter| 1
font-weight Specifies the weight of a font 100|200|300|400|
500|600|700|800|900
Writing Modes Properties

direction Specifies the text direction/writing direction ltr|rtl 2
Lists Properties
Sets all the properties for a list in one list-style: list-style-type list- 1
list-style
declaration style-position list-style-image
list-style-image Specifies an image as the list-item marker none|url 1
Specifies if the list-item markers should inside|outside 1
list-style-position
appear inside or outside the content flow
disc|circle|decimal| 1
lower-alpha|lower-roman|
list-style-type Specifies the type of list-item marker
none|square|upper-alpha|
upper-roman
Pseudo-classes & Pseudo-elements:

Property Description
:active Use this class to add special effect to an activated element
:focus Use this class to add special effect to an element while the element has focus
:hover Use this class to add special effect to an element when you mouse over it
:link Use this class to add special effect to an unvisited link
:visited Use this class to add special effect to a visited link
:first-letter Use this element to add special effect to the first letter of a text
:first-line Use this element to add special effect to the first line of a text
Practical-03
(Representing Data using XML with CSS/XSL and Internal/External DTD)
1) Introduction to XML
 XML stands for EXtensible Markup Language

 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
2)Well formed document
An XML document with correct syntax is "Well Formed".
The syntax rules are:
 XML documents must have a root element

 XML elements must have a closing tag
 XML tags are case sensitive
 XML elements must be properly nested
 XML attribute values must be quoted
3)Valid XML document

If an XML document is well-formed and has an associated Document Type Declaration (DTD), then it is
said to be a valid XML document.
4)XML Markup components

Element tags:
An XML element is everything from (including) the element's start tag to (including) the element's end tag.
An element can contain:
 other elements
 text
 attributes
 or a mix of all of the above...
XML elements can be extended to carry more information.
Document type declarations

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.
Entity References
Some characters have a special meaning in XML.
There are 5 predefined entity references in XML:
< < less than

> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Comments in XML
The syntax for writing comments in XML is similar to that of HTML.

Marked Sections
All text in an XML document will be parsed by the parser.
But text inside a CDATA section will be ignored by the parser.
PCDATA - Parsed Character Data

PCDATA means parsed character data.
Think of character data as the text found between the start tag and the end tag of an XML element.
PCDATA is text that WILL be parsed by a parser. The text will be examined by the parser for entities
and markup.
Tags inside the text will be treated as markup and entities will be expanded.
However, parsed character data should not contain any &, <, or > characters; these need to be represented by
the & < and > entities, respectively.
CDATA - (Unparsed) Character Data

CDATA means character data.
CDATA is text that will NOT be parsed by a parser. Tags inside the text will NOT be treated as markup
and entities will not be expanded.
A CDATA section starts with "<![CDATA[" and ends with "]]>":
5) DTD
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>Tove</to>
<from>Jani</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
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
And this is the file "note.dtd" which contains the DTD:

<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
6)XSL
With XSLT you can transform an XML document into HTML.
Displaying XML with XSLT

XSLT (eXtensible Stylesheet Language Transformations) is the recommended style sheet language for
XML.
An XSLT stylesheet is used to define the transformation rules to be applied on the target XML document.
XSLT stylesheet is written in XML format. XSLT Processor takes the XSLT stylesheet and apply the
transformation rules on the target XML document and then it generates a formatted document in form of
XML, HTML or text format. This formatted document then is utilized by XSLT formatter to generate the
actual output which is to be displayed to the end user.
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)>
Declaring Attributes
An attribute declaration has the following syntax:
<!ATTLIST element-name attribute-name attribute-type attribute-value>
DTD example:
<!ATTLIST payment type CDATA "check">
XML example:
<payment type="check" />
The attribute-value can be one of the following:
Value Explanation
value The default value of the attribute
#REQUIRED The attribute is required
#IMPLIED The attribute is optional
#FIXED value The attribute value is fixed
Practical-04
(Executing Client Side Scripts using JavaScript)
JavaScript Introduction
JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement
being generated by Java.to JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a
name LiveScript.
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows
you to build interactivity into otherwise static HTML pages.
The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web
browsers
The ECMA-262 Specification defined a standard version of the core JavaScript language.
JavaScript is:
 JavaScript is a lightweight, interpreted programming language

 Designed for creating network-centric applications
 Complementary to and integrated with Java
 Complementary to and integrated with HTML
 Open and cross-platform
Client-side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need no longer be static HTML, but can include programs that interact with the
user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For
example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid they
would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions
that the user explicitly or implicitly initiates.
Advantages of JavaScript:
The merits of using JavaScript are:
 Less server interaction: You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.
 Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have
forgotten to enter something.
 Increased interactivity: You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.
 Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.
Limitations with JavaScript:
We can not treat JavaScript as a full fledged programming language. It lacks the following important
features:
 Client-side JavaScript does not allow the reading or writing of files. This has been kept for security
reason.
 JavaScript can not be used for Networking applications because there is no such support available.
 JavaScript doesn't have any multithreading or multiprocess capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.
JavaScript Syntax
JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a
web page.
You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred
way to keep it within the <head> tags.
The <script> tag alert the browser program to begin interpreting all the text between these tags as a script.
So simple syntax of your JavaScript will be as follows
<script ...>
JavaScript code
</script>
type: This attribute is what is now recommended to indicate the scripting language in use and its value
should be set to "text/javascript".
<script type="text/javascript">
JavaScript code
</script>
JavaScript - Document Object Model or DOM
Every web page resides inside a browser window which can be considered as an object.
A Document object represents the HTML document that is displayed in that window. The Document object
has various properties that refer to other objects which allow access to and modification of document
content.
The way that document content is accessed and modified is called the Document Object Model, or DOM.
The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in
a Web document.
 Window object: Top of the hierarchy. It is the outmost element of the object hierarchy.
 Document object: Each HTML document that gets loaded into a window becomes a document
object. The document contains the content of the page.
 Form object: Everything enclosed in the <form>...</form> tags sets the form object.
 Form control elements: The form object contains all the elements defined for that object such as
text fields, buttons, radio buttons, and checkboxes.
Here is a simple hierarchy of few important objects:
The Window Object

 window.innerHeight - the inner height of the browser window
 window.innerWidth - the inner width of the browser window
Some other methods:
 window.open() - open a new window

 window.close() - close the current window
 window.moveTo() -move the current window
 window.resizeTo() -resize the current window
Window Screen
The window.screen object can be written without the window prefix.
Properties:
 screen.width
 screen.height
 screen.availWidth
 screen.availHeight
 screen.colorDepth
 screen.pixelDepth
Window Location
The window.location object can be written without the window prefix.
Some examples:
 location.href returns the href (URL) of the current page

 location.hostname returns the domain name of the web host
 location.pathname returns the path and filename of the current page
 location.protocol returns the web protocol used (http:// or https://)
 location.assign loads a new document
Window History
The window.history object can be written without the window prefix.
To protect the privacy of the users, there are limitations to how JavaScript can access this object.
Some methods:
 history.back() - same as clicking back in the browser

 history.forward() - same as clicking forward in the browser
Window Navigator
The window.navigator object can be written without the window prefix.
Some examples:
 navigator.appName
 navigator.appCodeName
 navigator.platform
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
window.alert("sometext");
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax
window.confirm("sometext");
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an
input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax
window.prompt("sometext","defaultText");
DHTML
DHTML stands for Dynamic HTML.
DHTML is NOT a language or a web standard.
To most people DHTML means the combination of HTML, JavaScript, DOM and CSS.
According to the World Wide Web Consortium (W3C):

"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and
scripts that allows documents to be animated."
DHTML allows authors to add effects to their pages that are otherwise difficult to achieve. In short words:
scripting language is changing the DOM and page style.
 Animate text and images in their document, independently moving each element from any starting
point to any ending point, following a predetermined path or one chosen by the user.
 Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other
data.
 Use a form to capture user input, and then process, verify and respond to that data without having to
send data back to the server.
 Include rollover buttons or drop-down menus.

Introduction To HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To HTML

Uploaded by

Copyright:

Available Formats

1) Introduction to HTML

HTML is a markup language for describing web documents (web pages).

Name: <h1> to <h6>

The <bdo> tag is used to override the current text direction.

Attributes: dir=ltr | rtl

Name: <del> & <ins>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

Attributes: name= mapname (Required. Specifies the name of an image-map)

The <area> element is always nested inside a <map> tag.

Ex: Ex as given in map tag.

Define a file-select field and a "Browse..." button (for file uploads):

Define a hidden field (not visible to a user).

Define an image as a submit button:

Define a password field (characters are masked)

Define a reset button (resets all form values to default values):

Define a submit button:

Ex: Write "Hello JavaScript!" with JavaScript:

a) External Style Sheet

b) Internal Style Sheet

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

The class Selector

Background and Border Properties:

Property Purpose Possible values CSS

Basic Box Properties

Property Purpose Possible values CSS

Flexible Box Layout

Property Purpose Possible values CSS

Writing Modes Properties

Pseudo-classes & Pseudo-elements:

:active Use this class to add special effect to an activated element

:link Use this class to add special effect to an unvisited link

:visited Use this class to add special effect to a visited link

 XML stands for EXtensible Markup Language

2)Well formed document

An XML document with correct syntax is "Well Formed".

The syntax rules are:

 XML documents must have a root element

3)Valid XML document

4)XML Markup components

An element can contain:

XML elements can be extended to carry more information.

Document type declarations

There are 5 predefined entity references in XML:

&lt; < less than

But text inside a CDATA section will be ignored by the parser.

PCDATA - Parsed Character Data

CDATA - (Unparsed) Character Data

A CDATA section starts with "<![CDATA[" and ends with "]]>":

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

Example XML document with an internal DTD:

The DTD above is interpreted like this:

External DTD Declaration

<!DOCTYPE root-element SYSTEM "filename">

And this is the file "note.dtd" which contains the DTD:

Displaying XML with XSLT

<!ELEMENT element-name category>

<!ATTLIST element-name attribute-name attribute-type attribute-value>

<!ATTLIST payment type CDATA "check">

<payment type="check" />

The attribute-value can be one of the following:

 JavaScript is a lightweight, interpreted programming language

< < less than