html

Module2html
1
HTML
 HTML stands for Hyper Text Markup Language.
 It is a formatting language used to define the appearance and contents of a web page.
 It allows us to organize text, graphics, audio, and video on a web page.
 HTML documents are also called web pages
HTML TAGS
•Any formatted text documents composed of a set of elements such as paragraph, headings and lists. each element
is surrounded by set of controlling information. formatting is specified by using tags
 Tag is a command that tells the web browser how to display the text, audio, graphics or video on aweb page.
Keypoints about tags
 The tag name is specified between the angle brackets like <html>.
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a forward slash before the tag name
<tagname>content</tagname>
 If a browser not understand a tag it will usually ignore it.
 Some characters have to be replaced in the text by escape sequences.
 White spaces, tabs and newlines are ignored by the browser.
STRUCTURE OF HTML DOCUMENT
<html>
<head>
<title>Welcome To WWW </title>
</head>
<body>
<h1>This a heading</h1>
<p><b>This is a paragraph.</b></p>
</body>
</html>
The first tag in your html document is <html>. This tag tells your browser that this is the start of an html document.
The last tag in your document is </html>. This tag tells your browser that this is the end of the html document.

Module2html
2
The text between the <head> tag and the </head> tag is header information. Header information is not displayed in
the browser window.
The text between the <title> tags is the title of your document. The <title> tag is used to uniquely identify each
document and is also displayed in the title bar of the browser window.
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
Comments in HTML
 The comment tag is used to insert a comment in the HTML source code.
 A comment can be placed anywhere in the document and the browser will ignore everything inside the
brackets.
 
Notice you don't see the text between the tags . If you look at the source code, you would see the
comment. To view the source code for this page, in your browser window, select View and then select Source.
Document Head
Each HTML document also includes a header section indicated by the <HEAD>tag which in turn contains elements
like <TITLE>,<META><SCRIPT> etc. Document head holds control information to be used by browsers and
servers.most programs donot use any of the head tags except <title>
Basic HTML Tags
Headers
There are 6 levels of headers.
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest.
<h1>HELLO</h1>
<h2>HELLO</h2>
<h3>HELLO</h3>
<h4>HELLO</h4>
<h5>HELLO</h5>
<h6>HELLO</h6>
HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is align.

Module2html
3
<h5 align="left">I can align headings </h5>
<h5 align="center">This is a centered heading </h5>
<h5 align="right">This is a heading aligned to the right </h5>
Paragraphs
 Paragraphs are defined with the <p> tag. You can use the align attribute with a
paragraph tag as well.
<p align="left">This is a paragraph</p>
You must indicate paragraphs with <p> elements. A browser ignores any indentations or blank lines in the source
text. Without <p> elements, the document becomes one large paragraph. HTML automatically adds an extra blank
line before and after a paragraph.
Line Breaks
 The <br> tag is used when you want to start a new line, but don't want to start a new paragraph.
 The <br> tag forces a line break wherever you place it. It is similar to single spacing in a document.
 The <br> tag has no closing tag.
HTML Blocks
Html documents are structured as blocks of text,each of which can be formatted independently.A block-level
element always starts on a new line and takes up the full width available (stretches out to the left and right as far as
it can).
Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
Character formatting
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
<B>tag
The HTML <b> element defines bold text, without any extra importance.
<p><b>This text is bold</b>.</p>
HTML Italic and Emphasized Formatting

Module2html
4
The HTML <i> element defines italic text, without any extra importance.
<p><i>This text is italic</i>.</p>
strong tag: This tag is used to always emphasized the text <strong>……….</strong>
The HTML <em> element defines emphasized text, with added semantic importance.
<p><em>This text is emphasized</em>.</p>
HTML Superscript Formatting
The HTML <sup> element defines superscripted text.
Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
Underline
<u> tag is used for underline
CenteringContent
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
This will produce following result:

Module2html
5
This text is not in the center.
This text is in the center.
Font tag
The <font> tag specifies the font face, font size, and color of text.
<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>
<basefont=”n”>
specify minimum font size for the basic text but not for heading.size argument takes integer from 1 to 7
<font size=”[+/-]n”
Sets the font size relative to either the default value or to any size sets by the base font.
&amp &lt&gt&nbsp&quotThese are character escape sequence which are required if you want to display
characters that HTML uses as control sequences. Example: < can be represented as &lt. A character entity has three
parts: an ampersand (&), an entity name or an entity number, and finally a semicolon (;). The & means we are
beginning a special character, the ;means ending a special character and the letters in between are sort of an
abbreviation for what it's for.
To display a less than sign in an HTML document we must write: < or &#60.
&gt is todisplaygrater than symbol
&amp is todisplayambersand symbol
&nbsp is to display nonbreaking space
&quot is to display quotation mark
<pre> Tag
It is a pre-formatted tag : Displays as it is..
The data in html is displayed from left right and top to bottom irrespective of what ever format we write in program
Therefore to display as it is how we write in program we can use <pre> tag
Html colors
Colors are very important to give a good look and feel to your website. You can specify colors on page level using
<body> tag or you can set colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors:
 bgcolor - sets a color for the background of the page.
 text - sets a color for the body text.
 alink - sets a color for active links or selected links.

Module2html
6
 link - sets a color for linked text.
 vlink - sets a color for visited links - that is, for linked text that you have already clicked on.
HTMLColorCodingMethods
There are following three different methods to set colors in your web page:
 Color names - You can specify color names directly like green, blue or red.
 Hex codes - A six-digit code representing the amount of red, green, and blue that makes up the color.
 Color decimal or percentage values - This value is specified using the rgb( ) property.
Now we will see these coloring schemes one by one.
HTMLColors-ColorNames
You can specify direct a color name to set text or background color. W3C has listed 16 basic color names that will
validate with an HTML validator but there are over 200 different color names supported by major browsers.
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
EXAMPLE
Here are the examples to set background of an HTML tag by color name:
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<bodytext="blue"bgcolor="green">
<p>this text in blue color</p>
</body>
</html>
HTML Colors - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a
green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by a pound or hash sign #. Following is a list of few colors using
hexadecimal notation.

Module2html
7
EXAMPLE
Here are the examples to set background of an HTML tag by color code in hexadecimal:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<bodytext="#0000FF"bgcolor="#00FF00">
<p>Use different color hexa for body</p>
<fontcolor="#FFFFFF">This text will appear white .</font>
</body>
</html>
Using RGB value
In HTML, a color can also be specified as an RGB value, using this formula: rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to
0.
To display the color black, all color parameters must be set to 0, like this: rgb(0,0,0).
To display the color white, all color parameters must be set to 255, like this: rgb(255,255,255).
HTML Attributes
 Every Tag is associated with set of Attributes an attribute defines the characteristic of a particular tag.
 A tag can contain any no of attributes separated by space
 Attributes come in name value pairs like: name="value"
 The <tag> tells the browser to do something, while the attribute tells the browser how to do it.
 Example
The attributes of body tag are
<body bgcolor=red text= green>
bgcolor represent the background color of the document and text represent the foreground color of the document.
HTML Links - Hyperlinks
 Html provides a facility to create link between web pages.
 Links(or hyperlinks) are used to connect one webpage to another
 A hyperlink is a text or an image you can click on, and jump to another document.

Module2html
8
 In HTML, links are defined with the <a> tag:
 <a href="url">link text</a>
 link tag has three sections address of the reference document,linktext and closing tag
 The href attribute specifies the destination address (http://www.w3schools.com/html/)
 The link text is the visible part .Clicking on the link text, will send you to the specified address.
 The link text does not have to be text. It can be an HTML image or any other HTML element.
 Example
 Links to another page in the same directory
<a href=”page1.html”>click me
 Links to another website
<a href="http://www.google.com/">goto google</a>
<a href="Pictures.html"><imgsrc =”flower.gif” ></a>
 The compulsory attribute for <a> tag is HREF to specify linking page
The Target Attribute
With the target attribute, you can define where the linked document will be opened. By default, the link will open
in the current window. The code below will open the document in a new browser window:
 <a href=page1.html target="_blank">click me</a>
HTML Images
 In HTML, images are defined with the <img> tag.
 The <img> tag is empty, it contains attributes only, and does not have a closing tag.
 The src attribute specifies the URL (web address) of the image:
 <img src="url/name" height=”n” width=”n” [alt="some_text"][align=”top”|”center”|”bottom”]>
 alt
 The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
 The alt attribute provides alternative information for an image if a user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).
 If a browser cannot find an image, it will display the alt text:
Width and height
 you can use width and height attributes for the image. Here, the values are specified in pixels by default:
Example
 <img src="html5.gif" width="128" height="128">

Module2html
9
 You can use the style attribute to specify the width and height of an image.The values are specified in pixels
(use px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
<img src="/images/html5.gif"width="128" height="128" >
<imgsrc=”urlusemap=”url”>
The usemap attribute specifiesan image (or an object) as an image-map (an image-map is an image with clickable
areas).The usemap attribute is associated with a <map> element's name or id attribute, and creates a relationship
between the <img> and the <map>.
<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>
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a
hexadecimal number, an RGB value, or a color name:
<body bgcolor="red">
Background
The background attribute can also specify a background-image for an HTML page. The value of this attribute is the
URL of the image or name of the image you want to use. If the image is smaller than the browser window, the
image will repeat itself until it fills the entire browser window.
<body background="clouds.gif">
<body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif">

Module2html
10
The URL can be relative (as in the first line above) or absolute (as in the second line above).
HTML Lists
Lists are used to display the list of elements in an order
Basically HTML supports Three types of lists
 Bulleted list
 Numbered list
 Definition List
HTML bulletedLists(unordered list)
An unordered list starts with the <ul>tag. Each list item starts with the <li>tag. The list items are marked with bullets
(typically small black circles). Bullet type for the list items can be changed using type attribute
<ul[ type=”disc” | “square” | ”circle” ]> …..</ul>
Default type is disc
example
<ul><li>Coffee</li><li>Milk</li></ul>
� Coffee
� Milk
HTML Ordered Lists
An ordered list starts with the <ol>tag. Each list item starts with the <li>tag. Type attribute indicates type of
ordering in ordered list
. <ol[type=”1” | ”a” |”A”| “I”|”i”] start=”n”>…..</ol>
The list items are marked with numbers.
<ol><li>Coffee</li><li>Milk</li></ol>
1. Coffee
2. Milk
HTML DescriptionLists
A description list is a list of terms/names, with a description of each term/name.

Module2html
11
<dl>….. </dl>This tag is used for definition list, where numbers or bullet is not used in front of the list item, instead
it uses definition for the items. <dt>…..</dt>This is a sub tag of the <dl> tag called as definition term, which is used
for marking the items whose definition is provided in the next data definition.it can be formatted using any regular
definition.closing tag is optional,as it assumed once <dd>tag is reached. <dd> ….</dd>, definition of the terms are
enclosed within these tags. The definition may include any text or block.
) and <dd>(describes each term/name):
Example
<! -- using lists -->
<html>
<body>
<font face=Verdana size=3>
<b> using ordered list </b>
<ol type=1 start=5>
<li> c
<li>c++
<li> J2SE
<li> J2EE
</ol>
<b> unordered list </b>
<ul type="circle">
<li> C
<li>c++
<li> J2SE <li> J2EE </ul>
<b> definition list </b>
<dl>
<dt> HTML
<dd>Hyper text markup language
<dd> using to display some text or image on the browsers
<dt> DHTML
<dd> Dynamic HTML
</dl>
</fonts>
</body>

Module2html
12
</html>
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
 Coffee
 Tea
o Black tea
o Green tea
 Milk

Module2html
13
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into
data cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can
contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table [align=”center” |“left” |“right” ][border=”n” ][width=”n%”][cellpadding=”n” ][cellspacing=”n”]>………………</table>
example
<table>
<tr>
<td>name</td>
<td>mark</td></tr>
<tr>
<td>a</td>
<td>50</td></tr>
</table>
output
name mark
a 50
To display a table with borders, you will use the border attribute.
<table border="1">
<tr>
<td>name</td>
<td>mark</td></tr>
Name mark
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>name</th>
<th>mark</th>
</tr>
<tr>
<td>a</td>
<td>50</td></tr>

Module2html
14
<tr><td>b</td>
<td>70</td></tr>
</table>
Name mark
A 50
B 70
Cell Padding and Spacing
The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these
properties. These properties may be used separately or together.
Cellspacing is the pixel width between the individual data cells in the table (The thickness of the lines making the
table grid). The default is zero. If the border is set at 0, the cellspacing lines will be invisible.
Cellpaddingis the pixel space between the cell contents and the cell border. The default for this property is also
zero. This feature is not used often, but sometimes comes in handy when you have your borders turned on and you
want the contents to be away from the border a bit for easy viewing. Cellpadding is invisible, even with the border
property turned on.
Table Width
The width attribute can be used to define the width of your table.
It can be defined as a fixed width or a relative width.
A fixed table width is one where the width of the table is specified in pixels. For example, this code, <table
width="550">, will produce a table that is 550 pixels wide.
A relative table width is specified as a percentage of the width of the visitor's viewing window. Hence this code,
<table width="80%">, will produce a table that occupies 80 percent of the screen.
<Caption>tag is used to display Heading of the table .
<caption>string</caption>
ColspanandRowspanAttributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will
use rowspan if you want to merge two or more rows.
<html>
<head>
<title>Workingwith table </title>
</head>
<bodybgcolor=lightgrey>
<br><br><br><br>
<center>

Module2html
15
<caption><b> mark sheet</b></caption>
<table border=1 width=50%align=center>
<tr>
<throwspan=2>Name</th>
<thcolspan=3>Marks</th>
</tr>
<tr>
<th>C</th><th>VisualBasic</th><th>c++</th></tr>
<tr align=center><td>shilpa<td>21<td>45 <td>30 </tr>
<tr align=center><td>vaishali<td>42<td>48 <td>33 </tr>
</table>
</center>
</body>
</html>
TableHeader,Body,andFooter
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to
headers and footers in a word-processed document that remain the same for every page, while the body is the
main content holder of the table.
The three elements for separating the head, body, and foot of a table are:
 <thead> - to create a separate table header.
 <tbody> - to indicate the main body of the table.
 <tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that
<thead> and <tfoot> tags should appear before <tbody>
Playing audio and video
To play an audio file in HTML, use the <audio> tag
Example
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The
browser will use the first recognized format.

Module2html
16
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio>
element.
HTML Audio - Media Types
File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
The HTML <video> tag
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker
while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from. The
browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video>
element.
HTML <video>Autoplay
To start a video automatically use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML Video - Media Types

Module2html
17
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Frames in HTML
To divide a web page into different partitions we use Frames
Two tags called <frameset></frameset> and <frame > are used for creating frames and loading pages into those
frames.
The <frame> tag definesone particular window (frame) within a <frameset>.
Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize,etc.
Ex:
<frameset rows="60%,*">
<frame src="first.html"/>
<frame src="second.html"/>
</frameset>
<frameset>tag is a
• A container tag, requires a closing </frameset> tag
• Determines the frame types and sizes on the page
• Two frame types:
– Columns
– Rows
rows and cols are the attributes of the <frameset>
rows is used to divide the frame horizontally based on value given.
cols is used to divide the frame vertically based on value given.
In the frameset document, the <frameset> element takes the place of the <body> element

Module2html
18
<frame> tag is used to
• Load a web page into a frame using srcattribute
• Use the name attribute to name a frame, then target the frame name with hyperlinks
• The syntax for naming a frame is as follows:
<frame src="url" name="framename"/>
• The following code names a frame:
<frame src="james.html" name="authors"/>
• The following code targets this frame:
<a href="james.html" target= "authors"> Visit James </a>
• If a user clicks the Visit James link, the James page will open in the Authors frame
Ex1:
<frameset rows="40%,60%"><frame src="top.htm" name="top"><frame src="bottom.htm"
name="bottom"></frameset>
The<frameset>Tag Attributes
Following are important attributes of the <frameset> tag:
Attribute Description
cols specifies how many columns are contained in the frameset and the size of each column. You can specify the
width of each column in one of four ways:
 Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100".
 A percentage of the browser window. For example to createthree vertical frames, use cols="10%,
80%,10%".
 Using a wildcard symbol. For example to createthree vertical frames, use cols="10%, *,10%". In this
case wildcard takes remainder of the window.
rows This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in
the frameset. For example to createtwo horizontal frames, use rows="10%, 90%". You can specify the height of
each row in the same way as explained above for columns.
border This attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero
means no border.
frameborder This attribute specifies whether a three-dimensional border should be displayed between frames. This
attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border.

Module2html
19
framespacing This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For
example framespacing="10" means there should be 10 pixels spacing between each frames.
The<frame>TagAttributes
Following are important attributes of <frame> tag:
src This attribute is used to give the file name that should be loaded in the frame. Its value
can be any URL. For example, src="/html/top_frame.htm" will load an HTML file
available in html directory.
name This attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create
links in one frame that load pages into an another frame, in which case the second
frame needs a name to identify itself as the target of the link.
frameborder This attribute specifies whether or not the borders of that frame areshown; it
overrides the value given in the frameborder attribute on the <frameset> tag if one is
given, and this can take values either 1 (yes) or 0 (no).
marginwidth This attribute allows you to specify the width of the space between the left and right of
the frame's borders and the frame's content. The value is given in pixels. For example
marginwidth="10".
marginheight This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight="10".
noresize By default you can resize any frame by clicking and dragging on the borders of a frame.
The noresize attribute prevents a user from being able to resize the frame. For
example noresize="noresize".
scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This
takes values either "yes", "no" or "auto". For example scrolling="no" means it should
not have scroll bars.
longdesc This attribute allows you to provide a link to another page containing a long
description of the contents of the frame. For example
longdesc="framedescription.htm"
Note:<body> sectionis not neededfora framesetpage.<frameset> tag is givendirectlyin the html section

Module2html
20
HTMLIframes
You can define an inline frame with HTML tag <iframe>.frame can be embedded with in a document. The <iframe>
tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag
defines a rectangular region within the document in which the browser can display a separate document, including
scrollbars and borders.
The src attribute is used to specify the URL of the document that occupies the inline frame.
Example
Following is the example to show how to use the <iframe>:
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframesrc=”page1.html"width="555"height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
The<Iframe>TagAttributes
Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight,
marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag.
Src This attribute is used to give the file name that should be loaded in the frame. Its value can be any
URL. For example, src="/html/top_frame.htm" will load an HTML file avalaible in html directory.
Name This attribute allows you to give a name to a frame. It is used to indicate which frame a document
should be loaded into. This is especially important when you want to create links in one frame that
load pages into an another frame, in which case the second frame needs a name to identify itself as
the target of the link.

Module2html
21
frameborder This attribute specifies whether or not the borders of that frame are shown; it overrides the value
given in the frameborder attribute on the <frameset> tag if one is given, and this can take values
either 1 (yes) or 0 (no).
marginwidth This attribute allows you to specify the width of the space between the left and right of the frame's
borders and the frame's content. The value is given in pixels. For example marginwidth="10".
marginheight This attribute allows you to specify the height of the space between the top and bottom of the
frame's borders and its contents. The value is given in pixels. For example marginheight="10".
Noresize By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize
attribute prevents a user from being able to resize the frame. For example noresize="noresize".
Scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes values
either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars.
Longdesc This attribute allows you to provide a link to another page containing a long description of the
contents of the frame. For example longdesc="framedescription.htm"
marquee
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage
depending on the settings. This is created by using HTML <marquee> tag.
Note: The HTML <marquee> tag may not be supported by various browsers so its not recommended to rely on this
tag, instead you can use Javascript and CSS to create such effects.
The<marquee>TagAttributes
Following is the list of important attributes which can be used with <marquee> tag.
width This specifies the width of the marquee. This can be a value like 10 or 20% etc.
height This specifies the height of the marquee. This can be a value like 10 or 20% etc.
direction This specifies the direction in which marquee should scroll. This can be a value
like up, down, left or right.
behavior This specifies the type of scrolling of the marquee. This can have a value

Module2html
22
like scroll, slide and alternate.
scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc.
scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.
loop This specifies how many times to loop. The default value is INFINITE, which means that the
marquee loops endlessly.
bgcolor This specifies background color in terms of color name or color hex value.
hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.
Examples-1
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
Example2
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marqueedirection="right">This text will scroll from left to right</marquee>
</body>
</html>
Behavior attribute

Module2html
23
Scroll:
This is the default behavior. This lets the Text to scroll across the screen like a stock ticker i.e., the text should start
from only one side and it should scroll completely to the opposite end and start again
Slide:
This lets the text move from one end to the other end and once the text reaches the other end it stops scrolling
Alternate:
This lets the Marquee text to alternate between scrolling and sliding i.e., Starts from one end and on reaching
opposite end it moves in the opposite direction
HTMLForms
HTML forms are used to collect user input. For example during user registration you would like to collect
information such as name, email address.
The HTML <form> tag is used to create an HTML form
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.
it has following syntax:
<formname= “nameofform” action="URL"method="GET|POST">
form elements like input, textarea etc.
</form>
HTMLFormControls
There are different types of form controls that you can use to collect data using HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 Clickable Buttons
 Submit and Reset Button
Text InputControls
There are three types of text input used on forms:
 Single-line text input controls - This control is used for items that require only one line of user input, such as
names. They are created using HTML <input> tag.
 Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it.
They are also created using HTML<input> tag.
 Multi-line text input controls - This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Single-linetextinputcontrols

Module2html
24
This control is used for items that require only one line of user input, such as search boxes or names. They are
created using HTML <input> tag.
Example
Here is a basic example of a single-line text input used to take first name and last name:
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form>
First name: <inputtype="text"name="first_name"/>
<br>
Last name: <inputtype="text"name="last_name"/>
</form>
</body>
</html>
First name:
Last name:
attributes for <input> tag
Type Indicates the type of input control and for text input control it will be set to text.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value This can be used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in terms of characters.

Module2html
25
maxlength Allows to specify the maximum number of characters a user can enter into the text box.
Passwordinputcontrols
This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using
HTML <input> tag but type attribute is set to password.
Example
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form>
User ID : <inputtype="text"name="user_id"
<br>
Password: <inputtype="password"name="password">
</form>
</body>
</html>
User ID :
Password:
The characters in a password field are shown as asterisks instead of the character itself
Multiple-LineTextInputControls
This is used when the user is required to give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag.
Example
Here is a basic example of a multi-line text input used to take item description:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>

Module2html
26
</head>
<body>
<form>
Description :<br/>
<textarearows="5"cols="50"name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
Description :
Attributes rows and
CheckboxControl
Checkboxes are used when more than one option is required to be selected. They are also created using HTML
<input> tag but type attribute is set to checkbox.
Example
Here is an example HTML code for a form with two checkboxes:
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<inputtype="checkbox"name="maths">Maths
rows Indicates the number of rows of text area box.
cols Indicates the number of columns of text area box

Module2html
27
<inputtype="checkbox"name="physics"> Physics
</form>
</body>
</html>
Maths Physics
Attributes
Following is the list of attributes for <checkbox> tag.
type Indicates the type of input control and for checkbox
input control it will be set to checkbox.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.
RadioButton
Radio buttons are used when out of many options, just one option is required to be selected. They are also created
using HTML <input> tag but type attribute is set to radio.
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
o/p
Male
Female
The <select> Element (Drop-Down List)
A select box, also called drop down box which provides option to list down various options in the form
of drop down list, from where a user can select one or more options.The <select> element definesa drop-
down list.The <option> elementsdefinesthe options to select.The listwill normally show the first item as selected.

Module2html
28
Example
<html>
<head>
<title>SelectBox Control</title>
</head>
<body>
<form>
<selectname="dropdown">
<optionvalue="Maths"selected>Maths</option>
<option value="Physics">Physics</option>
<optionvalue="chemistry">chemistry</option>
</select>
</form>
</body>
</html>
Maths
Attributes
Following is the list of important attributes of <select> tag:
name Used to give a name to the control which is sent to the server
to be recognized and get the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select multiple items
from the menu.
Following is the list of important attributes of <option> tag:

Module2html
29
value The value that will be used if an option in the select box box is
selected.
selected Specifies that this option should be the initially selected value
when the page loads.
label An alternative way of labeling options
The Submit Button and reset button
 <input type="submit"> definesa button for submitting a form to a form-handler.
 <input type="reset”>
This creates a button that automatically resets form controls to their initial values.
 The form-handler is typically a server page with a script for processing input data.
 The form-handler is specifiedin the form's action attribute:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" name=”submit” value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey
Last name:
Mouse
Submit
The Action Attribute
 The action attribute specifies where to send the form-data when a form is submitted.
 The common way to submit a form to a server, is by using a submit button.
 Forexample<form action="action_page.php"> specifies formdata send to action_page.php
 If the action attribute is omitted, the action is set to the current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:
<form action="action_page.php" method="get">
or:
<form action="action_page.php" method="post">

Module2html
30
When to Use GET?
 You can use GET (the default method):
 If the form submission is passive (like a search engine query), and without sensitive information.
 When you use GET, the form data will be visible in the page address:
 action_page.php?firstname=Mickey&lastname=Mouse
 GET is best suited to short amounts of data. Size limitationsare set in your browser.
when to Use POST?
You should use POST:
 If the form is updating data, or includes sensitive information (password).
 POST offers better security because the submitted data is not visible in the page address.
The Name Attribute
To be submitted correctly, each input fieldmust have a name attribute.
This example will only submit the "Last name" input field:
Example
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<inputtype="reset" value="Reset">
</form>
FileUploadBox
If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a
file select box. This is also created using the <input> element but type attribute is set to file.
Example
Here is example HTML code for a form with one file upload box:
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<inputtype="file"name="fileupload"accept="image/*"/>
</form>
</body>
</html>

Module2html
31
Attributes
Following is the list of important attributes of file upload box:
Name Used to give a name to the control which is sent to the
server to be recognized and get the value.
Accept Specifies the types of files that the server accepts.
<button>tag
The <button> elementdefinesa clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Click Me!

Module2html
32
Multimedia objects
The HTML <object> tag is used to embed multimedia in an HTML document. 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.
The <param> tag is also used along with this tag to define various parameters.
Note: 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.
Example:
<htm l>
<head>
<title>HTML object Tag</title>
</head>
<body>
<object data="/htm l/test.jpg" type="text/htm l" width="300" height="200">
alt : <a href="/htm l/test.htm ">test.jpg</a>
</object>
</body>
</htm l>
Attribute Value Description
align top
bottom
middle
left
right
Specifies the alignment of the <object> element according to
surrounding elements
archive URL Not supported in HTML5.
A space separated list of URL's to archives. The archives contains
resources relevant to the object
border pixels Not supported in HTML5.
Specifies the width of the border around an <object>

Module2html
33
classid class_ID Not supported in HTML5.
Defines a class ID value as set in the Windows Registry or a URL
codebase URL Not supported in HTML5.
Defines where to find the code for the object
codetype media_type Not supported in HTML5.
The media type of the code referred to by the classid attribute
data URL Specifies the URL of the resource to be used by the object
declare declare Not supported in HTML5.
Defines that the object should only be declared, not created or
instantiated until needed
form form_id Specifies one or more forms the object belongs to
height pixels Specifies the height of the object
hspace pixels Not supported in HTML5.
Specifies the whitespace on left and right side of an object
name name Specifies a name for the object
standby text Not supported in HTML5.
Defines a text to display while the object is loading

Module2html
34
type media_type Specifies the media type of data specified in the data attribute
usemap #mapname Specifies the name of a client-side image map to be used with the object
vspace pixels Not supported in HTML5.
Specifies the whitespace on top and bottom of an object
width pixels Specifies the width of the object
HTML <param> Tag
Example
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>
Attributes
Attribute Value Description
name name Specifies the name of a parameter
type media_type Not supported in HTML5.
Specifies the media type of the parameter

Module2html
35
value value Specifies the value of the parameter
valuetype data
ref
object
Not supported in HTML5.
Specifies the type of the value

html

More Related Content

What's hot

Viewers also liked

Similar to html

Recently uploaded

html