AK html

835 views

Published on

HTML session by Kahate sir at SICSR

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
835
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

AK html

  1. 1. HTML Atul Kahate [email_address]
  2. 2. HTML History <ul><li>Physicists at CERN (Centre Europeen pour la Recherche Nucleaire) needed a way to easily share information </li></ul><ul><li>In 1980, Tim Berners-Lee developed the initial program for linking documents with each other </li></ul><ul><li>A decade of development led to WWW and HTML, including Web browsers </li></ul>
  3. 3. HTML Basics <ul><li>HTML stands for H yper T ext M arkup L anguage </li></ul><ul><li>An HTML file is a text file containing small markup tags </li></ul><ul><li>The markup tags tell the Web browser how to display the page </li></ul><ul><li>An HTML file must have an htm or html file extension </li></ul><ul><li>An HTML file can be created using a simple text editor </li></ul>
  4. 4. HTML Syntaxes
  5. 5. Sample HTML Page <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Title of page</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>This is my first homepage. </li></ul><ul><li><b>This text is bold</b> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 6. How to view it? <ul><li>Save it with a .htm or .html extension </li></ul><ul><li>Open it in browser or by simply double clicking on it </li></ul>
  7. 7. HTML Tags <ul><li>HTML tags are used to mark-up HTML elements </li></ul><ul><li>HTML tags are surrounded by the two characters < and > </li></ul><ul><li>HTML tags normally come in pairs like <b> and </b> </li></ul><ul><li>The first tag in a pair is the start tag, the second tag is the end tag </li></ul><ul><li>The text between the start and end tags is the element content </li></ul><ul><li>HTML tags are not case sensitive, <b> means the same as <B> </li></ul>
  8. 8. Why lowercase tags? <ul><li>The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation </li></ul><ul><li>XHTML (the next generation HTML) demands lowercase tags </li></ul>
  9. 9. Tag Attributes <ul><li>Attributes provide additional information regarding HTML tags/elements </li></ul><ul><li>Always added to the start tag </li></ul><ul><li>Come in name=“value” pairs </li></ul><ul><li>Examples </li></ul><ul><ul><li><body bgcolor=&quot;red&quot;> </li></ul></ul><ul><ul><ul><li>bgcolor attribute provides additional information about the body tag (that the background color should be red) </li></ul></ul></ul><ul><ul><li><table border=&quot;0&quot;> </li></ul></ul><ul><ul><ul><li>border attribute states that this table should not have a border </li></ul></ul></ul>
  10. 10. Headings <ul><li>Headings are defined with the <h1> to <h6> tags </li></ul><ul><li><h1> defines the largest heading </li></ul><ul><li><h6> defines the smallest heading </li></ul><ul><li>HTML automatically adds an extra blank line before and after a heading </li></ul>
  11. 11. Headings Example <ul><li><h1>This is a heading</h1> </li></ul><ul><li><h2>This is a heading</h2> </li></ul><ul><li><h3>This is a heading</h3> </li></ul><ul><li><h4>This is a heading</h4> </li></ul><ul><li><h5>This is a heading</h5> </li></ul><ul><li><h6>This is a heading</h6> </li></ul>
  12. 12. Aligning Headings <ul><li>Use “align=left/center/right” attribute </li></ul><ul><li>Example </li></ul><ul><ul><li><H1 align=“center”>Heading in the center</H1> </li></ul></ul>
  13. 13. Paragraphs <ul><li>Paragraphs are defined with the <p> tag </li></ul><ul><li>HTML automatically adds an extra blank line before and after a paragraph </li></ul>
  14. 14. Paragraphs Example <ul><li><p>This is a paragraph</p> </li></ul><ul><li><p>This is another paragraph</p> </li></ul>
  15. 15. Line Breaks <ul><li><br> tag is used when you want to end a line </li></ul><ul><li>Does not start a new paragraph </li></ul><ul><li>The <br> tag forces a line break wherever you place it </li></ul><ul><li>Does not have a closing </br> tag </li></ul>
  16. 16. Line Breaks Example <ul><li><p>This <br> is a para<br>graph with line breaks</p> </li></ul>
  17. 17. Comments <ul><li>The comment tag is used to insert a comment in the HTML source code </li></ul><ul><li>A comment will be ignored by the browser </li></ul><ul><li>You can use comments to explain your code, which can help you when you edit the source code at a later date </li></ul>
  18. 18. Comments Example <ul><li><!-- This is a comment --> </li></ul>
  19. 19. General tips
  20. 20. General Tips – 1 <ul><li>Different browsers display the same HTML text differently </li></ul><ul><li>The display size also drives this </li></ul><ul><li>The text will be reformatted every time the user resizes the window </li></ul><ul><li>Never try to format the text in your editor by adding empty lines and spaces to the text </li></ul>
  21. 21. General Tips – 2 <ul><li>HTML will truncate the spaces in your text </li></ul><ul><li>Any number of spaces count as one </li></ul><ul><li>Using empty paragraphs <p> to insert blank lines is a bad habit </li></ul><ul><ul><li>Use the <br> tag instead </li></ul></ul><ul><li>HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading </li></ul>
  22. 22. Character Entities – 1 <ul><li>Some characters such as < have a special meaning in HTML </li></ul><ul><li>They cannot be used as they are, inside text </li></ul><ul><li>Character entities are used in their place </li></ul>
  23. 23. Character Entities – 2 <ul><li>Made up of three parts </li></ul><ul><ul><li>& </li></ul></ul><ul><ul><li>Entity name or # and the ASCII value of the character </li></ul></ul><ul><ul><li>; </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>&lt; or < should be used in the place of < </li></ul></ul>
  24. 24. Common Entities ' &apos; apostrophe  ' " &quot; quotation mark &quot; & &amp; ampersand & > &gt; greater than > < &lt; less than <   &nbsp; non-breaking space   Entity Number Entity Name Description Result
  25. 25. Anchor Tag and Href Attribute <ul><li>The anchor tag can be used to create a link to another document </li></ul><ul><li>Called as hyperlink or URL </li></ul><ul><li>The tag is <a> </li></ul>
  26. 26. Anchor Tag and Href Attribute <ul><li>Syntax </li></ul><ul><ul><li>< a href =&quot;url&quot;> Text to be displayed </a> </li></ul></ul><ul><ul><li>a = Create an anchor </li></ul></ul><ul><ul><li>href = Target URL </li></ul></ul><ul><ul><li>Text = Text to be displayed as substitute for the URL </li></ul></ul><ul><li>Example </li></ul><ul><ul><li><a href=&quot;http://www.yahoo.com/&quot;>Visit Yahoo!</a> </li></ul></ul><ul><ul><li>Result: visit Yahoo! </li></ul></ul>
  27. 27. HTML Tables
  28. 28. Tables Marks a heading cell within a row. <th> Marks a cell (table data) within a row. <td> Marks a row within a table. <tr> Marks a table within an HTML document. <table> Use Tag
  29. 29. Table Exercise <ul><li>Create the following HTML table </li></ul>Book Name Author Computer Networks Tanenbaum TCP/IP Comer TCP/IP Protocol Suite Forouzan
  30. 30. Solution – 1 <ul><li>Start with the <table> and </table> tags </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li></table> </li></ul></ul><ul><li>Add <tr> tags between the boundaries noted above for each row. </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  31. 31. Solution – 2 <ul><li>Add <th> tags for the headings </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th></th> </li></ul></ul><ul><ul><li><th></th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  32. 32. Solution – 3 <ul><li>Add <td> tags for the data </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th></th> </li></ul></ul><ul><ul><li><th></th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><td></td> </li></ul></ul><ul><ul><li><td></td> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td></td> </li></ul></ul><ul><ul><li><td></td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td></td> </li></ul></ul><ul><ul><li><td></td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  33. 33. Solution – 4 <ul><li>Add the element for each cell, including headers </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Book Name</th> </li></ul></ul><ul><ul><li><th>Author</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Computer Networks</td> </li></ul></ul><ul><ul><li><td>Tanenbaum</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP</td> </li></ul></ul><ul><ul><li><td>Comer</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP Protocol Suite</td> </li></ul></ul><ul><ul><li><td>Forouzan</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  34. 34. Exercises <ul><li>How would add rows to this table? </li></ul><ul><li>How would add columns to this table? </li></ul>
  35. 35. Solutions <ul><li>Add one more <tr> and </tr> pair. </li></ul><ul><li>Add one more <th> and </th> pair. </li></ul>
  36. 36. Table Example <ul><li>HTML Code </li></ul><ul><li><table border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td>row 1, cell 1</td> </li></ul><ul><li><td>row 1, cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>row 2, cell 1</td> </li></ul><ul><li><td>row 2, cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li>Output </li></ul>row 2, cell 2 row 2, cell 1 row 1, cell 2 row 1, cell 1
  37. 37. Table Headings <ul><li>HTML Code </li></ul><ul><li><table border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><th>Heading</th> </li></ul><ul><li><th>Another Heading</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>row 1, cell 1</td> </li></ul><ul><li><td>row 1, cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>row 2, cell 1</td> </li></ul><ul><li><td>row 2, cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li>Output </li></ul>Another Heading Heading row 2, cell 2 row 2, cell 1 row 1, cell 2 row 1, cell 1
  38. 38. Spanning Rows and Columns <ul><li>Spanning means stretching a cell over multiple rows or columns </li></ul><ul><li>Example </li></ul>Publisher Book Name Author Computer Networks Tanenbaum Pearson TCP/IP Comer Modern Operating Systems Tanenbaum
  39. 39. HTML Syntax for Spanning Used in <td> or <th> tags, indicates how many columns the cell should span. For example, colspan=3 spans three columns. Colspan=n Used in <td> or <th> tags, indicates how many rows the cell should span. For example, rowspan=3 spans three rows. Rowspan=n Use Attribute
  40. 40. Exercise <ul><li>Create the following HTML table </li></ul>Publisher Book Name Author Computer Networks Tanenbaum Pearson TCP/IP Comer Modern Operating Systems Tanenbaum
  41. 41. Solution – 1 <ul><li>Start with the basic HTML table </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Book Name</th> </li></ul></ul><ul><ul><li><th>Author</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><td>Computer Networks</td> </li></ul></ul><ul><ul><li><td>Tanenbaum</td> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP</td> </li></ul></ul><ul><ul><li><td>Comer</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP Protocol Suite</td> </li></ul></ul><ul><ul><li><td>Forouzan</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  42. 42. Solution – 2 <ul><li>Add a new column for the Publisher title and name: Output would be distorted at this stage </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Publisher</th> </li></ul></ul><ul><ul><li><th>Book Name</th> </li></ul></ul><ul><ul><li><th>Author</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Pearson</td> </li></ul></ul><ul><ul><li><td>Computer Networks</td> </li></ul></ul><ul><ul><li><td>Tanenbaum</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP</td> </li></ul></ul><ul><ul><li><td>Comer</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP Protocol Suite</td> </li></ul></ul><ul><ul><li><td>Forouzan</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  43. 43. Solution – 3 <ul><li>Add rowspan attribute to the <th> or <td> tag that we want to span across rows </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Publisher</th> </li></ul></ul><ul><ul><li><th>Book Name</th> </li></ul></ul><ul><ul><li><th>Author</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td rowspan=3>Pearson</td> </li></ul></ul><ul><ul><li><td>Computer Networks</td> </li></ul></ul><ul><ul><li><td>Tanenbaum</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP</td> </li></ul></ul><ul><ul><li><td>Comer</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>TCP/IP Protocol Suite</td> </li></ul></ul><ul><ul><li><td>Forouzan</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  44. 44. Exercise <ul><li>Create the following table </li></ul>Organization Project Completion % FCIB 90% i-flex GCB 50% ADCB 95%
  45. 45. Column Spanning <ul><li>Create the following table structure </li></ul>Book Descriptive information Type Name Price Classification C++ 100 Language Ref Java 200 Language Web Tech 250 Concepts
  46. 46. Solution – 1 <ul><ul><li>Start with the following </li></ul></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Type</th> </li></ul></ul><ul><ul><li><th>Name</th> </li></ul></ul><ul><ul><li><th>Price</th> </li></ul></ul><ul><ul><li><th>Classification</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td rowspan=3>Ref</td> </li></ul></ul><ul><ul><li><td>C++</td> </li></ul></ul><ul><ul><li><td>100</td> </li></ul></ul><ul><ul><li><td>Language</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Java</td> </li></ul></ul><ul><ul><li><td>200</td> </li></ul></ul><ul><ul><li><td>Language</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Web Tech</td> </li></ul></ul><ul><ul><li><td>250</td> </li></ul></ul><ul><ul><li><td>Concepts</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  47. 47. Solution – 2 <ul><ul><li>Add a <TR> tag with <TH> for spanning </li></ul></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Book</th> </li></ul></ul><ul><ul><li><th>Descriptive information</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Type</th> </li></ul></ul><ul><ul><li><th>Name</th> </li></ul></ul><ul><ul><li><th>Price</th> </li></ul></ul><ul><ul><li><th>Classification</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td rowspan=3>Ref</td> </li></ul></ul><ul><ul><li><td>C++</td> </li></ul></ul><ul><ul><li><td>100</td> </li></ul></ul><ul><ul><li><td>Language</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Java</td> </li></ul></ul><ul><ul><li><td>200</td> </li></ul></ul><ul><ul><li><td>Language</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Web Tech</td> </li></ul></ul><ul><ul><li><td>250</td> </li></ul></ul><ul><ul><li><td>Concepts</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  48. 48. Solution – 3 <ul><ul><li>Add <colspan> attribute for spanning </li></ul></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th colspan=2>Book</th> </li></ul></ul><ul><ul><li><th colspan=2>Descriptive information</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><th>Type</th> </li></ul></ul><ul><ul><li><th>Name</th> </li></ul></ul><ul><ul><li><th>Price</th> </li></ul></ul><ul><ul><li><th>Classification</th> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td rowspan=3>Ref</td> </li></ul></ul><ul><ul><li><td>C++</td> </li></ul></ul><ul><ul><li><td>100</td> </li></ul></ul><ul><ul><li><td>Language</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Java</td> </li></ul></ul><ul><ul><li><td>200</td> </li></ul></ul><ul><ul><li><td>Language</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>Web Tech</td> </li></ul></ul><ul><ul><li><td>250</td> </li></ul></ul><ul><ul><li><td>Concepts</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  49. 49. Table Colors, Alignment <ul><li><TABLE BGCOLOR = “…”> allows us to specify the background color </li></ul><ul><li><TR ALIGN> allows specifying the text alignment </li></ul>
  50. 50. Text Colors
  51. 51. Setting Text Colors <ul><li>Use the <TEXT = “Color”> tag </li></ul><ul><ul><li>Example </li></ul></ul><ul><ul><ul><li><BODY TEXT = “BLUE”> </li></ul></ul></ul><ul><li>Use the <FONT> tag </li></ul><ul><ul><li>Set font size, color, face (style) </li></ul></ul><ul><ul><li>Example </li></ul></ul><ul><ul><ul><li><FONT FACE = “Comical” SIZE = “+2” COLOR = “RED”> Look at this! </FONT> </li></ul></ul></ul>
  52. 52. HTML Lists
  53. 53. Lists <ul><li>Two types </li></ul><ul><ul><li>Unordered </li></ul></ul><ul><ul><ul><li>List of items marked with bullets </li></ul></ul></ul><ul><ul><ul><li>Starts with <ul>, each item starts with <li> </li></ul></ul></ul><ul><ul><li>Ordered </li></ul></ul><ul><ul><ul><li>List of items marked with numbers </li></ul></ul></ul><ul><ul><ul><li>Starts with <ol>, each item starts with <li> </li></ul></ul></ul>
  54. 54. Allowed “types” in Lists <ul><li>Numbered lists </li></ul><ul><ul><li>Type=“A” Number or letter with which the list should start; other options are a, I, i, or 1 (Default) </li></ul></ul><ul><li>Bulleted lists </li></ul><ul><ul><li>Type=“disc” Bullet type to be used; other options are square and circle </li></ul></ul>
  55. 55. Unordered List Example <ul><ul><li>HTML code </li></ul></ul><ul><ul><li><ul> </li></ul></ul><ul><ul><li><li>Coffee</li> </li></ul></ul><ul><ul><li><li>Milk</li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><ul><li>Output </li></ul></ul><ul><ul><li>Coffee </li></ul></ul><ul><ul><li>Milk </li></ul></ul>
  56. 56. Another Unordered List Example <ul><ul><li>HTML code </li></ul></ul><ul><ul><li><ul type=“square”> </li></ul></ul><ul><ul><li><li>Coffee</li> </li></ul></ul><ul><ul><li><li>Milk</li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><ul><li>Output </li></ul></ul><ul><ul><li>Coffee </li></ul></ul><ul><ul><li>Milk </li></ul></ul>
  57. 57. Ordered List Example <ul><ul><li>HTML code </li></ul></ul><ul><ul><li><ol> </li></ul></ul><ul><ul><li><li>Coffee</li> </li></ul></ul><ul><ul><li><li>Milk</li> </li></ul></ul><ul><ul><li></ol> </li></ul></ul><ul><ul><li>Output </li></ul></ul><ul><ul><li>Coffee </li></ul></ul><ul><ul><li>Milk </li></ul></ul>
  58. 58. Another Ordered List Example <ul><ul><li>HTML code </li></ul></ul><ul><ul><li><ol type=“A”> </li></ul></ul><ul><ul><li><li>Coffee</li> </li></ul></ul><ul><ul><li><li>Milk</li> </li></ul></ul><ul><ul><li></ol> </li></ul></ul><ul><ul><li>Output </li></ul></ul><ul><ul><li>Coffee </li></ul></ul><ul><ul><li>Milk </li></ul></ul>
  59. 59. Nested List Example <ul><ul><li>HTML code </li></ul></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><h4>A nested List:</h4> </li></ul></ul><ul><ul><li><ul> </li></ul></ul><ul><ul><li><li>Coffee</li> </li></ul></ul><ul><ul><li><li>Tea </li></ul></ul><ul><ul><li><ul> </li></ul></ul><ul><ul><li><li>Black tea</li> </li></ul></ul><ul><ul><li><li>Green tea</li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><ul><li></li> </li></ul></ul><ul><ul><li><li>Milk</li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  60. 60. Output of Nested List Example <ul><li>Coffee </li></ul><ul><li>Tea </li></ul><ul><ul><li>Black tea </li></ul></ul><ul><ul><li>Green tea </li></ul></ul><ul><li>Milk </li></ul>
  61. 61. HTML Forms
  62. 62. Forms <ul><li>Form is an area containing form elements </li></ul><ul><li>A form element allows user to enter information </li></ul><ul><ul><li>Text fields </li></ul></ul><ul><ul><li>Drop-down buttons </li></ul></ul><ul><ul><li>Radio buttons </li></ul></ul><ul><ul><li>Checkboxes </li></ul></ul><ul><li><form> and </form> tags are used </li></ul>
  63. 63. <input> tag <ul><li>Most commonly used form element </li></ul><ul><li>Type of input is specified with the type attribute </li></ul><ul><li>Concept </li></ul><ul><ul><li><form> </li></ul></ul><ul><ul><li><input type=“text” …> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></form> </li></ul></ul>
  64. 64. Input field tag and attributes Default selection when form is initially displayed or reloaded Selected Maximum input size for text fields Maxlength=“n” Sets visible size for text inputs Size=“n” Provide default values Value=“…” Processes form results Name=“…” Text, Password, Checkbox, Radio, File, Hidden, Image, Submit, Reset Type=“…” Sets an area in a form for user input <input> Use Tag/Attribute
  65. 65. Forms Example – Textboxes <ul><li><form> </li></ul><ul><li>First name: </li></ul><ul><li><input type=&quot;text&quot; name=&quot;firstname&quot;> </li></ul><ul><li><br> </li></ul><ul><li>Last name: </li></ul><ul><li><input type=&quot;text&quot; name=&quot;lastname&quot;> </li></ul><ul><li></form> </li></ul><ul><li>Output: </li></ul><ul><li>First name: </li></ul><ul><li>Last name: </li></ul>
  66. 66. Forms Example – Radio Buttons <ul><li><form> </li></ul><ul><li><input type=&quot;radio&quot; name=“fruit&quot; value=“apple&quot;> Apple </li></ul><ul><li><br> </li></ul><ul><li><input type=&quot;radio&quot; name=“fruit&quot; value=“orange&quot;> Orange </li></ul><ul><li></form> </li></ul><ul><li>Output: </li></ul><ul><li>Apple </li></ul><ul><li>Orange </li></ul>
  67. 67. Forms Example – Checkboxes <ul><li><form> </li></ul><ul><li><input type=&quot;checkbox&quot; name=“vehicle“ value=“bike”> </li></ul><ul><li>I have a bike </li></ul><ul><li><br> </li></ul><ul><li><input type=&quot;checkbox&quot; name=“vehicle“ value=“car”> </li></ul><ul><li>I have a car </li></ul><ul><li></form> </li></ul><ul><li>Output: </li></ul><ul><li>I have a bike </li></ul><ul><li>I have a car </li></ul>
  68. 68. Forms Example – Submit Buttons <ul><li><form name=&quot;input&quot; action=&quot;html_form_action.asp“ method=&quot;get&quot;> </li></ul><ul><li>Username: <input type=&quot;text&quot; name=&quot;user&quot;> </li></ul><ul><li> <input type=&quot;submit&quot; value=&quot;Submit&quot;> </li></ul><ul><li></form> </li></ul><ul><li>Output: </li></ul><ul><li>Username: </li></ul>Submit
  69. 69. Forms Example – Dropdown Boxes <ul><li><form> </li></ul><ul><li><select name=&quot;cars&quot;> </li></ul><ul><li><option value=&quot;volvo&quot;>Volvo </li></ul><ul><li><option value=&quot;saab&quot;>Saab </li></ul><ul><li><option value=&quot;fiat&quot;>Fiat </li></ul><ul><li><option value=&quot;audi&quot;>Audi </li></ul><ul><li></select> </li></ul><ul><li></form> </li></ul><ul><li>Output: </li></ul><ul><li>A dropdown box showing these four car names </li></ul>
  70. 70. Exercise <ul><li>Create the following form with guidelines as specified below. </li></ul><ul><ul><li>Fields in the form should be first name, last name, email, address, city, state, pin, and country </li></ul></ul><ul><ul><li>All text fields except City should have display length of 40 and maximum length of 50 </li></ul></ul><ul><ul><li>City should have display length of 20 and maximum length of 40 </li></ul></ul><ul><ul><li>State should have the following set of values to choose from: AP, Bi, Ma, MP, TN </li></ul></ul>
  71. 71. Solution <ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><title> Forms Example </title> </li></ul><ul><li><form> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;firstname&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>First Name<br> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;lastname&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Last Name<br> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;email&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Email Address<br> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;address&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Postal Address<br> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;city&quot; size=&quot;20&quot; maxlength=&quot;40&quot;>City </li></ul><ul><li><select name=&quot;state&quot;> </li></ul><ul><li><option value=&quot;ap&quot;>AP </li></ul><ul><li><option value=&quot;bi&quot;>Bi </li></ul><ul><li><option value=&quot;ma&quot;>MH </li></ul><ul><li><option value=&quot;mp&quot;>MP </li></ul><ul><li><option value=&quot;mp&quot;>TN </li></ul><ul><li></select> </li></ul><ul><li>State </li></ul><ul><li><input type=&quot;text&quot; name=&quot;pin&quot; size=&quot;10&quot; maxlength=&quot;15&quot;>Pin code<br> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;country&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Country<br> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  72. 72. Text areas <ul><li>Used for multi-line inputs </li></ul><ul><li>Example: </li></ul><ul><li><textarea name=“comments” rows=“5” cols=“40”> Please provide comments</textarea> </li></ul>Number of visible rows Cols=“n” Number of visible rows Rows=“n” Name for the text area Name=“…” Area for multi-line user input <textarea> Use Tag/Attribute
  73. 73. Formatting Forms <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Formatted Form Example</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><form action=&quot;donothing.jsp&quot; metod=&quot;POST&quot;> </li></ul><ul><li><table border=&quot;2&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><th>Choose your payment mechanism:</th> </li></ul><ul><li><td> </li></ul><ul><li><select name=&quot;paymentmode&quot;> </li></ul><ul><li><option value=&quot;creditcard&quot;>Credit Card</option> </li></ul><ul><li><option value=&quot;debitcard&quot;>Debit Card</option> </li></ul><ul><li></select> </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><th align=&quot;left&quot;>Type:</th> </li></ul><ul><li><td> </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;cardtype&quot; value=&quot;visa&quot;>Visa </li></ul><ul><li><br> </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;cardtype&quot; value=&quot;master&quot;>Master </li></ul><ul><li><br> </li></ul><ul><li><input type=&quot;radio&quot; name=&quot;cardtype&quot; value=&quot;other&quot;>Other </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></form> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  74. 74. Images
  75. 75. Images <ul><li>The <img> tag is used </li></ul><ul><li>The <src> tag specifies the URL of the image we want to display </li></ul><ul><li>Syntax </li></ul><ul><ul><li><img src=&quot;url&quot;> </li></ul></ul><ul><li>The ‘alt’ attribute is used to define alternate text for an image, in case the image is not found </li></ul><ul><ul><li>e.g. <img src=&quot;boat.gif&quot; alt=&quot;Big Boat&quot;> </li></ul></ul>
  76. 76. Image Example <ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><h3>Image Example</h3> </li></ul><ul><li><img src=&quot;crypto.jpg&quot;> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  77. 77. Sizing Images <ul><li>We can set the width and height of images in pixels </li></ul><ul><li>Example: </li></ul><ul><ul><li><img src=“crypto.jpg” width=“800” height=“400”> </li></ul></ul>
  78. 78. Adding Background Images <ul><li><html> </li></ul><ul><li><body background=&quot;background.jpg&quot;> </li></ul><ul><li><h3>Look: A background image!</h3> </li></ul><ul><li><p>Both gif and jpg files can be used as HTML backgrounds.</p> </li></ul><ul><li><p>If the image is smaller than the page, the image will repeat itself.</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  79. 79. Stylesheets
  80. 80. Formatting Nightmares <ul><li>The original HTML was never intended to contain tags for formatting a document </li></ul><ul><li>HTML tags were intended to define the content of the document like: </li></ul><ul><ul><li><p>This is a paragraph</p> </li></ul></ul><ul><ul><li><ul>This is an unordered list</ul> </li></ul></ul><ul><li>When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare </li></ul><ul><li>A long, expensive and unduly painful process! </li></ul>
  81. 81. Enter HTML 4.0 <ul><li>All formatting can be moved out of the HTML document and into a separate style sheet </li></ul><ul><li>Separation of the presentation of the document from its structure </li></ul><ul><li>Total control of presentation layout without messing up the document content </li></ul>
  82. 82. One css, Many html documents Corporate.css Document1.html Document2.html Document3.html Document4.html
  83. 83. Styles <ul><li>When a browser comes across a style sheet, it formats the document according to it </li></ul><ul><li>Three ways </li></ul><ul><ul><li>External style sheet </li></ul></ul><ul><ul><li>Internal style sheet </li></ul></ul><ul><ul><li>Inline style sheet </li></ul></ul>
  84. 84. External Style Sheet <ul><li>Ideal when the style is applied to many pages </li></ul><ul><li>With an external style sheet, you can change the look of an entire Web site by changing one file </li></ul><ul><li>Two methods to use such a style sheet </li></ul><ul><ul><li>Each page must link to the style sheet using the <link> tag </li></ul></ul><ul><ul><ul><li>The <link> tag goes inside the head section </li></ul></ul></ul><ul><ul><li>Use the @import directive </li></ul></ul>
  85. 85. External Style Sheet Example: Using link <ul><li>Allows different style sheets to be used with one HTML (e.g. view.css, print.css) </li></ul><ul><li>One of these would be used, depending on the requirement </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=“view.css&quot;> <!-- (OR “print.css”) --> </li></ul><ul><li></head> </li></ul>
  86. 86. External Style Sheet Example: Using import <ul><li>Multiple style sheets, each one having a separate function (e.g. one for organization, one for department, …) </li></ul><ul><li><HEAD> </li></ul><ul><li><STYLE> </li></ul><ul><li>@import url (“red.css”) </li></ul><ul><li>@import url (“green.css”) </li></ul><ul><li></STYLE> </li></ul>
  87. 87. Internal Style Sheet <ul><li>Should be used when a single document has a unique style </li></ul><ul><li>You define internal styles in the head section with the <style> tag </li></ul>
  88. 88. Internal Style Sheet Example <ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>body {background-color: red} </li></ul><ul><li>p {margin-left: 20px} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul>
  89. 89. Inline Style Sheet <ul><li>Should be used when a unique style is to be applied to a single occurrence of an element </li></ul><ul><li>To use inline styles you use the style attribute in the relevant tag </li></ul><ul><li>The style attribute can contain any CSS property </li></ul>
  90. 90. Inline Style Sheet Example <ul><li><p style=&quot;color: red; margin-left: 20px&quot;> </li></ul><ul><li>This is a paragraph </li></ul><ul><li></p> </li></ul>
  91. 91. HTML Head <ul><li>The head element contains general information, also called meta-information, about a document </li></ul><ul><li>Meta means &quot;information about&quot; </li></ul><ul><li>Meta-information means information about information </li></ul><ul><li>Elements inside the Head element are not displayed by the browser </li></ul><ul><li>According to the HTML standard, only a few tags are legal inside the head section: <base>, <link>, <meta>, <title>, <style>, and <script> </li></ul>
  92. 92. HTML URLs <ul><li>Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web </li></ul><ul><li>scheme://host.domain:port/path/filename </li></ul><ul><ul><li>Scheme : Type of Internet service. The most common type is http . </li></ul></ul><ul><ul><li>Domain : The Internet domain name, e.g. yahoo.com. </li></ul></ul><ul><ul><li>Host : The domain host (default is www) </li></ul></ul><ul><ul><li>:Port : The port number at the host (Default 80) </li></ul></ul><ul><ul><li>Path : Path (a sub directory) on the server </li></ul></ul><ul><ul><li>Filename : The name of the document </li></ul></ul>
  93. 93. HTML URL Examples <ul><li>Email </li></ul><ul><ul><li><a href=&quot;mailto:someone@xyz.com&quot;>someone@xyz.com</a> </li></ul></ul>
  94. 94. JavaScript: Introduction
  95. 95. HTML Scripts <ul><li>Scripts make static HTML pages interactive </li></ul><ul><li><script> tag is used </li></ul><ul><li>Browsers are programmed to interpret scripts </li></ul>
  96. 96. Script Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>document.write(&quot;Hello World!&quot;) </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Output : </li></ul><ul><li>Hello World! </li></ul>
  97. 97. Handling Old Browsers <ul><li>Old browsers that cannot interpret scripts will display the scripting code on the screen! </li></ul><ul><li>To prevent this, we can comment out the scripting code </li></ul><ul><ul><li>Old browsers would ignore scripts </li></ul></ul><ul><ul><li>Newer browsers would interpret and execute the scripts, as expected </li></ul></ul><ul><ul><li>See next slide </li></ul></ul>
  98. 98. Handling Old Browsers – Code <ul><li>JavaScript: </li></ul><ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><li><!-- document.write(&quot;Hello World!&quot;) //--> </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><li>VBScript: </li></ul><ul><ul><li><script type=&quot;text/vbscript&quot;> </li></ul></ul><ul><ul><li><!-- document.write(&quot;Hello World!&quot;) '--> </li></ul></ul><ul><ul><li></script> </li></ul></ul>
  99. 99. Thank you! Questions and Comments Welcome!

×