Html book2

A
PRESENTATION ON
HTML(MARKUP LANGUAGE)
Submitted By:
Diksha Kumari
Student of
‘R.B.S. Engg. Technical Campus Bichpuri’
‘Computer Science Department’
1

OUTLINES
 HTML
 Versions of HTML
 SGML & XML
 Structure document in HTML
 Create a web page
 Standard extension
 Advantages and Disadvantages of HTML
 HTML tags
Attributes in tags
 Creating HTML web pages
 Some Examples
2

HTML
 HTML (Hypertext Markup Language) is the set of markup
symbols or codes inserted in a file intended for display on a
World Wide Web browser page.
 HTML document may be viewed by many different "browsers“,
of very different abilities.
 HTML allows you to mark selections of text as titles or
paragraphs, and then leaves the interpretation of these marked
elements up to the browser.
3

VERSIONS OF HTML
 The first definitive version was HTML 2.0 — this had most of the
elements we know and love, but was missing some of the
Netscape/Microsoft extensions, and did not support tables, or
ALIGN attributes.
 HTML 3 (late 1995) was an ambitious effort on the part of Dave
Raggett to upgrade the features and utility of HTML.
 HTML 3.2 was the next official version, integrating support for
TABLES, image, heading and other element ALIGN attributes,
and a few other finicky details.
 HTML 4.01 is the current official standard. It includes support
for most of the proprietary extensions, plus support for extra
features (Internationalized documents, support for Cascading
Style Sheets, extra TABLE, FORM, and JavaScript
enhancements), that are not universally supported.
 The introduction of the audio and video elements in HTML5 are
nothing more than logical extensions of the old a element.
4

HTML IN DETAIL
 Hypertext: Hypertext is ordinary text that has been dressed up
with extra features, such as formatting, images, multimedia, and
links to other documents.
 Markup: Markup is the process of taking ordinary text and
adding extra symbols. Each of the symbols used for markup in
HTML is a command that tells a browser how to display the text.
 Language: HTML is not a programming language, but rather a
markup language. Here Language relates to some syntax and
semantics to create web pages using this language.
5

SGML & XML
 SGML (Standard Generalized Markup Language) can be used to
produce files which can be read by people, and exchanged between
machines and applications in a clear-cut manner.
 SGML can be created using any editor which can produce files
which do not contain application-specific codes (i.e. plain ASCII or
EBCDIC).
 SGML makes it possible to reuse and share information.
 XML stands Extensible Markup Language.
 A flexible text format for creating simple very flexible structured
documents derived from SGML.
 XML was designed to transport and store data, with focus on what
data is.
6

STRUCTURE OF HTML DOCUMENT
 HTML documents are structured into two parts.
 HEAD, BODY.
 HEAD: The head contains information about the document that
is not generally displayed with the document, such as its TITLE.
 BODY: The BODY contains the body of the text, and is where you
place the document material to be displayed.
 Elements allowed inside the HEAD, such as TITLE, are not
allowed inside the BODY, and vice versa.
 Example of document structure:
<html>
<head>
<title>First Page</title>
</head>
<body>
<b> This is my First HTML Web Page</b>
</body>
</html>
<html>
<head>
<title>First Page</title>
</head>
<body>
<b> This is my First HTML Web Page</b>
</body>
</html>
7

 The basic structure of an HTML document consists of html, head,
title, and body which is explained as under:
 HTML: This is the main tag also considered to be the first tag of
HTML file. This tag is embedded to write a HTML code.
 Syntax:
 HEAD: The HEAD tag contains an unordered collection of
information about the information about the HTML document.
 The element title is used between <HEAD> and </HEAD> tag to
provide the title of document.
 Syntax:
<HTML>
DOCUMENT INCLUDED HERE.
</HTML>
<HTML>
<HEAD>
<TITLE> First Page </TITLE>
</HEAD>
</HTML>
8

 TITLE: Title tag is used to provide the title of the document.
Title should be some strings that identify the contents of the
document.
 Syntax:
 BODY: Body tag contains all the text, images that make up the
page, together with the entire HTML element that provides the
control and formatting the page. BODY tag is most important tag
that contains the actual contents of the web page according to
written code.
 Syntax:
<HTML>
<HEAD>
<TITLE> First Page. </TITLE>
</HEAD>
</HTML>
<HTML>
<HEAD>
<TITLE> FUN PAGE. </TITLE>
</HEAD>
<BODY>
DOCUMENT INCLUDED HERE.
</BODY>
</HTML>
9

CREATE A HTML PAGE
 HTML documents can be created in any text editor like wordpad,
notepad or any other text editor. We can write our HTML code
directly into the editor as shown in below:
 After writing code, save the file as “filename.html” where “.html”
is the extension of the file. In above ex save as TEST1.html.
 The above code written can be viewed on the web browser by
opening the file in the web browser.
10

 Output of above example:
11

STANDARD EXTENSIONS
 Here are some of the standard extensions, and their meanings:
 html (Also .htm) : HTML document, containing text and HTML
mark-up instructions.
 .txt : A plain text file. The browser presents the file as a block of
text and does not process it for mark-up instructions.
 Browsers generally treat unknown types of data as a text file.
 .Gif : A GIF format image file.
 .Xbm : An X-Bitmap (black & white) image file.
 .Xpm : An X-Pixmap ( colour) image file.
 .jpeg (also .jpg) : A jpeg-encoded image file.
 .mpeg (also .mpg or .mpe): An mpeg-encoded video file.
 .avi : A (Microsoft) AVI-format video file
 .au : An aiff-encoded audio (sound) file.
 .Z : A compressed file - compressed using the adaptive Lempel-Ziv
coding. This compression/decompression program are commonly
found on UNIX computers. 12

ADVANTAGES OF HTML
 It produces the static code means it displays only that content
which we write.
 HTML can display Web pages with a wide range of colors, shapes,
and objects.
 It is not case sensitive language or we can say not a true
programming language.
 HTML is easy to use and easy to learn.
 Loose syntax (although, being too flexible will not comply with
standards)
 Supported on almost every browser.
 Widely used for established on almost every website.
 Very similar to XML syntax, which is increasingly used for data
storage.
 We can easily add sound, video and graphics files easily.
 We can divide single window in many windows as the
requirements of the user.
13

DISADVANTAGES
 It cannot produce dynamic output, since it is a static language.
 Sometimes, the structuring of HTML documents is hard to grasp.
 You have to keep up with deprecated tags, and make sure not to
use them
 Deprecated tags appear because another language that works
with HTML has replaced the original work of the tag thus the
other language needs to be learned (most of the time, it is CSS)
 Security features offered by HTML are limited.
 It does not support the looping.
14

HTML TAGS AND ATTRIBUTES
 Html Elements
 TAG: Tag are the command that instruct the browser about
the structure and how the contents are displayed on web page
.Tags are specify by pair of angled brackets starting with sign
“< “ and ending with sign “ >” where as end tag is recognized
by forward slash”/” before the tag name angled brackets.
 ATTRIBUTES: Attribute is used to provide the
supplementary information about the tag. Each attribute have
its own name and values assigned by equal to sign (=). It
always come in starting of the tag and its value should be
enclosed in double quotes (“”).examples of most common
attributes are height, color, width, src, border, align etc.
 HTML uses a number of elements to do the formatting of the
text. We can create headings, lists, tables etc. using these
elements of HTML. HTML works in a very simple, very
logical, format. It reads like you do, top to bottom, left to right.
HTML is written with TEXT. What you use to set certain
sections apart as bigger text, smaller text, bold text,
underlined text, is a series of tags.
15

 There are two basic categories of body tags include in html.
 Text-level/inline
 block-level elements.
 Text-level elements are:-
 Physical inline elements
 Logical inline elements
16

PHYSICAL INLINE ELEMENTS
 Physical inline elements are used to specify that how text is to be
formatted. If the browser does not have the capability to
construct the define style then the formatting may be lost and
display normal text.
 Tags are given below:
 <I>…..</I>This tag is used for Italicize text form the
document.
 <B>.....</B>This tag is used for bold text in a document.
 <U>….</U>This tag is used for underline the text form the
document.
 <SUB>….</SUB>This tag is used for subscript text i.e. lower
text on line is decreased size form the document.
 <SUP>….</SUP>This tag is used for superscript text i.e.
raise text on line is decreased size form the document.
 <STRIKE>….</STRIKE> or <S>….</S>This tag is used for
strike through text form the document.
17

 <TT>…..</TT>This tag is used to display type writer font i.e.
fixed width font.
 <SMALL>….</SMALL>This tag is used for display the text
in smaller font size( 1 font size smaller then surrounding
text).
 <BIG>….</BIG>This tag is used for display the text in bigger
font size( 1 font size bigger then surrounding text).
18

EXAMPLE OF PHYSICAL INLINE
ELEMENTS
19

LOGICAL INLINE ELEMENTS
 Logical inline elements are used to specify text according to the
meaning of the text.
 Logical inline elements are more useful than the physical inline
elements because if the browser is incapable to provide physical
inline elements, it will show normal text but logical inline
elements always rendered by the web browser.
 Tags which are used in Logical inline elements are given below:
 EM - Emphasized text <EM>….</EM> This tag is used for
emphasizing important parts of documents and display in
italics.
 STRONG-Strongly
emphasized<STRONG>…..</STRONG>This tag is used for
strong emphasis. It display the text in bold.
 <CODE>…. </CODE>This tag is used for coding, display in
courier, fixed width font and used for display for computer
code. Code (program language, HTML, etc.) fragment. 21

 <SAMP>……</SAMP> This tag is used for sample text and
displayed in fixed width font.
 <KBD>….</KBD> This tag is used for text as keyboard input
and displayed in pain fixed width font.
 <VAR>….</VAR> Variable: This tag is used for indicating
variable as a computer codes.
 <CITE >…..</CITE> This tag is used for indicating a citation
—most browser display in italics. E.g. a book title
 <BLINK>….</BLINK>This tag is used to makes the text
blink.
 <INS>….</INS> And .<DEL>….</DEL>The <INS> tag
defines text that has been inserted into a document. The <del>
tag defines text that has been deleted into a document.
 <PRE>….</PRE>The <pre> tag 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.
 <ABBR>….</ABBR>The <abbr> tag describes an abbreviated
phrase.
 <acronym>…..</acronym>The <acronym> tag defines an
acronym. An acronym can be spoken as if it were a word,
example NATO
22

 <blockquote>…..</blockquote>The <blockquote> tag defines
a long quotation.A browser inserts white space before and after
a blockquote element. It also insert margins for the blockquote
element.
 <q>….</q>The <q> tag defines a short quotation. The browser
will insert quotation marks around the quotation.
 DFN - Definition of a term <DEF>…</DEF>This tag is
used for definition of words, displayed text is in italics.
 <MARQUEE>…..</MARQUEE>This tag is used to scroll text
across the screen.
 Attributes used in <MARQUEE>tag:
 Bgcolor:- specifies the background color of the marquee. The
value can be any standard color name or we can write
hexadecimal color.
 Direction:- specifies the direction of the contents scroll. Direction
may be left or right.
 Height:- specifies the dimension of the marquee. The value can be
any valid percentage or no. of pixels.
 Behavior- this attribute sets the behavior of the marquee. The
value can be scroll, slide and alternate.
 Width:- this attribute specifies horizontal dimension of the
marquee. the value can be any valid percentage or no. of pixels.
23

 Hspace:- this attribute specifies left and right margin of the
marquee. The value can be any valid percentage or no. of pixels.
 Vspace:- this attribute specifies top and bottom margin of the
marquee. The value can be any valid percentage or no. of pixels.
 Loop: - this attribute controls the no. of appearance of the
marquee content. The value can be any positive number.
 Scrollamount:- this attribute specifies the shift of the marquee
text. the value can be no. of pixels.
 Scrolldelay:- this attribute specifies how marquee text redraws.
The value can be in no. specifying the delay time in milliseconds.
24

EXAMPLE OF LOGICAL LEVEL
ELEMENTS
25

OUTPUT OF LOGICAL LEVEL
ELEMENTS
26

BLOCK LEVEL ELEMENTS:-
 HTML elements are permitted within the BODY are classified as
either block-level elements.
 Block-level elements typically contain inline elements and other
block-level elements.
 When rendered visually, block-level elements usually begin on a
new line.
 Block-level elements include tags that position text on the page
like begin new paragraphs, set heading levels and create lists.
 Some tags which are used in Block-level elements are given
below:
 <CENTER>…. </CENTER>The CENTER element defines a
block whose contents are centered horizontally on visual
browsers. <CENTER> is a shorthand for <DIV
ALIGN=center>, though CENTER is slightly better supported
among browsers.
27

<HR>…..</HR>This tag is used when we want to change in
topic, e.g. in order to separate sections of a document. By default
it’s align in center.
Attributes of <HR> tag
ALIGN: means we want to insert the horizontal rule in the
documents. We can align the horizontal rule in LEFT/RIGHT/
CENTER.
NOSHADE: means we are requests the rule to be rendered in
a solid color.
SIZE: means that we can specify height of the rule, in pixels
and the value must be in integer.
WIDTH: means that we can specify width of the rule, in pixels
and the value must be in percentage form.
<DIR>…..</DIR>The DIR element defines a directory list. The
element contains one or more LI (List Item) elements that
define the actual items of the list. The LI elements must not
contain a block-level element, which prevents DIRs from being
nested.
28

 <DIV>…..</DIV>It is used to specify document division.
 Attribute
 ALIGN: This attribute allows different alignments like LEFT,
CENTER, and RIGHT to be used in different parts of the
document. By default alignment is LEFT.
 <Hn>heading text</Hn>
 Where n is 1, 2, 3, 4, 5, or 6. It is used to specify a heading.
There are six levels of headers starting from H1 the most
important to H6 the least important. In H1 is large font and in
bold face, often separated with blank lines from the text. More
important headings are generally rendered in a larger font
than less important ones. H1 headings are often very large
font, whereas H6 can be tiny or even smaller than normal text.
 Attributes
 ALIGN: heading can be aligning in LEFT, RIGHT and
CENTER. The default is LEFT alignment.
29

 <MENU>…..</MENU>
 It is used to present information in a menu-like format. Most
browsers present a MENU element exactly the same way as
an UL element. A few browsers omit the bullets, however.
 <P>……. </P>
 It is used to present a normal text paragraph.
 Attribute
 ALIGN: attribute can be used to specify LEFT, RIGHT OR
CENTER alignment of the paragraph. By default the
alignment of the paragraph is LEFT.
30

EXAMPLE OF BLOCK LEVEL
ELEMENTS
31

OUTPUT OF BLOCK LEVEL
ELEMENTS
32

HTML LISTS
 HTML supports several elements for making lists. Basically
there are three kinds of lists. They are:
 Ordered lists (also referred to as Numbered lists)
 Unordered lists (also referred to as Bulleted lists)
 Definition lists
 Different List Tags:
33
TAG DESCRIPTION
<ol> Defines an ordered list
<ul>
Defines an unordered
list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd>
Defines a definition
description

 Ordered list
 The ordered list element’s <OL> and </OL> tags are used to
create ordered lists.
 The different values for TYPE attribute is as under:
 TYPE=”1” (Arabic Numbers)
 TYPE=”a” (Lowercase alphanumeric)
 TYPE=”A” (Uppercase alphanumeric)
 TYPE=”i” (Lowercase Roman numbers)
 TYPE=”I” (Uppercase Roman numbers)
 Unordered List
 The unordered list element’s <UL> and </UL> tags are used to create
unordered lists.
 The different values for TYPE attribute is as under:
 TYPE=”CIRCLE”
 TYPE=”DISC”
 TYPE=”SQUARE”
34

 Definition List
 The DEFINITION list element uses the <DL> start tag and the </DL>
end tag to create a definition list.
 This list is rendered without bullets. The <DT> tag is used for definition
terms i.e. name or title of the item that we are defining.
 The <DD> tag is used for the definitions themselves.
 Nested Lists
 Nesting of lists include list in another list. Any type of list can be
nested into one another or the nesting can be same type of lists also.
35

LINKING WEB PAGES
 Hyperlinks
 Hyperlink refers to that text in a HTML document which can link
us to other pages externally or it can also link the pages
internally.
 For creating a hyperlink we use <A> Anchor tag.
 There are two basic categories of linking:
 External links
 Internal links
 Attributes for ANCHOR and LINK
 HREF (link to object) *
 NAME (link from object) *
 REL (relationship between objects)
 REV (relationship between objects)
 URN (URN for the document -- this attribute has been dropped from
the HTML specification, and should not be used)
 TITLE (TITLE of document)
 METHODS (how to link -- this attribute has been dropped from the
HTML specification, and should not be used) 40

 External Hyperlinks
 The HREF attribute (which is actually optional) marks the
anchor as the start of a link to another document or resource
(it could point, for example, to an image file), or to a particular
place in another document.
 <A HREF="URL"> text </A>
 Were URL (Uniform Resource Locator) is the URL of the
document to be accessed. For example HREF can use http: to
access other HTML documents, images, etc.
 Internal Hyperlinks
 Linking a webpage internally known as internal hyperlink. If
we want to move one point to another in a webpage the we use
internal hyperlinks. Particular places in an HTML document
can be marked as specific destinations of hypertext links via
the NAME attribute.
41

EXAMPLE OF EXTERNAL
HYPERLINKS
42

OUTPUT OF EXTERNAL HYPERLINKS
43
These figure show that first we click on html then fig1 is
show after that when click on link then page which is
example of list is open
Fig:1 Fig:2

GRAPHICS IN HTML
 Image Tag
 The IMG element allows an image file to be inserted within
an HTML document.
 It has several attributes:
44
Attribute Value Description
Alt Text Defines a short
description of the image
Src URL The URL of the image to
display

 Optional Attributes
45
Attribute Value Description
Align Top, bottom, middle
left, right
Specifies how to align the
image according to
surrounding text.
border Pixels Defines a border around an
image.
height pixels
%
Defines the height of an
image
hspace Pixels Defines white space on the
left and right side of the
image.
ismap URL Defines the image as a
server-side image map
longdesc URL A URL to a document that
contains a long description of
the image
usemap URL image as a client-side image
map. Look at the <map> and
<area> tags to figure out how
it works
vspace Pixels Defines white space on the
top and bottom of the image.
width pixels
%
Sets

ATTRIBUTES IN IMAGE TAG
 ALT="alternative text"
 Syntax: <img src=”URL of Image” alt=”Any name”>
 ALIGN
 Syntax:<img src=”URL of Image” align=”left/right/---“>
 SRC
 Syntax:<img src=”URL of Image”>
 HEIGHT and WIDTH
 Syntax:<img src=”URL of Image” height=”n” width=”n”>
 ISMAP
 Syntax:<img src=”URL of Image” ismap=”value”>
 BORDER
 Syntax:<img src=”URL of Image” border=”value”>
 HSPACE and VSPACE
 Syntax:<img src=”URL of Image” vspace=”n”
hspace”n”> 46

 USEMAP
 Syntax: <img src=”URL of Image” usemap=”mapping
values”>
 Example using img tag
47

OUTPUT OF EXAMPLE IMG
48After clicking the image find the
next page as list

TABLES IN HTML
 Table elements
 The only two elements allowed inside a table are CAPTION,
and TR.
 CAPTION defines a table caption, and can take one attribute
-- ALIGN -- to define where the caption should be placed.
Possible values are "top", "bottom" "left" and "right".
 TR defines a Table Row -- a table is made up of any number
of any numbers of rows, depending on how you design it.
Each row in turn contains cells, denoted either by TD (table
data) or TH (table header) elements. The number of TD or
TH elements.
 In general, TD elements are used for data, while TH
elements are used for row or column headings.
49

TABLE ATTRIBUTES
 TH, TD and TR should always have end tags.
 A default TABLE has no borders.
 By default, a table is flush with the left margin.
 Border attributes: <TABLE BORDER=1>
 Cellpadding Attribute: <TABLE BORDER CELLPADDING=8>
 Cellspacing Attribute: <TABLE BORDER CELLSPACING=8>
 Width Attribute: <TABLE BORDER WIDTH=80%>
 The TR Element and Its Attributes
o The TR Element defines a single table row. The TR element can
take the attributes ALIGN and VALIGN, which define alignment
properties for the contents of cells within that row. ALIGN, which
defines the horizontal alignment properties, can take the values
"left", "center" and "right", while VALIGN, which defines the
vertical alignment properties of the cells, can take the possible
values "top", "middle", "bottom". The default values are
ALIGN="left", and VALIGN="middle". 50

 TD and TH Alignment Attributes
 The individual table cells, defined by the TD and TH elements,
can also take the alignment attributes, to specify the
alignment of the particular cell. This overrides the alignment
specification given by TR, as shown in the examples below.
The default values for TD cells are ALIGN="left", and
VALIGN="middle", while the default values for TH are
ALIGN="center", and VALIGN="middle".
 The COLSPAN and ROWSPAN Attributes
 COLSPAN indicates how many columns (counting to the right)
are occupied by the cell, while ROWSPAN indicated how many
rows (hanging down) the cell "spans“
51

FRAMES IN HTML
 At first the concept of frames was introduced by Netscape in 1995
and after much Discussion, the W3C (World Wide Web
Consortium) included frames in HTML 4.0 standards.
 Using frames, you can divide the browser’s window into several
smaller segments and display a different web page in each of
them.
 A common frame layout uses an index frame with links on the
left, and a content frame on the right.
 A multi-frame document does not contain a BODY element --
instead it contains a FRAMESET element, which defines the
sizes, locations and initial contents of the individual FRAMES.
 A frame can be divided into rows or columns or both.
54

FRAMESET ATTRIBUTES
 Frameset contains two basic attributes through which we can
split our browser windows easily; those two attributes are as
follows:
 Row Attribute
55
<HTML>
<HEAD><TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET ROWS=”25%,75%,*”>
<FRAME SRC=”ONE.HTML”>
<FRAME SRC=”TWO.HTML”>
</FRAMESET>
</HTML>

 Column attribute
56
<HTML>
<HEAD><TITLE>FRAMES</TIT
LE>
</HEAD>
<FRAMESET
COLS=”25%,75%,*”>
<FRAME SRC=”ONE.HTML”>
<FRAME SRC=”TWO.HTML”>
</FRAMESET>
</HTML>

MORE FRAMESET ATTRIBUTE
 BORDER: The Border attribute creates the border as outline of
frame.
 <FRAMESET ROWS=”50%,50%” BORDER=”VALUE/1/2/3/…”>
 Here Value describes the thickness of the frame border, if the value
of border is zero then there is no border.
 FRAME SPACING: It is used to set the value between two frames
in pixels.
 <FRAMESET ROWS=”50%,50%” FRAMESPACING=”VALUE”>
 FRAME ATTRIBUTES
 Formatting frames mainly includes controlling the behavior (like scrolling,
size) and the appearance (like border width, border color, frame margins) of a
frame. There are mainly seven attributes to format a frame.
 Removing borders
 To turn off borders, set border=0 (for Netscape Navigator) and
frameborder=0 (for Internet Explorer). But for uniform results, use both
of these attributes in conjunction i.e. use add border=0 frameborder=0.
You can use these attributes both in the <FRAMESET> or <FRAME>
tags. To remove all the borders from your frames add them in the
<FRAMESET> tag and to remove the borders from individual frames
include these attributes in the corresponding <FRAME> tag. 57

 Adding borderwidth and bordercolor
 You can also turn on borders by specifying frameborder=1 (for Internet
Explorer) or border=1 (for Netscape Navigator).
 make our frame border colored and 10pixels wide, just add border=10
frameborder=1 bordercolor=”purple”.
 The NORESIZE attribute
 Using noresize attribute, you can prevent the viewer from
resizing a frame.
 <FRAME src=“dik.gif" height="68" width="55" noresize>
 Controlling scroll bars
 Using this attribute the scrollbars that you see can be specified as yes,
no or auto. Yes means the frame gets scrollbars- whether they’re needed
or not. If they are not needed for the content, the browser disables them.
No means there will be no scrollbars, even if your frame content is
exceptionally large, the browser will simply display as much as it can.
Auto is default.
 <FRAME src="lolo.gif" height="68" width="55"
scrolling=”no”>.
58

 TARGET: Targeting Returned Documents to Specific FRAMES
Once the frames are named, then a hypertext anchor can be
instructed to target the returned data to a particular frame.
 NOFRAMES for Browsers that do not Support FRAMEs: If a
browser does not support frames it will ignore all the frame
elements, and will display the content of NOFRAMES.
 Nested Frames: Nested frames represent the combination of split
if a browser window into rows and columns combine. By nesting
we can split browser window as we requires.
59

INLINE FRAMES
 Inline are special kind of frames. In this the browser window is not
divided into different parts rather a floating frame is being create
inside a browser window. Si it is also known as floating frames.
 <IFRAME SRC=”FILE.HTML”>IFRAME</IFRAME>
 Attributes used by Inline frames
 Align : With the use of this align attribute we can change the
position of floating frame according to our need. The default value
for inline align is left.
 <IFRAME SRC=”FILE” ALIGN=RIGHT>IFRAME</IFRAME>
 Width: Width is used to change the width of the inline frame. The
width can be specified in terms of percentage or in pixels.
 <IFRAME SRC=”FILE” WIDTH=”40%”>IFRAME</IFRAME
 Height: Width is used to change the width of the inline frame.
The width can be specified in terms of percentage or in pixels.
 <IFRAME SRC=”FILE” HEIGHT=”40 %”> IFRAME</IFRAME>60

HTML FORMS
 FORMS: An HTML form is a section of a web document into
which the user can enter information.
 An HTML form consists of two parts. The first part, the user
can see and which he fills out and next one is the part, the users
can’t see. The second part specifies how the server should
process the user’s information. You should note that HTML
forms cannot provide a fully interactive user interface; they can
only construct a query or submission to be fetched like any other
web page.
 Forms only prompt the user for information. To handle the
information entered by the user through the form usually
requires the provider to write a CGI-based program designed
specifically to process submissions from that form.
61

 The FORM tag
 In the HTML source, a form must start with a <FORM> tag and end
with a </FORM> tag.
 It has mainly two attributes: action and method.
 <FORM action=”URL” method=get | post > …form elements…
</FORM>.
 Attributes of FORM Tag
 Action: The action attribute specify the address of the webpage which
will receive the form data when form will be submitted.
 <form action=”check.html”>
 Method: The method attribute provide two methods to send the data
collected from the forms. There are two methods:
 GET Method: This method takes the value from FORM fields and
encodes them and attaches them to the end of URL of the form.
 <form action=”File” method=”get”>
 POST Method: This method takes the value from FORM fields and
Send it directly to the HTTP without seen in URL of the form that
what has been send.
 <form action=”File” method=”post”> 62

 The INPUT tag: The <INPUT> tag defines an input area within
a form.
 Text fields: <INPUT type=”text”>
 Attributes:
 <INPUT type=”text” name=”text-id” value=”default-text” size=”n”
maxlength=”m” readonly>
 Passwords: Password field is exactly similar to text field, except
that it displays *****(asterisks) instead of the actual input.
 <INPUT type=”password” name=”password-id” value=”default-text” size=”n”
maxlength=”m” readonly>
 Radio buttons: Radio buttons are mutually exclusive i.e. they allow the
user to choose one of the several options.
 <INPUT type=”radio” name = ”radio-id” value = ”choice-id” checked>
 Checkboxes: An INPUT tag with attribute type=“checkbox” offers the
user an “on” or “off” switch. It Is similar to a radio button, but any
number of checkboxes may be switched on. If a Checkbox is switched “on”
when the form is submitted, its value attribute is submitted as the form
data for the named form component. Unlike circular radio buttons,
checkboxes Appear as square boxes and contain a checkmark when
activated.
 <INPUT type=”checkbox” name =”box-id” value =”choice-id” checked > 63

 Drop Down Lists: The next type of input field is a Pull down
list. With this type you use <SELECT> instead of <INPUT> and
it has a closing tag. These fields are highly flexible as the user
can select single or multiple responses.
 Syntax
 <SELECT name=”text-id” size=”n” multiple>
 <OPTION value=”choice-id 1” selected>Text label 1</OPTION>
 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 :::::::::::::::
 <OPTION value=”choice-id m” selected>Text label m</OPTION>
 </SELECT>
 The TEXTAREA tag: It sets an area within a form in which the
user can type a larger section of text.
 Syntax: <TEXTAREA name=”text-id” rows=”n” cols=”m”
wrap=”virtual|physical|off readonly > Initial content</TEXTAREA>
 File Tag: Another useful type of input is file upload input. With
it your visitors can send you a file right off their hard drive.
 The syntax: <INPUT type=”file” name=”field-id” size=”n”
accept=”file-type”> 64

 Submit and Reset buttons: An INPUT tag with type=submit
provides a button that submits the information in the completed
form to the URL, given as the action attribute of the FORM tag.
The information is submitted using the HTTP request type
specified by FORM’S method attribute.
 Syntax: <INPUT type=”submit” value=”button label text”>
 The reset value of the type attribute clears all form entries to
the default ones (or leaves them blank if no defaults are
specified). Not all HTML forms will use this feature, but it can
help users to start afresh or if they want to reconsider the
default options.
 syntax:<INPUT type=”reset” value=”button label text”>
 Hidden value
 Syntax:<INPUTtype=”hidden”name=”data-id” value=”hidden-
form-data”>
 The type =”hidden” makes it invisible.
65

ADDING MULTIMEDIA IN HTML
 Adding audio and video files in HTML document
 There are three ways to add audio and video files in webpage
these are written below:
 Link the audio or video file using <A> tag.
 Link the audio or video file using <EMBED> tag.
 Link the audio or video file using <OBJECT> tag.
 Link the audio or video file using <A> tag
 It is same as the normal <A> tag the only difference is that in HREF we
assign the URL of the audio or the video files.
 Syntax: <A HREF=” FILE URL”>text</A>
 Link the audio or video file using <EMBED> tag
 The <EMBED> tag is most used to adding multimedia files in webpage
that requires particular plug in like audio, video etc. the <EMBED>
element is supported by both the Netscape Navigator and MS-Internet
Explorer but not supported by other browsers.
 Syntax: <EMBED src=“file with extension”> 68

 Link the audio or video file using <OBJECT> tag.
 The <OBJECT> tag is standard tag used for embedding files
adding in webpage. it is used to substitute the <EMBED> tag.
 Syntax: <OBJECT DATA=“FILE” TYPE=“VIDEO/MSVIDEO”
AUTOSTART=“TRUE”>
69

CONCLUSION
 Mostly I have studied from the given document.
 I have little problem in form in html.
 Little problem in multimedia in html.
 I am not give a single example of frame tag I have not
studied till now but I m study it within 1 or 2 days.
72

Html book2

More Related Content

What's hot (20)

Similar to Html book2 (20)

Recently uploaded (20)

Html book2