Html

5,238 views

Published on

HTML Tutorial

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,238
On SlideShare
0
From Embeds
0
Number of Embeds
121
Actions
Shares
0
Downloads
193
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html

  1. 1. HTMLFaaDoOEngineers.com
  2. 2. 2Part 1FaaDoOEngineers.com
  3. 3. 3Objectives• Getting Started With HTML Introducing HTML How Web pages work Introduction to Tags Structure of HTML page• Creating a Web Page Introduction table, tr, td tags. Paragraphs and Line breaks Headings Creating Ordered and Unordered List• Text Formatting And Alignment Boldfaces and Italics Font Size, Color and Typeface Special CharactersFaaDoOEngineers.com
  4. 4. 4• Using Links & Images• Style SheetPurpose of Style SheetStyle RulesAttaching Style SheetDefining classesDiv tag, Span TagUsing Span• Developing FormsIntroducing Forms Using Standard Form ControlsObjectivesFaaDoOEngineers.com
  5. 5. 5What is World Wide Web?• The World Wide Web (Web) is a network of informationresources. The Web relies on three mechanisms to make theseresources readily available to the widest possible audience:A uniform naming scheme for locating resources on the Web(e.g., URIs).Protocols, for access to named resources over the Web (e.g.,HTTP).Hypertext, for easy navigation among resources (e.g., HTML).FaaDoOEngineers.com
  6. 6. 6Introducing HTMLTo publish information for global distribution, oneneeds a universally understood language, a kind ofpublishing mother tongue that all computers maypotentially understand. The publishing language usedby the World Wide Web is HTML (from HyperTextMarkup Language).What is HTMLFaaDoOEngineers.com
  7. 7. 7Introducing HTMLHTML contains special markers, or tags, which definethe style and structure of the page.Tags arealso referredto aselements.What is HTMLFaaDoOEngineers.com
  8. 8. 8• Publish online documents with headings, texts, tables, lists,photos, etc.• Retrieve online information via hypertexts links.• Design forms for conducting transactions with remote services,for use in searching for information, making reservations,ordering products, etc.• Include spread-sheets, video clips, sound clips, and otherapplications directly in their documents.Introducing HTMLUses of HTMLFaaDoOEngineers.com
  9. 9. 9How To Access An Web PageClick ToProceed WithThe StepsFaaDoOEngineers.com
  10. 10. 10Double Clickon theInternetExplorerbuttonFaaDoOEngineers.com
  11. 11. 11BrowserWindowOpensFaaDoOEngineers.com
  12. 12. 12Type the urladdress &Press EnterKeyhttp://www.google.comFaaDoOEngineers.com
  13. 13. 13HTML filesWeb ServerInternetRequestRequestUser makes a requestwww.google.comhttp://www.google.comFaaDoOEngineers.com
  14. 14. 14HTML filesWeb ServerInternetWeb PageWeb PageGoogle page is returned from the Web ServerFaaDoOEngineers.com
  15. 15. 15 FaaDoOEngineers.com
  16. 16. 16Introducing HTMLA tag is a reference in an HTML document whichdescribes the style and structure of the document.All tag start with < (less than symbol) and end with> (greater than symbol)Tags which mark a beginning have no / (front slash).Tags which mark an ending have a / immediately after <,as in </.What is a TagFaaDoOEngineers.com
  17. 17. 17Introducing HTMLExample on Tag<HTML>, <BODY>, <TITLE></HTML>, </BODY>, </TITLE>Sample TagsStarting tags / elementsEnding tags / elementsFaaDoOEngineers.com
  18. 18. 18Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>FaaDoOEngineers.com
  19. 19. 19Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>Start of an HTML document.FaaDoOEngineers.com
  20. 20. 20Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>Indicates to the browser that this is an HTMLdocument.FaaDoOEngineers.com
  21. 21. 21Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>HTML document is divided into two sections.1. <HEAD> …. </HEAD>FaaDoOEngineers.com
  22. 22. 22Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>HTML document is divided into two sections.2. <BODY> …. </BODY>FaaDoOEngineers.com
  23. 23. 23Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>Shows the contents in the browser title bar.Generally placed inside Head tag.FaaDoOEngineers.com
  24. 24. 24Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>Indicates comment tag. Can be placed anywherein the document.FaaDoOEngineers.com
  25. 25. 25Introducing HTMLExplanation of the HTML code<HTML><HEAD><TITLE> My Home Page </TITLE></HEAD><!-- Written by Manas K Sahoo --><!-- Created: 30-May-2007 --><!-- Organization: IBM --><BODY>This is where the text goes.</BODY></HTML>Signal the end of HTML document.FaaDoOEngineers.com
  26. 26. 26Introducing HTML1. Range / Container tags2. Standalone / Point tagsKinds of TagsThey are called so because they cover a range of text.Example : <HTML>, <HEAD>, <BODY>, <TITLE>Those tags which do not need an ending.Example: <HR>, <BR>FaaDoOEngineers.com
  27. 27. 27Paragraphs&Line BreaksFaaDoOEngineers.com
  28. 28. 28Line Separators• Tags used for separating one line with other can be classifies asfollows:-1. <P> tag2. <BR> tag3. <HR> tagFaaDoOEngineers.com
  29. 29. 29The <P> Tag• Normally all text in an HTML document is treated like one longparagraph. Indented or blank lines which normally indicate startof paragraphs in text are ignored.• To separate your text into paragraphs use the• The <P> tag forces an end of line and forces a blank line beforethe next paragraph.<P> tag.FaaDoOEngineers.com
  30. 30. 30Requirement AnalysisFaaDoOEngineers.com
  31. 31. 31<p>This is should be the end of my firstparagraph in HTML.</p><p>This should be the start of my second paragraph inHTML.</p><p>And this is should be my third paragraph inHTML.</p>Code Snippet To Fulfill the RequirementFaaDoOEngineers.com
  32. 32. 32<p>This is should be the end of my firstparagraph in HTML.</p><p>This should be the start of my second paragraph inHTML.</p><p>And this is should be my third paragraph inHTML.</p><p> tag forces an end of line and forces a blank line before the next paragraph.FaaDoOEngineers.com
  33. 33. 33<p>This is should be the end of my firstparagraph in HTML.</p><p>This should be the start of my second paragraph inHTML.</p><p>And this is should be my third paragraph inHTML.</p><p> tag forces an end of line and forces a blank line before the next paragraph.Ends the paragraph tag.FaaDoOEngineers.com
  34. 34. 34The <BR> Tag• Used to control the line breaks.• Use single spacing among the lines unlike <p> tag that usesdouble spacing among the paragraph.• Does not have a closing braces.FaaDoOEngineers.com
  35. 35. 35Requirement AnalysisFaaDoOEngineers.com
  36. 36. 36This is should be the end of my firstparagraph in HTML.<br>This should be the start of my second paragraph inHTML.<br><p>And this is should be my third paragraph inHTML.<br>Code Snippet To Fulfill the RequirementFaaDoOEngineers.com
  37. 37. 37This is should be the end of my firstparagraph in HTML.<br>This should be the start of my second paragraph inHTML.<br><p>And this is should be my third paragraph inHTML.<br>Forces line break with one line spacing between two lines.FaaDoOEngineers.com
  38. 38. 38The <HR> tag• The <HR> tag draws a horizontal line across the page.• It acts a paragraph break.• There is no need to use the <BR> before or after the <HR> tag.FaaDoOEngineers.com
  39. 39. 39Requirement AnalysisFaaDoOEngineers.com
  40. 40. 40This is should be the end of my firstparagraph in HTML.<hr>This should be the start of my second paragraph inHTML.<hr>And this is should be my third paragraph inHTML.<hr>Code Snippet To Fulfill the RequirementFaaDoOEngineers.com
  41. 41. 41This is should be the end of my firstparagraph in HTML.<hr>This should be the start of my second paragraph inHTML.<hr>And this is should be my third paragraph inHTML.<hr>Draws a horizontal line across the page.FaaDoOEngineers.com
  42. 42. 42<HR> tag Attributes<hr color=“red”>1. Color AttributeHow ToUse<hr color=“blue”><hr color=“pink”>FaaDoOEngineers.com
  43. 43. 43<HR> tag Attributes<hr width=“50%”>2. Width AttributeHow ToUse<hr color=“blue” width=“100%”><hr width=“500”>Default alignmentof HR is center.FaaDoOEngineers.com
  44. 44. 44<HR> tag Attributes<hr align=“left” width=“50%”>3. Align AttributeHow ToUse<hr align=“right” width=“50%”><hr align=“center”width=“50%”>FaaDoOEngineers.com
  45. 45. 45<HR> tag Attributes<hr size=“5”>4. Size AttributeHow ToUse<hr size=“3” color=“red”><hr align=“center” width=“50%”size=“2”>FaaDoOEngineers.com
  46. 46. 46The Headings Tags• To add headings in the HTML document use tagwhere, n represent number from 1 to 6.<Hn><H1> </H1>Some text here<H2> </H2><H3> </H3><H4> </H4><H5> </H5><H6> </H6>Some text hereSome text hereSome text hereSome text hereSome text hereFaaDoOEngineers.com
  47. 47. 47Listing In HTML• A common applications of HTML is to display the list of items.• The most popular types of lists that can be created using HTMLare: Unordered List Ordered ListFaaDoOEngineers.com
  48. 48. 48Unordered List• When the list of contents that you want to display don‟t have to followany sequence then you can use Unordered list.• Each item in the unordered list is indented.For Example, while creating list of Electronic products, where sequenceof occurrence does not matter.<UL>tag is used to create a Unordered list.FaaDoOEngineers.com
  49. 49. 49Unordered List• When the list of contents that you want to display don‟t have to followany sequence then you can use Unordered list.• Each item in the unordered list is indented.For Example, while creating list of Electronic products, where sequenceof occurrence does not matter.<LI>tag identifies a item in the list.FaaDoOEngineers.com
  50. 50. 50Unordered List<HTML><BODY><H3>List of Electronic Products</H3><UL><LI>T.V.</LI><LI>VCD</LI><LI>DVD</LI><LI>REFRIGERATOR</LI><LI>WASHING MACHINE</LI><LI>MICRO OVEN</LI></UL></BODY></HTML>Check Out AnExampleFaaDoOEngineers.com
  51. 51. 51Check Out TheOutputFaaDoOEngineers.com
  52. 52. 52Ordered List• When the list of contents that you want to display have to follow asequence.• Each item in the ordered list is indented.• For Example, creating a list of students based on their merit.<OL>tag is used to create a Ordered list.FaaDoOEngineers.com
  53. 53. 53Ordered List<HTML><BODY><H3>List of Fortune 500 Companies – Industry: Computers, OfficeEquipment Year 2006 Survey </H3><OL><LI>IBM</LI><LI>HP</LI><LI>Dell</LI><LI>NEC</LI><LI>Fujitsu</LI><LI>Canon</LI></OL></BODY></HTML>Check Out AnExampleFaaDoOEngineers.com
  54. 54. 54Check Out TheOutputFaaDoOEngineers.com
  55. 55. 55Text Formatting andAlignmentFaaDoOEngineers.com
  56. 56. 561. <PRE> tagCharacter Styles2. <BLOCKQUOTE> tag3. <ADDRESS> tag4. Logical Character Highlighting tags5. Physical Character Highlighting tagsText FormattingFaaDoOEngineers.com
  57. 57. 571. <PRE> tagCharacter Styles• It is used to include preformatted text into your HTMLdocument.• Text will appeared exactly as typed including, tabs andreturns.Text Formatting (Contd.)FaaDoOEngineers.com
  58. 58. 581. <PRE> tagCharacter Styles<pre>This is should be the end of my first paragraph in HTML.This should be the start of my secondparagraph in HTML.</pre>And this is should be my third paragraph in HTML.Sample CodeText Formatting (Contd.)FaaDoOEngineers.com
  59. 59. 591. <PRE> tagCharacter StylesSample OutputText Formatting (Contd.)FaaDoOEngineers.com
  60. 60. 602. <BLOCKQUOTE> tagCharacter Styles• Used to include indented text in a document.• Both the right and left margin are indented.Text Formatting (Contd.)FaaDoOEngineers.com
  61. 61. 612. <BLOCKQUOTE> tagCharacter StylesMost Popular Quote of Shakespeare :<BLOCKQUOTE>To Be, Or Not To Be: That Is The Question</BLOCKQUOTE>Sample CodeText Formatting (Contd.)FaaDoOEngineers.com
  62. 62. 622. <BLOCKQUOTE> tagCharacter StylesSample OutputText Formatting (Contd.)FaaDoOEngineers.com
  63. 63. 633. <ADDRESS> tagCharacter Styles• It defines text that gives an address or other contactinformation.• It is displayed in italic.• Generally, displayed in the bottom of the page.Text Formatting (Contd.)FaaDoOEngineers.com
  64. 64. 643. <ADDRESS> tagCharacter StylesIBM stands for International Business Machines.<hr color=“blue”>The HeadQuarter is located at:<ADDRESS>IBM Armonk, <BR>New York, USA.</ADDRESS>Sample CodeText Formatting (Contd.)FaaDoOEngineers.com
  65. 65. 653. <ADDRESS> tagCharacter StylesSample OutputText Formatting (Contd.)FaaDoOEngineers.com
  66. 66. 664.Character Styles• Logical Character Highlighters are also known asIdiomatic styles tags.• The purpose of logical tags is to convey the basicsemantic meaning of a piece of text rather than theabsolute appearance.• It is used to give your text a different look when displayedby browsers.• Browser handle the look and feel of the logical tag.Logical Character Highlighting tagsText Formatting (Contd.)FaaDoOEngineers.com
  67. 67. 674.Character StylesLogical Character Highlighting tagsName Tag ExampleStrong <STRONG> This is STRONG textEmphasis <EM> This is EMphasized textCode <CODE> This is CODEd textKeyboard <KBD> This is “KeyBoarD” textVariable <VAR> This is VARiable textText Formatting (Contd.)FaaDoOEngineers.com
  68. 68. 685.Character Styles• Physical Character Highlighters are also known asTypographical styles tags.• It is used to give your text a different look but exactinglook.• Not all browsers support physical styles.Physical Character Highlighting tagsText Formatting (Contd.)FaaDoOEngineers.com
  69. 69. 695.Character StylesPhysical Character Highlighting tagsName Tag ExampleBold <B> This is Bold textItalics <I> This is Italicized textUnderline <U> This is a underlined textTeletype <TT> This is TeleType textSuperscript <SUP> X2Y3Subscript <SUB> H2SO4Text Formatting (Contd.)FaaDoOEngineers.com
  70. 70. 70Font Tag• It is used to change the font color, fontsize,fontfaceof text in an HTML document.Text Formatting (Contd.)FaaDoOEngineers.com
  71. 71. 711. SizeAttributes of Font Tag2. Color3. FaceText Formatting (Contd.)FaaDoOEngineers.com
  72. 72. 721. SizeAttributes of Font TagDefault font size is 3.Largest font size can be set is 7.Smallest is 1.The primary <FONT> attribute is SIZE=x, where x is anabsolute value ranging from 1 to 7 or a relative vale (+/-).Text Formatting (Contd.)FaaDoOEngineers.com
  73. 73. 731. SizeAttributes of Font TagHtml Code Output<FONT SIZE=4>HTML is Fun</FONT> HTML is Fun<FONT SIZE=+1>HTML is Fun</FONT> HTML is Fun<FONT SIZE=1>HTML is Fun</FONT> HTML is Fun<FONT SIZE=-2>HTML is Fun</FONT> HTML is FunText Formatting (Contd.)FaaDoOEngineers.com
  74. 74. 742. ColorAttributes of Font TagThere are 3 different methods to set color.i. Generic Coloring Systemii. RGB Coloring Systemiii. Hexadecimal Coloring SystemText Formatting (Contd.)FaaDoOEngineers.com
  75. 75. 752. ColorAttributes of Font Tagi. Generic Coloring SystemGenerics colors are preset HTML coded colors where thevalue is simply the name of each color.Text Formatting (Contd.)FaaDoOEngineers.com
  76. 76. 762. ColorAttributes of Font Tagi. Generic Coloring SystemBlack Gray Silver WhiteYellow Lime Aqua FuchsiaRed Green Blue PurpleMaroon Olive Navy TealSampleGenericBasic ColorsText Formatting (Contd.)FaaDoOEngineers.com
  77. 77. 772. ColorAttributes of Font Tagii. RGB Coloring SystemRGB stands for Red, Green, Blue. Each can have a valuefrom 0 (none of that color) to 255 (fully that color).The format for RGB is – RGB (Red, Green, Blue)Text Formatting (Contd.)FaaDoOEngineers.com
  78. 78. 782. ColorAttributes of Font Tagii. RGB Coloring System<font color=RGB(255,0,0)>Confidence</font> Confidence<font color=RGB(255,255,0)>Confidence</font> Confidence<font color=RGB(0,0,255)>Confidence</font> Confidence<font color=RGB(255,255,255)>Confidence</font> ConfidenceOutputExampleText Formatting (Contd.)FaaDoOEngineers.com
  79. 79. 792. ColorAttributes of Font Tagiii. Hexadecimal Coloring SystemA hexadecimal is a 6 digit representation of a color.XX XX XXRed Green BlueText Formatting (Contd.)FaaDoOEngineers.com
  80. 80. 802. ColorAttributes of Font Tagiii. Hexadecimal Coloring System<font color=“#FF0000”>Confidence</font> Confidence<font color=“#FFFF00”>Confidence</font> Confidence<font color=“#0000FF”>Confidence</font> Confidence<font color=“#FFFFFF”>Confidence</font> ConfidenceExample OutputText Formatting (Contd.)FaaDoOEngineers.com
  81. 81. 81ColorColorNameHexadecimalValueColorColorNameHexadecimalValueBlack #000000 Green #008000Silver #c0c0c0 Lime #00ff00Gray #808080 Olive #808000White #ffffff Yellow #ffff00Maroon #800000 Navy #000080Red #ff0000 Blue #0000ffPurple #800080 Teal #008080Fushia #ff00ff Aqua #00ffffText Formatting (Contd.)FaaDoOEngineers.com
  82. 82. 823. FaceAttributes of Font TagThe font face attribute is used to specify the font name.Text Formatting (Contd.)FaaDoOEngineers.com
  83. 83. 833.Attributes of Font Tag<font face=“Serif”>Confidence</font> Confidence<font face=“Courier”>Confidence</font> Confidence<font face=“Palatino”>Confidence</font> Confidence<font face=“Monotype Corsiva”>Confidence</font> ConfidenceOutputExampleFaceCodeSnippetText Formatting (Contd.)FaaDoOEngineers.com
  84. 84. 84Special Characters<html><body><h2><b>&lt;MARQUEE&gt;</b> is used to scroll theenclosing text.</h2></body></html>ExampleText Formatting (Contd.)FaaDoOEngineers.com
  85. 85. 85Special CharactersOutputText Formatting (Contd.)FaaDoOEngineers.com
  86. 86. 86Using Links&ImagesFaaDoOEngineers.comFaaDoO
  87. 87. 87Using Links• The Anchor Tag HTML uses the <a> (anchor) tag to create a link to another document. Attributes of <a>(anchor) tag• href : is used to address the document to link to, and thewords between the open and close of the anchor tag will bedisplayed as a hyperlink.Syntax:<a href=”url”>Text to be displayed</a>FaaDoOEngineers.com
  88. 88. 88Using Links (Contd.)Attributes of <a>(anchor) tag• target : The target attribute defines where the linkeddocument will be opened.Syntax:<a href=“http://w3.ibm.com” target=“where to place thedocument”>Text to be displayed</a>• name :The name attribute is used to create a namedanchor. When using named anchors we can create linksthat can jump directly into a specific section on a page.Syntax<a name=“label”>Text to be displayed</a>FaaDoOEngineers.com
  89. 89. 89Example of a Hyperlink<html><head><title>Example of aHyperlink</title><head><body><a href=“http://w3.IBM.com”>IBM</a><a href=“http://w3.IBM.com”target=“_blank”>IBM</a>---- other information within bodytag-------</body></html>The word IBM will be highlighted , andon clicking IBM the user will be taken tothe w3 pages of IBM, the page will beopened on the same windowThe word IBM will be highlighted , andon clicking IBM the user will be taken tothe w3 pages of IBM, the page will beopened on a new window.FaaDoOEngineers.com
  90. 90. 90Example of Naming a link and accessing it<html><body><a name=“locations”>locations</a>Kolkata, Bangalore, Hyd, Pune,Chandigarh, Gurgoan----- other information----------<a href=“#locations”>IBMLocation In India</a></body></html>On Clicking on IBM Location in India youwill be linked to the section which hasbeen named as locationsFaaDoOEngineers.com
  91. 91. 91Embedding Images• The image tagIn Html images are defined by using the <img> tagThe <img> tag is a open tag ( does not have a </img>)Attributes of <img> tag• src : To display an image on a page, you need to use thesrc attribute . The value of the src is the url of the image tobe displayed• Syntax<img src=“url”>FaaDoOEngineers.com
  92. 92. 92Embedding images ( contd.)Attributes of <img> tag• alt :The alt attribute is used to define an "alternate text" foran image. The value of the alt attribute is an author-definedtext:• Syntax<img src=“url” alt=“user defined text”>• width & height : the size of the image can be controlled byusing the width and height attributes• Syntax<img src=“url” width=“size in pixels” height=“size in pixels”>FaaDoOEngineers.com
  93. 93. 93Embedding images(contd.)Attributes of <img> tag• align : An image can be aligned with the surrounding textby using the align attribute• Syntax<img src=“url” width=“value in pixels” height=“value in pixels”align=“positon, ie left,right,top bottom…” >• Images can be used as hyperlinks also.<a href=“http://w3.ibm.com”> <img src=“logo.gif” width=“30height=“40” ></a>FaaDoOEngineers.com
  94. 94. 94Example of an embedded image<html><body><p>An image<img src=“home.gif"align="bottom" width="48" height="48">in the text</p><p>An image<img src ="home.gif"align="middle" width="48" height="48">in the text</p> </body> </html>FaaDoOEngineers.com
  95. 95. 95HTML Table• Table allows to organize and present data in an orderly andconcise manner.• Tabular structures were introduced with HTML 3.2.• A table can contains wide variety of information, such as headers,anchors, lists, paragraphs, forms, images, preformatted text andeven nested tables.• HTML tables are composed of rows and columns.FaaDoOEngineers.com
  96. 96. 96Requirement AnalysisFaaDoOEngineers.com
  97. 97. 97<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>Code Snippet To Fulfill the RequirementFaaDoOEngineers.com
  98. 98. 98<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For starting a tableFaaDoOEngineers.com
  99. 99. 99<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>It is an attribute of table tag to specify the thickness of the border of the table inpixels.FaaDoOEngineers.com
  100. 100. 100Table Border set to 1FaaDoOEngineers.com
  101. 101. 101If Table Border set to 5FaaDoOEngineers.com
  102. 102. 102<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For starting a tableFor ending a tableFaaDoOEngineers.com
  103. 103. 103<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For starting a table caption, It is like a title which resides outside the border ofthe table. It is an optional attribute.FaaDoOEngineers.com
  104. 104. 104<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For ending a table captionFor starting a table caption, It is like a title which resides outside the border ofthe table. It is an optional attribute.FaaDoOEngineers.com
  105. 105. 105Table CaptionFaaDoOEngineers.com
  106. 106. 106<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For starting a table rowFaaDoOEngineers.com
  107. 107. 107<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For starting a table rowFor ending a table row.FaaDoOEngineers.com
  108. 108. 108Row 1Row 2FaaDoOEngineers.com
  109. 109. 109<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For providing a table heading. By default the header cell will appear in boldertype and the default alignment is center.FaaDoOEngineers.com
  110. 110. 110<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For providing a table heading. By default the header cell will appear in boldertype and the default alignment is center.For ending a table heading.FaaDoOEngineers.com
  111. 111. 111Table HeadingFaaDoOEngineers.com
  112. 112. 112<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For providing the table data. By default the alignment is left.FaaDoOEngineers.com
  113. 113. 113<html><body><table border=“1”><caption>IBM Strategic Business Unit</caption><tr><th>Unit Name</th><th>Description</th></tr><tr><td>BCS</td><td>Business Consultancy Services</td></tr><tr><td>SWG</td><td>Software Group</td></tr></table></body></html>For providing the table data. By default the alignment is left.For ending a table data tag.FaaDoOEngineers.com
  114. 114. 114Table DataFaaDoOEngineers.com
  115. 115. 115Requirement AnalysisFaaDoOEngineers.com
  116. 116. 116<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td><td ROWSPAN="4"> Group 2</td><td>2a</td></tr><tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>Code Snippet To Fulfill the RequirementFaaDoOEngineers.com
  117. 117. 117<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td><td ROWSPAN="4"> Group 2</td><td>2a</td></tr><tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>This attribute is used to span cell more than one row. In this case it will span the1st column into four rows including the current row.FaaDoOEngineers.com
  118. 118. 118This cell is spanned to 4 rowsFaaDoOEngineers.com
  119. 119. 119<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td><td ROWSPAN="4"> Group 2</td><td>2a</td></tr><tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>The 3rd column is spanning more 4 rows including the current row..FaaDoOEngineers.com
  120. 120. 120This cell is spanned to 4 rowsFaaDoOEngineers.com
  121. 121. 121<table border="1"><caption>ROWSPAN Example</caption>Analyzing The CodeFaaDoOEngineers.com
  122. 122. 122 FaaDoOEngineers.com
  123. 123. 123<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr>Analyzing The CodeFaaDoOEngineers.com
  124. 124. 124 FaaDoOEngineers.com
  125. 125. 125<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td><td ROWSPAN="4"> Group 2</td><td>2a</td></tr>Analyzing The CodeFaaDoOEngineers.com
  126. 126. 126 FaaDoOEngineers.com
  127. 127. 127<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td><td ROWSPAN="4"> Group 2</td><td>2a</td></tr>Analyzing The Code<tr><td>1b</td><td>2b</td></tr>FaaDoOEngineers.com
  128. 128. 128 FaaDoOEngineers.com
  129. 129. 129<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td><td ROWSPAN="4"> Group 2</td><td>2a</td></tr>Analyzing The Code<tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr>FaaDoOEngineers.com
  130. 130. 130 FaaDoOEngineers.com
  131. 131. 131<table border="1"><caption>ROWSPAN Example</caption><tr><th>Group Name</th><th>SubGroup Name</th><th>Group Name</th><th>SubGroup Name</th></tr><TR><td ROWSPAN="4"> Group 1</td> <td>1a</td><td ROWSPAN="4"> Group 2</td><td>2a</td></tr>Analyzing The Code<tr><td>1b</td><td>2b</td></tr><tr><td>1c</td><td>2c</td></tr><tr><td>1d</td><td>2d</td></tr></table>FaaDoOEngineers.com
  132. 132. 132 FaaDoOEngineers.com
  133. 133. 133RequirementRequirement AnalysisFaaDoOEngineers.com
  134. 134. 134<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><tdcolspan="2">&nbsp;</td><td>Rs.</td><td>Ps.</td></tr><tr><td>A001</td><td>AAA</td><td>150</td><td>00</td></tr><tr><td>B002</td><td>BBB</td><td>120</td><td>99</td></tr><tr><td>C002</td><td>CCC</td><td>250</td><td>00</td></tr></table>Code Snippet To Fulfill the RequirementFaaDoOEngineers.com
  135. 135. 135<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><tdcolspan="2">&nbsp;</td><td>Rs.</td><td>Ps.</td></tr><tr><td>A001</td><td>AAA</td><td>150</td><td>00</td></tr><tr><td>B002</td><td>BBB</td><td>120</td><td>99</td></tr><tr><td>C002</td><td>CCC</td><td>250</td><td>00</td></tr></table>This attribute is used to span cell more than one column. In this case it will spanthe 1st column into five more nested columns.FaaDoOEngineers.com
  136. 136. 136This cell is spanned to 5 columnsFaaDoOEngineers.com
  137. 137. 137<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><tdcolspan="2">&nbsp;</td><td>Rs.</td><td>Ps.</td></tr><tr><td>A001</td><td>AAA</td><td>150</td><td>00</td></tr><tr><td>B002</td><td>BBB</td><td>120</td><td>99</td></tr><tr><td>C002</td><td>CCC</td><td>250</td><td>00</td></tr></table>It will span the 3rd column into two more nested columns.FaaDoOEngineers.com
  138. 138. 138This cell is spanned to 2 columnsFaaDoOEngineers.com
  139. 139. 139<table border="1"><caption>COLSPAN Example</caption><tr><th colspan="5"> Product Description</th></tr><tr><th> Product Code</th><th> Product Name</th><th colspan="2"> Price</th></tr><tr><tdcolspan="2">&nbsp;</td><td>Rs.</td><td>Ps.</td></tr><tr><td>A001</td><td>AAA</td><td>150</td><td>00</td></tr><tr><td>B002</td><td>BBB</td><td>120</td><td>99</td></tr><tr><td>C002</td><td>CCC</td><td>250</td><td>00</td></tr></table>It will span the 3rd row 1st column into two columns. In other words, it will mergethe 1st two columns of the 3rd row.FaaDoOEngineers.com
  140. 140. 140This cell is spanned to 2 columnsFaaDoOEngineers.com
  141. 141. 141Some More Attributes of Table tag• Cellspacing - The CELLSPACING attribute creates a space, orborder, of the specified number of pixels, between each cell.• Cellpadding - The CELLPADDING attribute separates text of thecell from the cell border with a padding with the specified numberof pixels.• Width - specify the width of the tableFaaDoOEngineers.com
  142. 142. 142USING CELLSPACING ATTRIBUTE<html><body><table cellspacing=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>FaaDoOEngineers.com
  143. 143. 143USING CELLSPACING ATTRIBUTE<html><body><table cellspacing=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>FaaDoOEngineers.com
  144. 144. 144Vertical Cell spacingHorizontal Cell spacingFaaDoOEngineers.com
  145. 145. 145USING CELLPADDING ATTRIBUTE<html><body><table cellpadding=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>FaaDoOEngineers.com
  146. 146. 146USING CELLPADDING ATTRIBUTE<html><body><table cellpadding=“25" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>FaaDoOEngineers.com
  147. 147. 147Vertical Cell paddingHorizontal Cell paddingFaaDoOEngineers.com
  148. 148. 148USING WIDTH ATTRIBUTE<html><body><table width=“80%" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>FaaDoOEngineers.com
  149. 149. 149USING WIDTH ATTRIBUTE<html><body><table width=“80%" border="1"><tr><th>Table Heading 1</th><th>Table Heading 2</th></tr><tr><td>Table Contents 1</td><td>Table Contents 2</td></tr></body></html>FaaDoOEngineers.com
  150. 150. 150Cell WidthFaaDoOEngineers.com
  151. 151. 151if Cell Width = 20%FaaDoOEngineers.com
  152. 152. 152Table Alignment Related Attribute• HTML tables can be aligned on the page, and cell content can bealigned within the cell.This attribute use to alignHORIZONTALLY isALIGNCENTERLEFTRIGHTAttributevaluesareThis attribute use to alignVERTICALLY isVALIGNMIDDLETOPBOTTOMAttributevaluesareThe blinking attribute value is the default value for VALIGN.FaaDoOEngineers.com
  153. 153. 153VALIGN=“top”Table AlignmentCell1 Cell2 Cell3Cell4 Cell5 Cell6Cell7 Cell8 Cell9ALIGN=“left”VALIGN=“middle”VALIGN=“bottom”ALIGN=“center” ALIGN=“right”FaaDoOEngineers.com
  154. 154. 154WebStyleSheetsFaaDoOEngineers.comFaaDoO
  155. 155. 155Cascading Style Sheet• Web style sheets are a form of separation of presentation andcontent for web design .• Style sheet can decide the presentation of web pages.• Style sheet takes care of all the layout, fonts, colors and overalllook of the site.FaaDoOEngineers.com
  156. 156. 156Cascading Style Sheet (contd..)• Principal means of Styling a document using Cascading stylesheets are:Inline style SheetExternal style SheetEmbedded style SheetFaaDoOEngineers.com
  157. 157. 157Benefits of a Cascading Style Sheet• Pages download faster.• Page contains less code, and the pages are shorter and neater.• The look of the site is kept consistent throughout all the pagesthat work off the same stylesheet.• Updating the design and general site maintenance are mademuch easier.FaaDoOEngineers.com
  158. 158. 158Parts of a Cascading Style Sheet• CSS syntax is made up of three parts:SelectorPropertyValueHTML tag that you wish to changeThe attribute that you wish to changeEach property can take a valueFaaDoOEngineers.com
  159. 159. 159Inline Style Sheet• Inline style sheets are applied by coding style properties andvalues inside the tags to which they apply.• An inline style sheet can appear inside any tag to directly set itsstyle. All that is required is to enclose the applicable styleproperties and values inside a quoted style attribute.• Syntax<tag style=“property:value [;property:value]…”>FaaDoOEngineers.com
  160. 160. 160Inline Style Sheet(contd.)<html><body><pre><h1> Inline Style Sheet</h1><p style="font-size: 12pt; color:red">This is line oneThis is line twoThis is line three</p></body></html>FaaDoOEngineers.com
  161. 161. 161Embedded Style sheet• Embedded style sheets are used when a unique style is requiredfor a document.• Embedded style are defined in the <head> tag section by usingthe <style> tag• When a large number of style settings are used on a Web page,there is convenience in packaging the settings together in oneplace as an embedded style sheet, rather than having themscattered as inline style sheets throughout the document.FaaDoOEngineers.com
  162. 162. 162Syntax of Style sheetselector {property: value}Examplep {color: green}If the value consist of more than one word the value has to be embeddedwithin quotes.p {font-family: “sans-serif”}If more than one property needs to be defined then the properties need tobe separated by semi colon.p {font-family: “sans-serif” ; color: green}FaaDoOEngineers.com
  163. 163. 163Example of an Embedded Style sheet<html><head><style type="text/css">p {font-family:"sans-serif"; color: green}hr {color: red}body {color:blue; background-color:pink}</style></head><body><p>This is paragraph one</p><hr><p> This is paragraph two</p><hr>This line is not within paragraph tag</body></html>FaaDoOEngineers.com
  164. 164. 164External Style Sheet• Internal style sheets are used when a unique style is required fora document.• Internal style are defined in the <head> tag section by using the<style> tag• The different selectors, their properties and values should bedefined within the external style sheet.• The external style sheet should be saved within a file, with anextension of .cssFaaDoOEngineers.com
  165. 165. 165External Style sheetBackground is definedParagraph font color isdefinedHorizontal color is definedMystyle.cssRequires the background,Paragraph and horizontalRule setting definedIn Mystyle.cssFirstPage.htmlSecondPage.htmlRequires the background,Paragraph and horizontalRule setting definedIn Mystyle.cssBoth the html files uses<link rel="stylesheet" type="text/css"href=“Mystyle.css" />FaaDoOEngineers.com
  166. 166. 166Example of External style sheetbody {background-color: yellow}h1 {font-size: 36pt}p {margin-left: 50px; background:pink; color:blue}hr {color: red}Mystyle.css<html><head><link rel="stylesheet" type="text/css"href="Mystyle.css" /></head><body><h1> This header is 36 pt </h1><p> This paragraph has a left margin of50 pixels<br>The font color is blue<br>The background color is pink</p><hr></body></html>MyPage.htmlFaaDoOEngineers.com
  167. 167. 167Multiple Style sheeth3 { color: red;text-align: left;font-size: 8pt }Mystyle.css<html><head><link rel=“stylesheet” type=“text/css”href=“Mystyle.css”><style type=“text/css”>h3 {font-size: 20pt}</style></head><body><h3> This is a header </h3>---more text----</body></html>MyPage.htmlWhat will bethe Font sizeOf <h3>8pt or 20 pt??FaaDoOEngineers.com
  168. 168. 168Multiple Style sheet Continued• If some properties have been set for the same selector in different style sheets,the values will be inherited from the more specific style sheet .h3 { color: red;text-align: left;font-size: 8pt }Mystyle.css<html><head><link rel=“stylesheet” type=“text/css”href=“Mystyle.css”><style type=“text/css”>h3 {font-size: 20pt}</style></head><body><h3> This is a header </h3>---more text----</body></html>MyPage.htmlColor: RedText-align-leftFont-size- 20ptFont Size will be InheritedFrom the Internal Style sheetFaaDoOEngineers.com
  169. 169. 169Some common selectors and attributesSelector propertyH1,H2,H3….. font-size,Font-family,font-style , font-weightColor, marginP font-size,Font-family,font-style , font-weightColor, Background-color,text-align, marginHR colorbody Background-color, font-size,Font-family,font-style , font-weight, marginFaaDoOEngineers.com
  170. 170. 170Class Selector• With the class selector you candefine different styles for thesame type of HTML element.<html><head><link rel=“stylesheet”type=“text/css”href=“Mystyle.css”></head><body><p class=“one”>This paragraph isRight aligned </p><p class=“two”>This paragraph isLeft aligned</p></body></html>MyPage.htmlp.one {text-align: right; color: white;background-color: black}p.two {text-align: left; color: black;background-color: Red}Mystyle.cssFaaDoOEngineers.com
  171. 171. 171Uses of <DIV> Tag1. <DIV> tag is a container for other tags.2. DIV elements are block elements and work behindthe scenes grouping other tags together.Some of the attributes of <DIV> tag are:-> id-> width-> height-> title-> style<DIV> tagFaaDoOEngineers.com
  172. 172. 172Uses of <DIV> Tag<div id="menu" align="right"><a href="">HOME</a> | <a href="">CONTACT</a> | <ahref="">ABOUT</a> | <a href="">LINKS</a></div><div id="content" align="left" ><h5>Content Articles</h5><p>This paragraph would be your content paragraphwith all of your readable material.</p><h5 >Content Article Number Two</h5><p>Heres another content article right here.</p></div>Example<DIV> tagFaaDoOEngineers.com
  173. 173. 173Uses of <DIV> TagOutput<DIV> tagFaaDoOEngineers.com
  174. 174. 174Using <span> in CSS• SPAN is a inline tag.• It is used to format small chunksof data within another element.• Combining <span> tag with CSSallows us to create custom tags.What is theUtility of<span> inHTMLFaaDoOEngineers.com
  175. 175. 175Using <span> in CSS (contd.)p { color: white ; background-color:black}.example1 {color:blue ; background-color: yellow ;font-family: "sans-serif"}.example2 {color:red ; background-color: white ;font-family: times}Mystyle.css<html><head><link rel="stylesheet"type="text/css" href="Mystyle.css" /></head><body><p >This is the first line of theparagraph<br>This is the second line of theparagraph<br><span class="example1">This is thethird line of the paragraph<br></span><span class="example2">This is thefourth line of the paragraph<br></span>This is the fifth line of the paragraph</p></body></html>MyPage.htmlFaaDoOEngineers.com
  176. 176. 176DevelopingHTML FormsFaaDoOEngineers.comFaaDoO
  177. 177. 177Form• An HTML form is a section of a document containing normalcontent, markup, special elements called controls (checkboxes,radio buttons, menus, etc.), and labels on those controls.• Users generally "complete" a form by modifying its controls(entering text, selecting menu items, etc.), before submitting theform to an agent for processing (e.g., to a Web server, to a mailserver, etc.)FaaDoOEngineers.com
  178. 178. 178Form (Contd.)• A form is defined with the <form> tag.FaaDoOEngineers.com
  179. 179. 179Form Controls• TextField: Are used to accept user input. It is a single line input control.• CheckBox Checkboxes are used when you want the user to select one or more optionsof a limited number of choices.• RadioButton Radio Buttons are used when you want the user to select one of a limitednumber of choices.• Select Are used when you want users to choose options from a selectable lists.• TextArea Are used to accept user input. TextArea allows entry of multiple lines.FaaDoOEngineers.com
  180. 180. 180Form Controls (Contd.)• PushButton Each push button may have client side script associated with theelements event attributes. When an event occurs (e.g., the userpresses the button, releases it, etc.), the associated script istriggered.• Submit Button When activated, a submit button submits a form. A form may containmore than one submit button.• Reset Button When activated, a reset button resets all controls to their initialvalues.FaaDoOEngineers.com
  181. 181. 181Form Controls (Contd)FormComponent Tag Usage OutputTextField <input> type name value <input type="text" name="t1" value="Paul">Checkbox <input> type name value <input type="checkbox" name="c1" value="v1">RadioButton <input> type name value <input type="radio" name="r1" value="v2"><select> name<option> valueTextArea<textarea> row col name <textarea name="n1" row="5" col="20"><input> type name value <input type="button" name="b1" value="Click"><input type="submit" name="s1" value="Submit"><input type="reset" value="Reset">PushButtonAttributeComboBox<select name="s1"><option value="v1">Displayitem</option></select>PaulSelect anitemClickSubmitResetFaaDoOEngineers.com
  182. 182. 182Form Controls using Attributes:INPUT Attribute definitions• type = text|password|checkbox|radio|submit|reset|file|hidden|image|button This attribute specifies the „type of control‟ to create. The default value forthis attribute is "text".• name = cdata This attribute assigns the „control name‟.• value = cdata This attribute specifies the „initial value‟ of the control. It is optional exceptwhen the „type’ attribute has the value "radio" or "checkbox".• size = cdata This attribute tells the initial width of the control. The width is given inpixels except when „type’ attribute has the value "text" or "password". Inthat case, its value refers to the (integer) number of characters.FaaDoOEngineers.com
  183. 183. 183Form Controls using Attributes:INPUT Attribute definitions (Contd …)• maxlength = number When the „type’ attribute has the value "text" or "password", thisattribute specifies the maximum number of characters the user mayenter. This number may exceed the specified „size’, in which case theuser should offer a scrolling mechanism. The default value for thisattribute is an unlimited number.• Checked When the „type’ attribute has the value "radio" or "checkbox", thisboolean attribute specifies that the button is on.• src = uri When the „type’ attribute has the value "image", this attributespecifies the location of the image to be used to decorate thegraphical submit button.FaaDoOEngineers.com
  184. 184. 184Form Controls using Attributes:SELECT Attribute definitions• name = cdataThis attribute assigns the control name.• size = numberIf a SELECT element is presented as a scrolled list box, thisattribute specifies the number of rows in the list that should bevisible at the same time.• MultipleIf set, this boolean attribute allows multiple selections. If notset, the SELECT element only permits single selections.FaaDoOEngineers.com
  185. 185. 185Pre – Selected Options:• Zero or more choices may be pre-selected for the user. Usersshould determine which choices are pre-selected as follows: If no „OPTION‟ element has the „selected‟ attribute set, the initialstate has the first option selected. If one „OPTION‟ element has the „selected‟ attribute set, it should bepre-selected. If the „SELECT‟ element has the „multiple‟ attribute set and more thanone „OPTION‟ element has the „selected‟ attribute set, they should allbe pre-selected. It is considered an error if more than one „OPTION‟ element has the„selected‟ attribute set and the „SELECT‟ element does not have the„multiple‟ attribute set.FaaDoOEngineers.com
  186. 186. 186Example of a Form<html><head><title>Form Example</title></head><body bgcolor=pink ><center><h3> Data Entry Form</h3><form><table><tr><td>Name</td><td> <inputtype="text" name="t1"> </td></tr><tr><td>Gender</td><td> <inputtype="radio" name=“r1” value=“m”>Male<input type="radio" name=“r1”value=“f”>Female</td></tr><tr><td>Qualification</td><td><selectname=“s”><option >Select</option><option value=“M.Sc”>M Sc</option><option value=“M.A.”>MA</option><optionvalue="other">other</option></select></td></tr><tr><td> <input type="submit"value="submit"> </td><td> <input type="reset" value="reset"></td></tr></table></center></form></body></html>FaaDoOEngineers.com
  187. 187. 187Output of the FormFaaDoOEngineers.com
  188. 188. 188Fieldset & Legend Tag• The fieldset tag is used to group the form elements whilst the legendtag provides a label for the fieldset.• The HTML legend tag is used for labelling the fieldset element.• By using the fieldset tag and the legend tag, you can make yourforms much easier to understand for your users.FaaDoOEngineers.com
  189. 189. 189Output RequiredFaaDoOEngineers.com
  190. 190. 190Code Snippet<html><body><fieldset style="text-align:right;"><legend><b>Address Details</b></legend>Favorite Address <input type="text" /><br/>Least Favorite Address <input type="text" /><br/>Current Address <input type="text" /><br/>Your Next Address <input type="text" /><br/></fieldset><br><fieldset align="left"><legend>Personal Info</legend>Name : <input type="text">Age : <input type="text">Gender :<input type="radio"name="r1">Male<input type="radio"name="r1">Female</fieldset></body></html>FaaDoOEngineers.com
  191. 191. 191<fieldset> tag is used to group the form elements<html><body><fieldset style="text-align:right;"><legend><b>Address Details</b></legend>Favorite Address <input type="text" /><br/>Least Favorite Address <input type="text" /><br/>Current Address <input type="text" /><br/>Your Next Address <input type="text" /><br/></fieldset><br><fieldset align="left"><legend>Personal Info</legend>Name : <input type="text">Age : <input type="text">Gender :<input type="radio"name="r1">Male<input type="radio"name="r1">Female</fieldset></body></html>FaaDoOEngineers.com
  192. 192. 192<legend> tag is used give a suitable label to the group.<html><body><fieldset style="text-align:right;"><legend><b>Address Details</b></legend>Favorite Address <input type="text" /><br/>Least Favorite Address <input type="text" /><br/>Current Address <input type="text" /><br/>Your Next Address <input type="text" /><br/></fieldset><br><fieldset align="left"><legend>Personal Info</legend>Name : <input type="text">Age : <input type="text">Gender :<input type="radio"name="r1">Male<input type="radio"name="r1">Female</fieldset></body></html>FaaDoOEngineers.com
  193. 193. 193Given a Label using legend tagCreated groups using fieldset tagFaaDoOEngineers.com
  194. 194. 194Summary• HTML is used for publishing web page.• A tag is a reference in an HTML document which describes the style andstructure of the document.• <TABLE> with <TR>,<TH>,<TD> tags are used to construct a tabularstructure in HTML.• To create a List of items in HTML, tags used are <OL>and <UL>.• Tags that separate from one line to others are <P>, <BR>, <HR>.• It is used to include preformatted text into your HTML document.• <BLOCKQUOTE> tag is used to include indented text in a document.• The purpose of Logical Character Style tags is to convey the basic semanticmeaning of a piece of text rather than the absolute appearance.• Physical Character Style tags is used to give your text a different look butexacting look.• <Font> tag is used to change the font size, color and face in a document.FaaDoOEngineers.com
  195. 195. 195Summary (Contd.)• Special characters are those that has a special meaning in HTML andthose are not found on English keyboards.• HTML uses the <a> (anchor) tag to create a link to another document.• In Html images are defined by using the <img> tag• The <img> tag is a open tag ( does not have a </img>)• Web style sheets are a form of separation of presentation and contentfor web design .• CSS syntax is made up of three parts: Selector, property and value• Internal style sheets are used when a unique style is required for adocument.• Internal style are defined in the <head> tag section by using the <style>tagFaaDoOEngineers.com
  196. 196. 196Summary (Contd.)• Internal style sheets are used when a unique style is required for adocument.• Internal style are defined in the <head> tag section by using the <style>tag• With the class selector you can define different styles for the same typeof HTML element• <Span> is a inline tag.• Span is used to format small chunks of data within another element.AnHTML form is a section of a document containing normal content,markup, special elements called controls.• Some of the common controls are checkboxes, radio buttons, Textfields,etc.• Fieldset & Legend tags are used for grouping form elements and givinga suitable name to the group respectively.FaaDoOEngineers.com
  197. 197. 197Test Your Understanding1. Select the correct option for making a hyperlink?a. <a href="http://www.w3schools.com">W3Schools</a>b. <a url="http://www.w3schools.com">W3Schools.com</a>c. <a>http://www.w3schools.com</a>d. <a name="http://www.w3schools.com">W3Schools.com</a>2. Style Sheet can decide presentation of a web pagea. falseb. trueFaaDoOEngineers.com
  198. 198. 198Test Your Understanding (Contd.)3. The <style> tag should be embedded within:a. <body>b. <form>c. <head>d. <img>4. With the _________selector you can define different styles for the sametype of HTML element.a. Formb. Buttonc. Spand. classFaaDoOEngineers.com
  199. 199. 199Test Your Understanding (Contd.)5. The ___________ attribute of table tag separates text from the cell bordera. CELLPADDINGb. CELLSPACINGc. BORDERSPACINGd. TABLESPACING6. What is the default font size in a web page.a. 1b. 2c. 3d. 5FaaDoOEngineers.com
  200. 200. 200a. <TR>b. <SPAN>c. <STRONG>d. <FIELDSET>e. <HR>iii. Creates a horizontal rule.iv. Creates a new row in a tablev. Used to format small chunks of data.i. Emphasizes the text enclosed within it.ii. Used to group the form elements.Match Group A with BGroup A Group BTest Your Understanding (Contd.)FaaDoOEngineers.com
  201. 201. 201References• http://www.pierobon.org/iis/url.htm• http://w3schools.com/html• http://www.ology.org/tilt/cgh/ - Things to consider whiledeveloping web page using HTML.• http://www.tizag.com/htmlT• http://www.1stsitefree.com• http://www.quackit.com/htmlFaaDoOFaaDoOEngineers.com

×