Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html Hands On


Published on

  • Be the first to comment

  • Be the first to like this

Html Hands On

  1. 1. HTML Hands-on Cornelius Koo, ST JavaSchool 2005Jl. Cemara 2/20, Salatiga
  2. 2. What is HTML ?• Hyper Text Markup Language• .htm / .html• <tag></tag>• <tag attribute1=“value1” attribute2=“value2”></tag>
  3. 3. Simple HTML<html> <head> <title>My Simple Page</title> </head> <body> This is My Simple Page </body></html>
  4. 4. Basic Tag
  5. 5. Header<body> <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6></body>
  6. 6. Alignment Attribute<body> <h1 align="center">Header 1</h1> <h2 align="left">Header 2</h2> <h3 align="right">Header 3</h3> <h4 align="justify">Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6></body>
  7. 7. Paragraf<body> This is ordinary text <p>This is the paragraf</p></body>
  8. 8. Line Break<body> This is ordinary text <br> Line break <br> Line break again This time without line break</body>
  9. 9. Horizontal Rule<body> Report <hr> Put your text here... <hr></body>
  10. 10. Comment<body> <!-- This is the html comment --></body>
  11. 11. Text Formatting Tag
  12. 12. Simple Text Formatting<body> Biasa<br> <strong>Strong</strong><br> <b>Bold</b><br> <big>Big</big><br> <em>Emphasized</em><br> <i>Italic</i><br> <small>Small</small><br> x<sub>8</sub><br> x<sup>2</sup><br> Text <ins>inserted / underlined</ins><br> Text <del>deleted</del></body>
  13. 13. Preformatted<body> <pre> int[] array = {3,5,4,6}; for (int i = 0; i < array.length; i++) { System.out.println(array[i]); } </pre></body>
  14. 14. Computer Related<body> <code>Computer code</code><br> <kbd>Keyboard Input</kbd><br> <tt>Teletype Text</tt><br> <samp>Sample Text</samp><br> <var>Variable</var><br></body>
  15. 15. Address<body> <address> German Center, 5th floor<br> Bumi Serpong Damai, Serpong </address></body>
  16. 16. Abbreviation<body> <abbr title="United States of America">USA </abbr><br> <acronym title="United States of America">USA </acronym></body>
  17. 17. Text Direction<body> <bdo dir="ltr">From left to right</bdo><br> <bdo dir="rtl">From right to left</bdo></body>
  18. 18. Quotation<body> <blockquote> "Jikacinta memanggilmu pasrahlah kepadanya..." </blockquote> <q>"Walaupun bilah bilah pedang yang terselip diantara sayapnya menyakitimu..."</q></body>
  19. 19. Font<body> <p><font size="1">Font 1</font></p> <p><font color="#9933FF" size="2">Font 2</font> </p> <p><font color="#FF00CC" size="3">Font 3</font></p> <p><font color="#006633" size="4">Font 4</font></p> <p><font color="#FFFF00" size="5">Font 5</font></p> <p><font color="#0000FF" size="6">Font 6</font></p> <p><font color="#FF0000" size="7">Font 7</font></p></body><font> has been removed since HTML 4.0 and won’t befound in xhtml, use css instead.
  20. 20. Font Face<font color="#FF0000" size="7" face="Courier New, Courier, mono"> Font 7</font>
  21. 21. Blink<blink>Bagaikan bintang di langit</blink>Only works on Netscape… ;(
  22. 22. Character Entities Tag
  23. 23. <body> Copyright&copy;<br> Registered&reg;<br> Microsoft™<br> Non Breaking Space&nbsp;<br> Ampersand&amp;<br> &laquo;Angle Quote&raquo;<br> &quot;Quote&quot;<br> 1&lt;10<br> 10&gt;1<br> 1&times;2=2<br> 4&divide;2=2<br></body>
  24. 24. Link Tag
  25. 25. Open New Window<a href="paragraf.html" target="_blank">Paragraf</a>
  26. 26. On The Same Window<a href="quotation.htm" target="_self">Quotation</a>
  27. 27. Other Target• _top• _parent
  28. 28. No Line• <a href="simpletextformat.htm" style="text- decoration:none">Simple Text Format</a>
  29. 29. Email• <a href=""> Email me!</a>
  30. 30. Relative<a href="charentity.html"> Character Entity </a>
  31. 31. Absolute<a href="http://localhost/html/address.htm"> Address</a>
  32. 32. Document<br> <a href="#part1">Part 1</a><br> <a href="#part2">Part 2</a><br> <a href="#part3">Part 3</a><br> <a href="#part4">Part 4</a><br> <a href="#part5">Part 5</a><br> <a href="#part6">Part 6</a><br> <a href="#part7">Part 7</a><br><br>
  33. 33. • <a name="part1">When love beckons to you, follow him,</a>• <a name="part2">And when his wings enfold you yield to him,</a>• <a name="part3">And when he speaks to you believe in him.</a>• <a name="part4">For even as love crowns you so shall he crucify you.</a>• …
  34. 34. List Tag
  35. 35. Unordered ListPenerus Kungfu XingYi Quan &lt;Unordered List&gt;<ul> <li type="circle">Yue Fei</li> <li type="disc">Ji LongFeng</li> <li type="square">Mai Jia Ren</li> <li>Ma Jia Ren</li> <li>Dai LongBang &amp; Dai LingBan</li> <li>Li LaoNeng</li> <li>Guo YunShen</li></ul>
  36. 36. Ordered ListPancasila &lt;Ordered List&gt;<ol> <li type="1">Ketuhanan Yang Maha Esa</li> <li type="a">Kemanusiaan Yang Adil dan Beradab</li> <li type="i">Persatuan Indonesia</li> <li>Kerakyatan Yang Dipimpin Oleh Hikmat Kebijaksanaan Dan Permusyawaratan Perwakilan</li> <li>Keadilan Sosial Bagi Seluruh Rakyat Indonesia</li></ol>
  37. 37. Nested ListNested List<ul> <li>Apel</li> <li>Jeruk</li> <ul> <li>Jeruk Manis</li> <li>Jeruk Bali</li> <li>Jeruk Nipis</li> </ul></ul>
  38. 38. Definition ListDefinition List<dl> <dt>Tie Sha Zhang</dt> <dd>improved external energy on your palm, it is hard nei gong</dd> <dt>Ying Jiauw</dt> <dd>the ability of eagle grasp, it trains our hard nei gong too</dd></dl>
  39. 39. Image Tag
  40. 40. Image<imgsrc="img/javangelist-logo.png"width="207" height="209"hspace="6" vspace="6"border="0"usemap="#Map">
  41. 41. Image Map<map name="Map"> <area shape="poly" coords="8,41,12,29,20,22,28,18,39,18,49,11,57, 8,56,21,61,28,65,34,67,38,73,34,77,29,79,34,81 ,43,81,51,67,49,63,57,57,62,56,69,49,69,46,64, 41,65,31,65,21,62,14,56,18,54,21,50,25,54,30,4 8,34,50,35,45,34,39,29,38,27,44,22,38,15,45,7, 40" href="list.html"></map>
  42. 42. Table Tag
  43. 43. Elements• <table></table>• Define a table in HTML document
  44. 44. • <caption></caption>• Define table’s title
  45. 45. • <tr></tr>• Specifiy a row on table
  46. 46. • <td></td>• Specify a data cell on table
  47. 47. • <th></th>• Specify a header on table
  48. 48. Attributes• align={left|center|right}• valign={top|middle|bottom}• colspan=n• Rowspan=n• nowrap
  49. 49. Frame Tag
  50. 50. Inline Frame• <iframe name=“…” src=“…” rows=# cols=# > </iframe>
  51. 51. Frame Set<frameset cols=“30%,30%,*”> <frame src=“a.html”> <frame src=“b.html”> <frame src=“c.html”></frameset>
  52. 52. <frameset rows=“30%,30%,*”> <frame src=“a.html”> <frame src=“b.html”> <frame src=“c.html”></frameset>
  53. 53. <frameset cols=“30%,*”> <frame src=“a.html”> <frameset rows=“30%,*”> <frame src=“b.html”> <frame src=“c.html”> </frameset></frameset>
  54. 54. Form Tag
  55. 55. <form action=“URL” method=“get | post”> enctype=“”</form>
  56. 56. Form ComponentSee form.html for more detail on formcomponents
  57. 57. Head Tag
  58. 58. Title• <title>Ini Judul Web Page Kita</title>
  59. 59. Base• <base target=“_blank”>• Building common target to all link on the page.
  60. 60. Style• <style></style>• Define the style we used in our page.
  61. 61. Script• <script></script>• Define the script we used in our page.
  62. 62. Meta Tag
  63. 63. Informational Purpose• <meta name=“author” content=“Wrox”>• <meta name=“generator” content=“Macromedia Dreamweaver MX”>
  64. 64. Page Refresh• <meta http-equiv=“refresh” content=“3;url=”>
  65. 65. Reference• Teach YourSelf Web Publishing with HTML and XHTML in 21 days, Laura Lemay, Sams, 2001.• HTML Reference•