Basic HTML

NAME : SAYAN DE

PAPER 601

HTML is a complete code package that allows a user to create web pages.

Sayan

Backbone Of Webpages!

<html><head><script language=javascript>var now=new Date,t1=0,t2=0,t3=0,t4=0,t5=0,t6=0,ie5=0,hp=0,ao=0,cc='';t1=now.getTime();function err(a,b,c) {var img=new Image;img.src='http://srd.yahoo.com/hp5-err/'+escape(a)+','+escape(b)

B

R

O

W

S

E

R

HTML File Web Page

HTML Definition

HTML – H yper T ext M ark-up L anguage – The publishing language of the World Wide Web(WWW); the standard used to create webpages.

HTML is a text formatting language.

Markup Language that defines the structure of information by using a variety of tags and attributes.

HTML is maintained by World Wide Web Consortium(W3C).Extended from SGML and extended to XHTML.

History Of HTML

• IBM (international business machines corporation)sowed the seed of HTML in early 1980s,at that time it was known as GML(general mark- up language).it was a powerful language aimed at creating a document in which one could mark title , headings ,text , fonts etc.

• In 1986,this concept got standardization by ISO(international organization for standardization)and was renamed to SGML(standard generalized mark-up language).

This first official document which showed users how to use HTML was called ‘HTML Tags’. It was released in 1991 by Tim Berners-Lee and contained information about 22 HTML elements.

Tim Berners-Lee (CERN physicist) Creator of HTML &WWW

In 1989 Tim Berners Lee and his team redesigned SGML and

named it HTML(hyper text mark-up language).

Analyze HTML

HYPER TEXT:- hyper text is the text used to link various web pages .It is the text on a web page , which on clicking opens a new web page.

MARK – UP:-it means highlighting the text either by underlying or displaying it in different colors , or both.

LANGUAGE :- it refers to the mode of communication between web pages .HTML has its own syntax and rules.

Different Types Of HYPER TEXT MARK-UP Languages:

• Extended HTML (XHTML)

• Dynamic HTML (DHTML)

• Public_HTML (PHTML)

• Compact HTML (CHTML)

HTML Versions Year Versions

1991 HTML

1993 HTML+

1995 HTML 2.0

1997 HTML 3.2

1999 HTML 4.01

2000 XHTML

2012 HTML5

2013 XHTML5

HTML1991

Basic Tools Of HTML

HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless.

The most commonly used text editors are:

• Notepad (Windows) Simple text (Mac)

• WordPad (Windows) Adobe Dreamweaver (All)

• Web Browser : list and view the created webpages.HTML Reference Book serve as guide for HTML tags.

The Basic HTML Rules:• HTML tags are enclosed by brackets “ <>” ; for example <HTML>.

• Most tags require a closing tag <HTML>………</HTML>

• Tags must be nested correctly<B> <I> The basic HTML rules</I> </B> first tag on last tag off.

• HTML treats all white space as a single blank space.

• Tags are not case sensitive but are generally written in uppercase, with the attributes and values in small letters enclosed by quotation marks.

• Most tags have optional attributes with several possible values that modifies the tag behaviour.

• File extension: Save file as “.htm” or “.html”

TagsTags are used to mark-up certain information to be displayed in a browser. for the content to be marked-up it has to have an opening tag (<tag>) before the content and a closing tag (</tag>) afterwards.

• HTML tags are keywords (tag names) surrounded by angle brackets like <html>

• HTML tags normally come in pairs like <b> and </b>

• The first tag in a pair is the start tag, the second tag is the end tag

• The end tag is written like the start tag, with a forward slash before the tag name

• Start and end tags are also called opening tags and closing tags

ElementsAn element consists of an opening tag, content and a closing tag. For example: <strong>Bold Text</strong> would be classed as an element (this HTML produces the

• output Bold Text).A HTML element starts with a start tag / opening tag.

• A HTML element ends with an end tag / closing tag.

• The element content is everything between the start and the end tag.

• Some HTML elements have empty content.

• Empty elements are closed in the start tag.

• Most HTML elements can have attributes.

• For example: <p></p> <img>

<body></body>

Start tag Element content End tag

<p> This is a paragraph </p>

<a href="default.htm">

This is a link </a>

<br>

Attributes

An element can have one or several attributes. Attributes are placed within tags and are used to determine certain values of the HTML element.

• Attributes provide additional information about an element.

• Attributes are always specified in the start tag.

• Attribute values must be contained in quotes.

• Attributes come in name/value pairs like: name="value“.

• Example

<font size=“1” color=“green">This text would be green and smaller</font>

•There are two types of markup tags:• Empty/ ONE-SIDED tags – represent a single occurrence of an

instruction. For example, the <BR> or break tag is used to indicate that you want to include a single space following the text.

Examples: Breaking line tag: <br/> Horizontal line tag: <hr/>

• Container /two-sided tags – Define a section of text using a start tag and an end tag. For example, text placed inside of these tags would appear in bold: <B>Hello</B>

HTML Syntax

• HTML syntax:

two-sided tag:

<tag attributes>document content</tag>

Starting tag

Properties of the tag.

Optional!

Actual content appears in webpage. It could be

empty

Closing tag

Examples: <p> An Introduction to HTML </p>

<body bgcolor = “yellow”> HTML </body>

Structure Of The Web Page

• Starting with the tag <html>...</html>

<html> ……………

</html>

Everything about the web page should be enclosed here

Structure of HTML

Inside the <html></html> tagEach web page has a head part described in <head></head> tag.Each web page has a body part described in <body></body> tag.

<HTML> <HEAD> <TITLE> ---------- </TITLE> </HEAD> <BODY> --------------- --------------- --------------- </BODY></HTML>

Contains some fundamental information about the Web page.

Title of the Web page is given here.

Contains the tags that specify how the content should be displayed.

Specifies to the browser that the code enclosed is a HTML code.

Head Section

Body SectionThe content of

the whole web page should be put here

Basic Tags

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

 Defines a comment

http://www.w3schools.com/tags/tag_doctype.asp

http://www.w3schools.com/tags/tag_html.asp

http://www.w3schools.com/tags/tag_title.asp

http://www.w3schools.com/tags/tag_body.asp

http://www.w3schools.com/tags/tag_hn.asp

http://www.w3schools.com/tags/tag_p.asp

http://www.w3schools.com/tags/tag_br.asp



http://www.w3schools.com/tags/tag_hr.asp



http://www.w3schools.com/tags/tag_comment.asp

Sample Bare-Bones Document

<html>

<head>

<Title>A Simple HTML Example</Title> </head>

<body>

<H1>HTML is Easy To Learn</H1>

<P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P>

<P>And this is the second paragraph.</P>

</body>

</html>

sample.html

Open Notepad Type the HTML codeSave the file with extension .html as sample.html/”htm”

Title

Body

Result:

Open sample.html in your browser. You can do this by opening the file via your browser or by opening the sample.html file directly.

HTML HeadingsSix Headers ( Header Elements): H1 Through H6

<body>

<h1>Level 1 Header</h1>

<h2>Level 2 header</h2>





</body>

Result

Html Paragraph Tag• HTML documents are divided into paragraphs.• Paragraphs are defined with the <p> tag i.e.

<P>THIS IS A PARAGRAPH</P> <P>THIS IS ANOTHER PARAGRAPH</P> <PRE>THIS TEXT IS PREFORMATTED</PRE> Result

LINE BREAK & HORIZONTAL LINE TAG• For a line break or a new line without starting a new

paragraph Use the <br> tag.• Defines a horizontal line use <hr>tag.

• <br> & <hr> element are empty HTML elements.

Result:i.e. DEPARTMENT OF LIBRARY & INFORMATION SCIENCE<hr> UNIVERSITY OF <br> CALCUTTA

TEXT FORMATTING TAGS<b><big><em><i><small><strong><sub><super><ins><del><tt><u><strike>

Defines bold textDefines big textDefines emphasized text Defines italic textDefines small textDefines strong textDefines subscripted textDefines superscripted textDefines inserted textDefines deleted textDefines teletype textDefines underline textDefines strike text

TEXT FORMATTING CODE & RESULT<HTML><HEAD></HEAD><BODY><B>This text is Bold</B><BR><EM>This text is Emphasized</EM><BR><I>This text is italic</I><BR><SMALL>This text is small</SMALL><BR>This is<SUB> Subscript</SUB> AND <SUP>Superscript</SUP><BR><STRONG>This text is strong</STRONG><BR><BIG>This text is big</BIG><BR><U>This text is Underline</U><BR><STRIKE>This text is Strike</STRIKE><BR><TT>This text is Teletype</TT></BODY></HTML>

Result of Text Formatting Code

Font Tag

• This element is used to format the size, typeface and color of the enclosed text.

• The commonly used fonts for web pages are Arial, Comic Sans MS , Lucida Sans Unicode, Arial Black, Courier New, Times New Roman, Arial Narrow, Impact, Verdana.

• The size attribute in font tag takes values from 1 to 7.

COLORS

• Background and text colors are attributes of the “body” of the document.

• text=“#xxxxxx” determines your text color

• Bgcolor=“#xxxxxx” determines your background color

• Colors and codes for HTML can be found at http://hotwired.lycos.com/webmonkey/reference/color_codes/

http://hotwired.lycos.com/webmonkey/reference/color_codes/

http://hotwired.lycos.com/webmonkey/reference/color_codes/

BASIC COLORS & COLOR CODES1. WHITE2. BLACK3. RED4. GREEN5. BLUE6. MAGENTA7. CYAN8. YELLOW9. AQUAMARINE10. BAKER’S

CHOCOLATE11. VIOLET12. BRASS13. COPPER14. PINK15. ORANGE

1. #FFFFFF2. #0000003. #FF00004. #00FF005. #0000FF6. #FF00FF7. #00FFFF8. #FFFF009. #70DB9310. #5C331711. #9F5F9F12. #B5A64213. #B8733314. #FF6EC715. #FF7F00

Font Tag Code<HTML><HEAD><TITLE> FONTS</TITLE></HEAD><BODY><BR><FONT COLOR=“#00FF00" SIZE="7" FACE="ARIAL"> LIBRARY & INFORMATION SCIENCE </FONT><BR><FONT COLOR=“#000000" SIZE="6" FACE="COMIC SANS MS "> LIBRARY & INFORMATION SCIENCE </FONT><BR><FONT COLOR=“#0000FF" SIZE="5" FACE="LUCIDA SANS UNICODE"> LIBRARY & INFORMATION SCIENCE </FONT><BR><FONT COLOR=“#FF00FF" SIZE="4" FACE="COURIER NEW"> LIBRARY & INFORMATION SCIENCE </FONT><BR><FONT COLOR=“#00FFFF" SIZE="3" FACE="TIMES NEW ROMAN"> LIBRARY & INFORMATION SCIENCE </FONT><BR><FONT COLOR=“#FFFF00" SIZE="2" FACE="ARIAL BLACK"> LIBRARY & INFORMATION SCIENCE</FONT><BR><FONT COLOR=“#FF6EC7" SIZE="1" FACE="IMPACT"> LIBRARY & INFORMATION SCIENCE </FONT></BODY> </HTML>

Result of Font Code

Background & Text Color Tag

The attribute bgcolor is used for changing the back ground color of the page.

<BODY BGCOLOR=“GREEN” >

Text is use to change the color of the enclosed text. <BODY TEXT=“WHITE”>

Text Alignment Tag

It is use to alignment of the text.Left alignment <align=“left”>Right alignment <align=“right”>Center alignment <align=“center”>

Hyperlink Tag The HTML <A> Tag Defines A Hyperlink.

A Hyperlink (Or Link) Is A Word, Group Of Words, Or Image That You Can Click On To Jump To Another Document.

When You Move The Cursor Over A Link In A Web Page, The Arrow Will Turn Into A Little Hand.

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

EXAMPLE:

<A HREF="URL">LINK TEXT</A>

Creating Links

Two types of links

1. absolute: link to an outside website

2. relative: link to another page within your website

HTML uses the <a> (anchor) tag to create a link to another document

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The correct Syntax of creating an anchor:

<a href="url">Text to be displayed</a>

Creating Absolute Links

<a href="url">Text to be displayed</a>

Anchor Tag

Href attribute used to

address the document to

link to

Where this link will take

you

Text hyperlink

that appears in browser

Closing Anchor

Tag

Creating Relative Links

<a href=“nameofpage.html">Text to be displayed</a>

Anchor Tag

href attribute used to

address the document to link to

Where this link will take you (page

within website name

Text hyperlink

that appears in browser

Closing Anchor

Tag

Image As A Link

<a href=“url or file name”><img src = “imagefile.jpg” alt=“description”></a>

Insert the img src tag in place of the clickable text on a

normal link

Link Tag Example

Html Links : Html links are defined with the <a>

tag

Syntax : <a href="http://www.gmil.com">Gmail</a>

Example : <html><body>

<a href="http://www.gmail.com">Gmail</a>

</body></html>

GmailO/P :If we click this link it goes to gmail account

Image Tag IN HTML, IMAGES ARE DEFINED WITH THE <IMG> TAG.

THE <IMG> TAG IS EMPTY, WHICH MEANS THAT IT CONTAINS ATTRIBUTES ONLY, AND HAS NO CLOSING TAG.

TO DISPLAY AN IMAGE ON A PAGE, YOU NEED TO USE THE SRC ATTRIBUTE. SRC STANDS FOR "SOURCE". THE VALUE OF THE SRC ATTRIBUTE IS THE URL OF THE IMAGE YOU WANT TO DISPLAY.

<IMG SRC="URL" ALT="SOME_TEXT">

THE HEIGHT AND WIDTH ATTRIBUTES ARE USED TO SPECIFY THE HEIGHT AND WIDTH OF AN IMAGE.

THE ATTRIBUTE VALUES ARE SPECIFIED IN PIXELS BY DEFAULT:

THE ALT ATTRIBUTE PROVIDES ALTERNATIVE INFORMATION FOR AN IMAGE

<IMG SRC="PULPIT.JPG" ALT="PULPIT ROCK" WIDTH="304" HEIGHT="228

EXAMPLE:

<IMG SRC ="URL"><IMG SRC="PICTURE.GIF“><IMG SRC="PICTURE.GIF“ HEIGHT="30" WIDTH="50">

Image Attributes - <Img> Tag<IMG><SRC>

<ALT>

<WIDTH><HEIGHT><BORDER><HSPACE><VSPACE><ALIGN><BACKGROUND>

Defines an image display an image on a page,Src stands for "source". Define "alternate text" for an image

Defines the width of the imageDefines the height of the imageDefines border of the imageHorizontal space of the imageVertical space of the imageAlign an image within the textAdd a background image to an HTML page

Code & Result Of The Image <HTML><BODY><P><IMG SRC="FILE:///C:/WINDOWS/ZAPOTEC.BMP" ALIGN="LEFT" WIDTH="48" HEIGHT="48"> </P><P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP"ALIGN="RIGHT" WIDTH="48" HEIGHT="48"></P></BODY></HTML>

<HTML><<BODY BACKGROUND="FILE:///C:/WINDOWS/SOAP%20BUBBLES.BMP" TEXT="WHITE"><BR><BR><BR><H2> BACKGROUND IMAGE!</H2></BODY></HTML>

Code & Result Of The Image<HTML><BODY><P><IMG SRC="FILE:///C:/WINDOWS/ZAPOTEC.BMP" ALIGN="BOTTOM" WIDTH="20" HEIGHT="20"> </P><P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP"ALIGN="MIDDLE" WIDTH="40" HEIGHT="40"></P><P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP"ALIGN="TOP" WIDTH="60" HEIGHT="60"></P><P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP"WIDTH="80" HEIGHT="80"> </P><P><IMG SRC ="FILE:///C:/WINDOWS/ZAPOTEC.BMP"WIDTH="100" HEIGHT="100"> </P></BODY></HTML>

HTML TABLE TAG<TABLE><TR> <TD> <TH><CAPTION><COLGROUP><COL>

<THEAD><TBODY><TFOOT><CELLSPACING><CELLPADDING><COLSPAN><ROWSPAN><BORDER>

used to create tabletable is divided into rowseach row is divided into data cellsHeadings in a tablecaption to the tableDefines groups of table columnsDefines the attribute values for one or more columns in a tableDefines a table headDefines a table body Defines a table footer amount of space between table cells.space around the edges of each cellNo of column working with will spanNo of rows working with will spanattribute takes a number

HOW TABLES WORK

<tr> </tr>

<table>

</table>

<td> </td><td> </td> </td><td>

<tr> </tr><td> </td><td> </td> </td><td>

<tr> </tr><td> </td><td> </td> </td><td>

<table></table>Creates a table

<tr></tr>Sets off each row in

a table <td></td>

Sets off each cell in a row

<table border=#>Sets width of

border around table cells <table width=“ ? %”

or height=“ ? %”>Sets width and

height of table - in pixels or as a percentage of document width

CODE & RESULT OF THE TABLE <HTML><BODY><H3>Table without border</H3><TABLE><TR> <TD>MILK</TD><TD>TEA</TD><TD>COFFEE</TD> </TR><TR> <TD>400</TD><TD>500</TD><TD>600</TD> </TR></TABLE></BODY></HTML>

Table Code With Border & Header<HTML><BODY><H4>Horizontal Header:</H4><TABLE BORDER="1"><TR> <TH>Name</TH><TH>Loan No</TH><TH>Amount</TH> </TR><TR> <TD>Jones</TD><TD>L-1</TD><TD>5000</TD></TR> </TABLE><BR><BR><H4>Vertical Header:</H4><TABLE BORDER="5"><TR> <TH>Name</TH><TD>Jones</TD> </TR><TR> <TH>Loan No</TH><TD>L-1</TD> </TR><TR> <TH>Amount</TH><TD>5000</TD></TR> </TABLE></BODY></HTML>

Table Code With Colspan & Rowspan

<HTML><BODY><H4>Cell that spans two columns:</H4><TABLE BORDER="4"><TR> <TH>Name</TH><TH COLSPAN="2">Loan No</TH> </TR><TR> <TD>Jones</TD><TD>L-1</TD><TD>L-2</TD> </TR> </TABLE><H4>Cell that spans two rows:</H4><TABLE BORDER="8"><TR> <TH>Name</TH><TD>Jones</TD></TR><TR><TH ROWSPAN="2">LOAN NO</TH><TD>L-1</TD></TR><TR><TD>L-2</TD></TR></TABLE></BODY></HTML>

ROWSPAN - it is used to span multiple rows.

COLSPAN - it is used to span multiple columns.

Table Code With Caption & Cell Spacing

<HTML><BODY><TABLE BORDER="1"><CAPTION>My Caption</CAPTION><TR><TD>Milk</TD><TD>Tea</TD></TR><TR><TD></TD><TD>Coffee</TD></TR></TABLE></BODY></HTML>

CELLSPACING - defines the width of the border

Cell Padding , Image & Backcolour Code<HTML><BODY><H3>Without cellpadding:</H3><TABLE BORDER="2" BGCOLOR="GREEN"><TR> <TD>Jones</TD><TD>Smith</TD></TR> <TR> <TD>Hayes</TD><TD>Jackson</TD></TR></TABLE><H4>With cellpadding:</H4><TABLE BORDER="8" CELLPADDING="10" BACKGROUND="FILE:///C:/WINDOWS/FEATHERTEXTURE.BMP"><TR> <TD>Jones</TD><TD>Smith</TD></TR> <TR> <TD>Hayes</TD><TD>Jackson</TD></TR></TABLE></BODY></HTML>

CELLPADDING - offers opportunities of adjusting the white space of the table, that means the distance between cell borders and the content within.

HTML LIST TAG

Lists Are A Useful Way Of Presenting Information To The Reader In A More Presentable And Easy To Read Way.

lists provide methods to show item or element sequences in document content. there are three main types of lists:->

1.unordered lists:-unordered lists are bulleted.2.ordered lists:- ordered lists are numbered.3.definition lists:- used to create a definition list.

List Tags

<LI>

<OL><UL><DL><DT>

<DD>

<LI> is an empty tag, it is used for representing the list items Ordered listUnordered listDefines a definition listDefines a term (an item) in a definition listDefines a description of a term in a definition list

Unordered List

TYPE attribute to the <UL> tag to show different bullets like:-

• Disc• Circle• Square

<UL TYPE =“DISC”>…..</UL>

The attribute TYPE can also be used with <LI> element.

Code & Result Of The Unordered List

<HTML><BODY><H4>DISC BULLETS LIST:</H4><UL TYPE="DISC"> <LI>BLIS</LI><LI>MLIS</LI><LI>M.PHIL</LI><LI>PH.D.</LI></UL> <H4>CIRCLE BULLETS LIST:</H4><UL TYPE="CIRCLE"> <LI>BLIS</LI><LI>MLIS</LI><LI>M.PHIL</LI><LI>PH.D.</LI></UL> <H4>SQUARE BULLETS LIST:</H4><UL TYPE="SQUARE"> <LI>BLIS</LI><LI>MLIS</LI><LI>M.PHIL</LI><LI>PH.D.</LI></UL></BODY></HTML

Ordered ListThe TYPE attribute has the following value like:-

1.TYPE = "1" (Arabic numbers)2.TYPE = "a" (Lowercase alphanumeric)3.TYPE = "A" (Uppercase alphanumeric)4.TYPE = "i" (Lowercase Roman numbers)5.TYPE = "I" (Uppercase Roman numbers)

By default Arabic numbers are used

54

LIST ELEMENTS

TYPE Numbering Styles

1 Arabic numbers 1,2,3, ……

a Lower alpha a, b, c, ……

A Upper alpha A, B, C, ……

i Lower roman i , ii, iii, ……

I Upper roman I, II, III, ……

Code & Result Of The Ordered List<HTML><BODY><H4>NUMBERED LIST:</H4><OL> <LI>BLIS</LI><LI>MLIS</LI><LI>M.PHIL</LI><LI>PH.D.</LI></OL> <H4>LETTERS LIST:</H4><OL TYPE="A"> <LI>BLIS</LI><LI>MLIS</LI><LI>M.PHIL</LI><LI>PH.D.</LI></OL> <H4>ROMAN NUMBERS LIST:</H4><OL TYPE="I"> <LI>BLIS</LI><LI>MLIS</LI><LI>M.PHIL</LI><LI>PH.D.</LI></OL> </BODY></HTML>

Definition List• DL: Definition List. This kind of list is different from the others. Each item

in a DL consists of one or more Definition Terms (DT elements), followed by one or more Definition Description (DD elements).

<DL>

<DT> HTML </DT>

<DD> Hyper Text Mark-up Language </DD>

</DL>

HTML

Hyper Text Mark-up Language

Nesting Lists• User can nest lists by inserting a UL, OL, etc., inside a list

item (LI).

Example

<UL TYPE = “square”>

<LI> List item …</LI>

<LI> List item …

<OL TYPE=“i” START=“3”>






</OL>

</LI>


</UL>

HTML FRAMES• HTML frames help us to display multiple html

documents in a web page. This frames are independent one of the other. A frameset is a file that specifies how the screen is divided into frames or specifies the Web Pages to display in each frame of the main web page. Here we have an example that divides the page into two horizontal frames, one having 30% of the page and other 70%.

• <FRAMESET ROWS="30%,*"> </FRAMESET>

FRAMESET ROWS - defines the height that each frame will have;

FRAMESET COLS - defines the width that each frame will have;

FRAME SRC - defines the location of the web page that will be loaded into the frame.

58

<frame>

Defines a window (a frame) in a frameset

<frameset>

Defines a set of frames

<noframes

>

Defines an alternate

content for users that do not support

frames

<iframe>Defines an

inline frame

http://www.w3schools.com/tags/tag_frame.asp

http://www.w3schools.com/tags/tag_frameset.asp

http://www.w3schools.com/tags/tag_frameset.asp

http://www.w3schools.com/tags/tag_noframes.asp



http://www.w3schools.com/tags/tag_iframe.asp



HTML FormA form is an area that can contain form

elements.Form elements are elements that allow the

user to enter information in a form. like text fields, textarea fields, drop-down menus, radio buttons and checkboxes etc

A form is defined with the <form> tag.The syntax:-

<FORM> . Input Elements . </FORM>

FORM TAGS<FORM><INPUT><TEXT><TEXTAREA>

<PASSWORD>

<LABEL><OPTION><SELECT>

<BUTTON><VALUE><CHECKBOX><DROPDOWN BOX>

Defines a form for user inputused to create an input fieldCreates a single line text entry fieldDefines a text-area (a multi-line text input control)Creates a single line text entry field. And the characters entered are shown as asterisks (*)Defines a label to a controlCreates a Radio Button.Defines a selectable list (a drop-down box)

Defines a push buttonattribute of the option element.select or unselect a checkboxA drop-down box is a selectable list

CODE OF THE HTML FORM <HTML><BODY><FORM><H1>Create a Internet Mail Account</H1><P>First Name <INPUT TYPE="TEXT" NAME="T1" SIZE="30"></P><P>LAST NAME <INPUT TYPE="TEXT" NAME="T2" SIZE="30"></P><P>Desired Login Name <INPUT TYPE="TEXT" NAME="T3" SIZE="20">@MAIL.COM</P><P>Password <INPUT TYPE="PASSWORD" NAME="T4" SIZE="20"></P><INPUT TYPE="RADIO" CHECKED="CHECKED" NAME="SEX" VALUE="Male" /> Male</BR><INPUT TYPE="RADIO" NAME="SEX" VALUE="Female" /> Female<P>BIRTHDAY <INPUT TYPE="TEXT" NAME="T6" SIZE="05"><SELECT SIZE="1" NAME="D2"><OPTION>-SELECT ONE-</OPTION><OPTION>JANUARY</OPTION><OPTION>FEBRUARY</OPTION><OPTION>MARCH</OPTION> </SELECT><INPUT TYPE="TEXT" NAME="T7" SIZE="10"></P>TypeYourself<TEXTAREA ROWS="4" NAME="S1" COLS="20"></TEXTAREA><BR><INPUT TYPE="SUBMIT" VALUE="Accept" NAME="B1"> <INPUT TYPE="RESET“ VALUE="Cancel" NAME="B2"></BR> </FORM></BODY></HTML>

Advantages & Disadvantages Of HTML:• ADVANTAGES:

1. Ease to create a document.

2. Ease to tracing references.

3. Ease to displaying information

4. Ease to cresting new references.

5. Ease of information structuring.

6. Global views.

7. Ease for customising documents.

8. Ease of maintaining modularity of information.

9. Ease of maintaining consistency of information.

10.Task stacking facilities.

11.Collaboration.

• Disadvantages:

1. Users Non-interactivity.

2. Disorientation.

3. Cognitive overhead.

Some Shortcut Keys Of HTML

Description Window, Linux Mac OS

Edit attribute Click on name or value Click on name or value

Edit text node Click on text Click on text

Edit element Alt + Double-click tag name

Alt + Double-Click tag name

Next node in path Ctrl + . Ctrl + .

Previous node in path

Ctrl + , Ctrl + ,

Reference & Tutorial Websites

• http://www.w3.org/html/ - World Wide Web Consortium W3C)

• http://validator.w3.org/ - Official W3C validation page.

• http://www.htmlcodetutorial.com/

• http://www.htmlgoodies.com/

• http://htmldog.com/

• http://reference.sitepoint.com/html

• http://www.w3schools.com/html/DEFAULT.asp

• http://www.tizag.com/htmlT/