Posted By

DrPepper on 11/09/10


Tagged


Versions (?)

[HTML] Order list / unorder list /definition list


 / Published in: HTML
 

if you make a long page and if you want to jump to a topic in your page, you just add id in a wherever you want and make a link to that id tag. In this case, i made some id in a tag. Don't forget id uses # mark !!

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.  
  9. </head>
  10. <body style="background-color: #808080; color: #FFFFFF;" vlink="#0000A0" alink="#408080" link="#804000">
  11.  
  12.  
  13. <!-- ###########################################################################
  14. # [ADDED] 2010/10/14 create favs.html #
  15. ########################################################################-->
  16.  
  17. <h1 style="text-align: center">Ryutaro Matsuda's Favorites</h1>
  18.  
  19. <a href="#web" title="Favorite web pages">See my Favorite Web Pages</a><br />
  20. <a href="#class" title="Favorite Classes">See my Favorite Classes</a><br />
  21. <!--############################################################################
  22. # 3 unordered lists #
  23. #########################################################################-->
  24.  
  25. <div>
  26.  
  27. <h3 id="sports">Favorite Sports</h3>
  28. <ul>
  29. <li>Skateboarding</li>
  30. <li>Surfing</li>
  31. <li>Snow boarding</li>
  32. <li>Tennis</li>
  33. <li>Soccer</li>
  34. </ul>
  35.  
  36. <h3 id="sk8">Favorite skate brand</h3>
  37. <ul style="list-style-type: circle">
  38. <li>autobahn wheel</li>
  39. <li>western edition</li>
  40. <li>momentum</li>
  41. <li>FTC</li>
  42. <li>venture</li>
  43. </ul>
  44.  
  45. <h3 id="color">Favorite color</h3>
  46. <ul style="list-style-type: square">
  47. <li><span style="color: #000000">Black</span></li>
  48. <li><span style="color: #FFFFFF">White</span></li>
  49. <li><span style="color: #151B8D">Blue</span></li>
  50. <li><span style="color: #008000">Green</span></li>
  51. <li><span style="color: #c0c0c0">Silver</span></li>
  52. </ul>
  53.  
  54.  
  55. <!--###########################################################################
  56. # 4 orderd lists #
  57. ########################################################################-->
  58. <h3>Favorite food</h3>
  59. <ol style="list-style-type: lower-alpha">
  60. <li>Pasta</li>
  61. <li>Salda</li>
  62. <li>Pizza</li>
  63. <li>Burrito</li>
  64. <li>tacos</li>
  65. </ol>
  66. <h3>Favorite Drink</h3>
  67. <ol style="list-style-type: upper-alpha">
  68. <li>Water</li>
  69. <li>Coffee</li>
  70. <li>Splight</li>
  71. <li>Dark Cherry Cola</li>
  72. <li>Red Wine</li>
  73. </ol>
  74.  
  75. <h3 id="city">Favorite City</h3>
  76. <ol style="list-style-type: lower-roman">
  77. <li>Tokyo[JP]</li>
  78. <li>San Fransisco[US]</li>
  79. <li>Kuala lumpur[MY]</li>
  80. <li>Osaka[JP]</li>
  81. <li>Sacramento[US]</li>
  82. </ol>
  83. <h3>Favorite App on my iPhone</h3>
  84. <ol style="list-style-type: upper-roman">
  85. <li>Google Voice</li>
  86. <li>Skype</li>
  87. <li>RedBull TV</li>
  88. <li>977music.com</li>
  89. <li>PS Express</li>
  90. </ol>
  91. <h3>Favorite Starbucks Drink</h3>
  92. <ol>
  93. <li>Bold Pick of Day [Black]</li>
  94. <li>Java Chip Frappuccino</li>
  95. <li>Espresso Chocolate Truffle</li>
  96. <li>Peppermint White Chocolate Mocha</li>
  97. <li>Vanilla Beans Frappuccino</li>
  98. </ol>
  99.  
  100.  
  101. <!--##########################################################################
  102. # unoder list with image #
  103. #######################################################################-->
  104.  
  105. <h3 id="web">Favorite Web Page</h3>
  106. <ul style="list-style-image: url(./023.png)">
  107. <li><a href="http://unitedstateonline.com/store3/" target="_blank">United State Online</a></li>
  108. <li><a href="http://hypetype.co.uk/" target="_blank">Hype Type</a></li>
  109. <li><a href="http://aboveandbeyond.nu/" target="_blank">Above and Beyond</a></li>
  110. <li><a href="http://bettafootwear.com/" target="_blank">BettaFootWear</a></li>
  111. <li><a href="http://www.redbull.com/tv" target="_blank">RedBull TV</a></li>
  112. </ul>
  113.  
  114.  
  115.  
  116. <!--###########################################################################
  117. # Definition list #
  118. ########################################################################-->
  119.  
  120.  
  121. <h3 id="class">Favorite Class</h3>
  122. <dl>
  123. <dt>AERO 121/120</dt>
  124. <dd>Basic skill of Aviation class</dd>
  125. <dt>CISP 301</dt>
  126. <dd>Basic skill of computer Programing</dd>
  127. <dt>CISW 320</dt>
  128. <dd>Basic skill of web design</dd>
  129. <dt>CISC 320</dt>
  130. <dd>Basic skill of operation system</dd>
  131. <dt>CISP 360</dt>
  132. <dd>Intermidiate C++/C programing</dd>
  133. </dl>
  134. <a href="mailto:[email protected]" title="link to email me">Email Webmasterr</a><br />
  135. <a href="#sports" title="Favorite Sports">See my Favorite Sports</a><br />
  136. <a href="#city" title="Favorite Cities">See my Favorite Cities</a><br />
  137. <a href="#sk8" title="Favorite Skate brands">See my Favorite Skate brands</a><br />
  138. <a href="#color" title="Favorite Colors">See my Favorite Colors</a><br />
  139. <a href="../index.html" title="link to home">>>Go Back to Home</a><br />
  140. </div>
  141. </body>
  142. </html>

Report this snippet  

You need to login to post a comment.