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.
Upcoming SlideShare
BBAuth
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

Semantic HTML Basic

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Semantic HTML Basic

  1. 1. HTML Yahoo! Joseph Chiang / josephj@yahoo-inc.com
  2. 2. HTML
  3. 3. HTML • HyperText Markup Language • • <.../> •
  4. 4. http://fgps.tcc.edu.tw/~jon/jon.htm
  5. 5. HTML ? • <big> </big> • <font size=7 face=” ”> </ font> 7
  6. 6. HTML • • • • • • •
  7. 7. FLEX Silverlight • RIA (Rich Interface Application) • Player • • • HTML • Flash
  8. 8. ... HTML
  9. 9. HTML • • • • • • / • Yahoo! Google HTML Browser+, Gears
  10. 10. • FLEX / Silverlight • • User • HTML • •
  11. 11. Semantic vs. HTML
  12. 12. • • • Dreamweaver • Search Engine Optimization
  13. 13. • HTML <table/> • HTML • HTML
  14. 14. HTML JavaScript CSS
  15. 15. Semantic • HTML • HTML • CSS JavaScript • Dreamweaver Frontpage
  16. 16. HTML
  17. 17. • http://www.w3schools.com/html/ •
  18. 18. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  19. 19. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html> DOCTYPE X HTML
  20. 20. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  21. 21. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  22. 22. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  23. 23. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  24. 24. • • <h1> ~ <h6> • h1
  25. 25. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
  26. 26. <p>~</p> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
  27. 27. <em>~</em> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <em>Semantic </em> </p> </body> </html>
  28. 28. <strong>~</strong> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <strong>Semantic </strong> </p> </body> </html>
  29. 29. <a href=”...”>~</a> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML Semantic </strong> </p> <a href=”http://josephj.com/”> </a> </body> </html>
  30. 30. <a href=”...”>~</a> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML Semantic </strong> </p> <a href=”http://josephj.com/” target=”_blank”> </a> </body> </html>
  31. 31. <div>~</div> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <div> <a href=”about.html”> </a> <a href=”forum.php”> </a> </div> <div> <h1> </h1> <p> josephj.com <p> </div> </body> </html>
  32. 32. <span>~</span> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <div> <h1> </h1> <div> <span> </span> <a href=”...”>Yahoo! </a> </div> </div> </body> </html>
  33. 33. Orz | |○ 这样 ( )
  34. 34. <dl> <dt>Orz</dt> <dd> | |○ 这样 </dd> <dt> </dt> <dd> ( ) </dd> </dl>
  35. 35. Nike Dphiten Nike Dry Fit Nike Casio Nike Adidas Sony Cybershot Dakine
  36. 36. <h2> </h2> <ul> <li>Nike </li> <li> </li> <li>Dphiten </li> <li>Nike Dry Fit </li> <li>Nike </li> <li> </li> <li>Casio </li> <li> </li> <li>Nike </li> <li>Adidas </li> <li>Sony Cybershot </li> <li>Dakine </li> </ul>
  37. 37. 4:00 (Energy-in + ) 5:00 GPS 5:00 ~ 10:00 ( , ) 11:00 ~ 12:00 13:00 ~ 16:00 16:00 ~ 19:00 , , 19:00 ~ 21:00 21:30
  38. 38. <h2> </h2> <ol> <li>4:00 (Energy-in + )</li> <li>5:00 GPS </li> <li>5:00 ~ 10:00 ( , ) </li> <li>11:00 ~ 12:00 </li> <li>13:00 ~ 16:00 </li> <li>16:00 ~ 19:00 , , </li> <li>19:00 ~ 21:00 </li> <li>21:30 </li> </ol>
  39. 39. <table></table> 120G + 1G RAM Eee PC 8G + 1G RAM Intel 800MHz / 120G HDD / 1G RAM Intel Mobile / 8G HDD (Flash) / 1G RAM 29,900 14,490 Vista XP 130 30 Web
  40. 40. <table></table> <h3> </h3> <table> <tr> <th></th><th> 120G + 1G RAM </th><th> Eee PC 8G + 1G RAM </th> </tr> <tr> <th> </th><td>Intel 800MHz / 120G HDD / 1G RAM</td><td>Intel Mobile / 8G HDD (Flash) / 1G RAM</td> </tr> <tr> <th> </th><td>29,900</td><td>14,490</td> </tr> <tr> <th> </th><td>Vista</td><td>XP</td> </tr> <tr> <th> </th><td>130 </td><td>30 Web </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> </table>
  41. 41. id class <ol class=quot;bibliographyquot;> <li> <cite>quot;Colorimetry, Second Editionquot;, CIE Publication 15.2-1986, ISBN 3-900-734-00-3.</cite> </li> <li> <cite>quot;Cascading Style Sheets, level 1quot;, H. W. Lie, B. Bos, 17 December 1996.</cite> </li> <li> <cite>quot;Cascading Style Sheets, level 2, CSS2 Specificationquot;, B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998</cite> </li> </ol> id id=”navigation”, id=”relate-site”, id=”login”
  42. 42. • The Elements of Meaningful XHTML http://tantek.com/presentations/2005/09/ elements-of-xhtml/ • Bring on the tables http://www.456bereastreet.com/archive/ 200410/bring_on_the_tables/
  43. 43. • • • • • http://tw.myblog.yahoo.com/jw! Q3lkkBafERy7ixxachp8Pg--/article? mid=5084
  • JiingbinChen

    Mar. 16, 2013
  • lifesinger

    Feb. 25, 2010
  • youys

    Dec. 1, 2008

Views

Total views

2,357

On Slideshare

0

From embeds

0

Number of embeds

12

Actions

Downloads

46

Shares

0

Comments

0

Likes

3

×